<html>
<head>
<title>슬라이딩 이미지</title>
<script language="JavaScript1.1">
<!--
var img1 = new Image();
img1.src = "img/img1.gif";
var img2 = new Image();
img2.src = "img/img2.gif";
var img3 = new Image();
img3.src = "img/img3.gif";
var img4 = new Image();
img3.src = "img/img4.gif";
//-->
</script>
</head>
<body onLoad="init();">
<img src="img/img1.gif" name="blendtrjs" border="0" style="filter: blendTrans(duration=2)">
<script language="JavaScript">
<!--
var maxLoops = 3;
var bInterval = 2;
var count = 2;
function init() {
blendtrjs.filters.blendTrans.apply();
document.images.blendtrjs.src = eval("img"+count+".src");
blendtrjs.filters.blendTrans.play();
if (count < maxLoops) {
count++;
}
else {
count = 1;
}
setTimeout("init()", bInterval*700+2000);
}
//-->
</script>
</body>
</html>
<head>와 </head>사이에 아래의 소스를 넣는다
<script language="JavaScript1.1">
<!--
var img1 = new Image();
img1.src = "img/img1.gif";
var img2 = new Image();
img2.src = "img/img2.gif";
var img3 = new Image();
img3.src = "img/img3.gif";
var img4 = new Image();
img3.src = "img/img4.gif";
//-->
</script>
위에 소스에서 초록색으로 된 부분을 수정해 준다 이미지 주소를 넣어야겠죠? ^^
이미지를 더 많이 넣고 싶으면 img3.src 이부분에 숫자를 늘려주면 되어 ^^
<body>와 <.body>사이에 아무곳에나 아래의 소스를 넣는다
<script language="JavaScript">
<!--
var maxLoops = 3;
var bInterval = 2;
var count = 2;
function init() {
blendtrjs.filters.blendTrans.apply();
document.images.blendtrjs.src = eval("img"+count+".src");
blendtrjs.filters.blendTrans.play();
if (count < maxLoops) {
count++;
}
else {
count = 1;
}
setTimeout("init()", bInterval*700+2000);
}
//-->
</script>
<body>와 </body> 사이에 이미지가 보여 질곳에 아래의 소스를 넣는다
<img src="이미지주소" name="blendtrjs" border="0" style="filter: blendTrans(duration=2)">
duration=2 에서 2는 트랜지션의 변환속도 (낮을수록 빠름, 1 미만의 소수도 가능)
<head>
<title>슬라이딩 이미지</title>
<script language="JavaScript1.1">
<!--
var img1 = new Image();
img1.src = "img/img1.gif";
var img2 = new Image();
img2.src = "img/img2.gif";
var img3 = new Image();
img3.src = "img/img3.gif";
var img4 = new Image();
img3.src = "img/img4.gif";
//-->
</script>
</head>
<body onLoad="init();">
<img src="img/img1.gif" name="blendtrjs" border="0" style="filter: blendTrans(duration=2)">
<script language="JavaScript">
<!--
var maxLoops = 3;
var bInterval = 2;
var count = 2;
function init() {
blendtrjs.filters.blendTrans.apply();
document.images.blendtrjs.src = eval("img"+count+".src");
blendtrjs.filters.blendTrans.play();
if (count < maxLoops) {
count++;
}
else {
count = 1;
}
setTimeout("init()", bInterval*700+2000);
}
//-->
</script>
</body>
</html>
<head>와 </head>사이에 아래의 소스를 넣는다
<script language="JavaScript1.1">
<!--
var img1 = new Image();
img1.src = "img/img1.gif";
var img2 = new Image();
img2.src = "img/img2.gif";
var img3 = new Image();
img3.src = "img/img3.gif";
var img4 = new Image();
img3.src = "img/img4.gif";
//-->
</script>
위에 소스에서 초록색으로 된 부분을 수정해 준다 이미지 주소를 넣어야겠죠? ^^
이미지를 더 많이 넣고 싶으면 img3.src 이부분에 숫자를 늘려주면 되어 ^^
<body>와 <.body>사이에 아무곳에나 아래의 소스를 넣는다
<script language="JavaScript">
<!--
var maxLoops = 3;
var bInterval = 2;
var count = 2;
function init() {
blendtrjs.filters.blendTrans.apply();
document.images.blendtrjs.src = eval("img"+count+".src");
blendtrjs.filters.blendTrans.play();
if (count < maxLoops) {
count++;
}
else {
count = 1;
}
setTimeout("init()", bInterval*700+2000);
}
//-->
</script>
<body>와 </body> 사이에 이미지가 보여 질곳에 아래의 소스를 넣는다
<img src="이미지주소" name="blendtrjs" border="0" style="filter: blendTrans(duration=2)">
duration=2 에서 2는 트랜지션의 변환속도 (낮을수록 빠름, 1 미만의 소수도 가능)
'인터넷정보' 카테고리의 다른 글
접속 할 때마다 램덤으로 다른 이미지 띄우기 (0) | 2007.10.18 |
---|---|
은은하게 변하는 롤오버 이미지 (0) | 2007.10.18 |
이미지 갤러리 만들기 <2> (0) | 2007.10.18 |
이미지 갤러리 만들기 <1> - 작은 그림을 클릭해보면 왼쪽으로 원본 이미지가 뜬다. (0) | 2007.10.18 |
이미지 슬라이드 (0) | 2007.10.18 |
이미지 슬라이드 (0) | 2007.10.18 |
이미지 슬라이드 (마우스오버시멈춤) (0) | 2007.10.18 |
같은 글자 반복해서 나타내기 (0) | 2007.10.18 |
마우스 오버시 툴팁 - 풍선 도움말 (0) | 2007.10.18 |
E-mail :: 이메일 추출기에 걸리지 않게 E-mail 링크하기 2 (0) | 2007.10.18 |
<html>
<head>
<title>─이미지슬라이드<1>─</title>
<script type="text/javascript">
<!-- Original: Mike McGrath (mike_mcgrath@lineone.net) -->
<!-- Web Site: http://website.lineone.net/~mike_mcgrath -->
<!--
var img=new Array();
img[0]=new Image(); img[0].src="http://oxtag.com/html/img/banner3.gif";
img[1]=new Image(); img[1].src="http://oxtag.com/html/img/banner4.gif";
img[2]=new Image(); img[2].src="http://oxtag.com/html/img/banner/jjin_tagpia.gif";
var interval=1500;
var n=0;
var imgs = new Array("http://oxtag.com/html/img/banner3.gif","http://oxtag.com/html/img/banner4.gif","http://oxtag.com/html/img/banner/jjin_tagpia.gif");
function rotate()
{
if(navigator.appName=="Netscape" && document.getElementById)
{
document.getElementById("slide").src=imgs[n];
}
else document.images.slide.src=imgs[n];
(n==(imgs.length-1))?n=0:n++;
setTimeout("rotate()",interval);
}
// -->
</script>
</head>
<body onload="rotate();">
<img src="http://oxtag.com/html/img/banner3.gif" id="slide">
</body>
</html>
─ 설명 ─
<head>와 </head>사이에 왼쪽 쏘스에 있는 자바 스크립트 소스를 넣는다
img[0]=new Image(); img[0].src="img/img2.gif";
img[1]=new Image(); img[1].src="img/img3.gif";
img[2]=new Image(); img[2].src="img/img4.gif";
에는 두 번째부터 보여질 이미지를 넣는다
이미지를 더 많이 넣고 싶으면 img[2] 부분에 숫자를 늘려주면서 추가하면 되고 이미지를 적게 사용하려면 지우면 된다 ^^
var interval=1500;
그림에 멈춰있는 시간
1000=1초
var imgs = new Array("img/img1.gif","img/img2.gif","img/img3.gif","img/img4.gif");보여질 이미지를 순서대로 써준다.
<body onload="rotate();">
바디 안에onload="rotate();"소스를 넣는다
<body>와 </body>사이에 아래의 소스를 넣는다.
<img src="이미지주소" id="slide">
가장 먼저 보여질 그림의 경로
<head>
<title>─이미지슬라이드<1>─</title>
<script type="text/javascript">
<!-- Original: Mike McGrath (mike_mcgrath@lineone.net) -->
<!-- Web Site: http://website.lineone.net/~mike_mcgrath -->
<!--
var img=new Array();
img[0]=new Image(); img[0].src="http://oxtag.com/html/img/banner3.gif";
img[1]=new Image(); img[1].src="http://oxtag.com/html/img/banner4.gif";
img[2]=new Image(); img[2].src="http://oxtag.com/html/img/banner/jjin_tagpia.gif";
var interval=1500;
var n=0;
var imgs = new Array("http://oxtag.com/html/img/banner3.gif","http://oxtag.com/html/img/banner4.gif","http://oxtag.com/html/img/banner/jjin_tagpia.gif");
function rotate()
{
if(navigator.appName=="Netscape" && document.getElementById)
{
document.getElementById("slide").src=imgs[n];
}
else document.images.slide.src=imgs[n];
(n==(imgs.length-1))?n=0:n++;
setTimeout("rotate()",interval);
}
// -->
</script>
</head>
<body onload="rotate();">
<img src="http://oxtag.com/html/img/banner3.gif" id="slide">
</body>
</html>
─ 설명 ─
<head>와 </head>사이에 왼쪽 쏘스에 있는 자바 스크립트 소스를 넣는다
img[0]=new Image(); img[0].src="img/img2.gif";
img[1]=new Image(); img[1].src="img/img3.gif";
img[2]=new Image(); img[2].src="img/img4.gif";
에는 두 번째부터 보여질 이미지를 넣는다
이미지를 더 많이 넣고 싶으면 img[2] 부분에 숫자를 늘려주면서 추가하면 되고 이미지를 적게 사용하려면 지우면 된다 ^^
var interval=1500;
그림에 멈춰있는 시간
1000=1초
var imgs = new Array("img/img1.gif","img/img2.gif","img/img3.gif","img/img4.gif");보여질 이미지를 순서대로 써준다.
<body onload="rotate();">
바디 안에onload="rotate();"소스를 넣는다
<body>와 </body>사이에 아래의 소스를 넣는다.
<img src="이미지주소" id="slide">
가장 먼저 보여질 그림의 경로
'인터넷정보' 카테고리의 다른 글
은은하게 변하는 롤오버 이미지 (0) | 2007.10.18 |
---|---|
이미지 갤러리 만들기 <2> (0) | 2007.10.18 |
이미지 갤러리 만들기 <1> - 작은 그림을 클릭해보면 왼쪽으로 원본 이미지가 뜬다. (0) | 2007.10.18 |
이미지 슬라이드 (0) | 2007.10.18 |
이미지 슬라이드 (0) | 2007.10.18 |
이미지 슬라이드 (마우스오버시멈춤) (0) | 2007.10.18 |
같은 글자 반복해서 나타내기 (0) | 2007.10.18 |
마우스 오버시 툴팁 - 풍선 도움말 (0) | 2007.10.18 |
E-mail :: 이메일 추출기에 걸리지 않게 E-mail 링크하기 2 (0) | 2007.10.18 |
테이블 순서 바꾸기 (0) | 2007.10.18 |
이미지 슬라이드 (마우스오버시멈춤)
인터넷정보2007. 10. 18. 13:59
- 이미지 슬라이드(마우스오버시멈춤) - 소스 <script language="JavaScript1.2"> <!-- /* Conveyor belt slideshow script- ?Dynamic Drive (www.dynamicdrive.com) For full source code, installation instructions, 100's more DHTML scripts, and Terms Of Use, visit dynamicdrive.com */ //Specify the slider's width (in pixels) var sliderwidth=330 //Specify the slider's height (in pixels, pertains only to NS) var sliderheight=145 //Specify the slider's scroll speed (larger is faster) var slidespeed=4 //Specify the slider's images var leftrightslide=new Array() var finalslide='' leftrightslide[0]='<a href="http://oxtag.com/"><img src="http://oxtag.com/html/img/banner3.gif" width="90" height="30" border=0></a>' leftrightslide[1]='<a href="http://oxtag.com/"><img src="http://oxtag.com/html/img/banner4.gif" width="90" height="30" border=0></a>' leftrightslide[2]='<a href="http://oxtag.com/"><img src="http://oxtag.com/html/img/banner/jjin_tagpia.gif" width="90" height="30" border=0></a>' leftrightslide[3]='<a href="http://oxtag.com/"><img src="http://oxtag.com/html/img/banner/ssaorao_tagpia.gif" width="90" height="30" border=0></a>' leftrightslide[4]='<a href="http://oxtag.com/"><img src="http://oxtag.com/html/img/banner/sole_tagpia1.gif" width="90" height="30" border=0></a>' ///////do NOT edit pass this line//////////////////////////////////// var copyspeed=slidespeed //copy contents of leftrightslide into one variable for (i=0;i<leftrightslide.length;i++) finalslide=finalslide+leftrightslide[i]+" " if (document.all){ //dynamically write out the marquee tag document.write('<marquee id="ieslider" scrollAmount=0 style="width:'+sliderwidth+'">'+finalslide+'</marquee>') //stop marquee when mouse is over it ieslider.onmouseover=new Function("ieslider.scrollAmount=0") //re-enable marquee when mouse is out ieslider.onmouseout=new Function("if (document.readyState=='complete') ieslider.scrollAmount=slidespeed") } function regenerate(){ window.location.reload() } function regenerate2(){ if (document.layers){ document.ns_slider01.visibility="show" setTimeout("window.onresize=regenerate",450) intializeleftrightslide() } if (document.all) ieslider.scrollAmount=slidespeed } //NS specific function for initializing slider upon page load function intializeleftrightslide(){ document.ns_slider01.document.ns_slider02.document.write('<nobr>'+finalslide+'</nobr>') document. ns_slider01.document.ns_slider02.document.close() thelength=document.ns_slider01.document.ns_slider02.document.width scrollslide() } //NS specific function for sliding slideshow function scrollslide(){ if (document.ns_slider01.document.ns_slider02.left>=thelength*(-1)){ document.ns_slider01.document.ns_slider02.left-=slidespeed setTimeout("scrollslide()",100) } else{ document.ns_slider01.document.ns_slider02.left=sliderwidth scrollslide() } } window.onload=regenerate2 //--> </script> <font color="#000000> <ilayer width=&{sliderwidth}; height=&{sliderheight}; name="ns_slider01" visibility=hide> <!--~============ LAYER ============~--> </font><layer name="ns_slider02" onMouseover="slidespeed=0;" onMouseout="slidespeed=copyspeed" id="layer1" left="50" top="50" width="200" height="200" z-index="1"></layer> <!--~========== END LAYER ==========~--> </ilayer> |
'인터넷정보' 카테고리의 다른 글
이미지 갤러리 만들기 <2> (0) | 2007.10.18 |
---|---|
이미지 갤러리 만들기 <1> - 작은 그림을 클릭해보면 왼쪽으로 원본 이미지가 뜬다. (0) | 2007.10.18 |
이미지 슬라이드 (0) | 2007.10.18 |
이미지 슬라이드 (0) | 2007.10.18 |
이미지 슬라이드 (0) | 2007.10.18 |
같은 글자 반복해서 나타내기 (0) | 2007.10.18 |
마우스 오버시 툴팁 - 풍선 도움말 (0) | 2007.10.18 |
E-mail :: 이메일 추출기에 걸리지 않게 E-mail 링크하기 2 (0) | 2007.10.18 |
테이블 순서 바꾸기 (0) | 2007.10.18 |
무단링크 방지 (0) | 2007.10.18 |