<HTML> <HEAD> <TITLE>슬라이딩 메뉴(출처-mygony.com)</TITLE> <style> BODY { font-size:9pt; } .menu { border:1px solid #CCCCCC; background-color:#DEDEDE; padding:3px 1px 1px 5px; width:150px; cursor:pointer; } .submenu { width:150px; padding-left:10px; display:none; cursor:pointer; } </style> <SCRIPT LANGUAGE="JavaScript"> <!-- function slide(Id, interval, to) { var obj = document.getElementById(Id); var H, step = 5; if (obj == null) return; if (to == undefined) { // user clicking if (obj._slideStart == true) return; if (obj._expand == true) { to = 0; obj.style.overflow = "hidden"; } else { slide.addId(Id); for(var i=0; i < slide.objects.length; i++) { if (slide.objects[i].id != Id && slide.objects[i]._expand == true) { slide(slide.objects[i].id); } } obj.style.height = ""; obj.style.overflow = ""; obj.style.display = "block"; to = obj.offsetHeight; obj.style.overflow = "hidden"; obj.style.height = "1px"; } obj._slideStart = true; } step = ((to > 0) ? 1:-1) * step; interval = ((interval==undefined)?1:interval); obj.style.height = (H=((H=(isNaN(H=parseInt(obj.style.height))?0:H))+step<0)?0:H+step)+"px"; if (H <= 0) { obj.style.display = "none"; obj.style.overflow = "hidden"; obj._expand = false; obj._slideStart = false; } else if (to > 0 && H >= to) { obj.style.display = "block"; obj.style.overflow = "visible"; obj.style.height = H + "px"; obj._expand = true; obj._slideStart = false; } else { setTimeout("slide('"+Id+"' , "+interval+", "+to+");", interval); } } slide.objects = new Array(); slide.addId = function(Id) { for (var i=0; i < slide.objects.length; i++) { if (slide.objects[i].id == Id) return true; } slide.objects[slide.objects.length] = document.getElementById(Id); } //--> </SCRIPT> </HEAD> <BODY> <div class="menu" onClick="slide('sub1');">Tree1</div> <div id="sub1" class="submenu"> <div> + SubTree1-1</div> <div> + SubTree1-2</div> <div> + SubTree1-3</div> <div> + SubTree1-4</div> <div> + SubTree1-5</div> </div> <div class="menu" onClick="slide('sub2');">Tree2</div> <div id="sub2" class="submenu"> <div> + SubTree2-1</div> <div> + SubTree2-2</div> <div> + SubTree2-3</div> <div> + SubTree2-4</div> </div> <div class="menu" onClick="slide('sub3');">Tree3</div> <div id="sub3" class="submenu"> <div> + SubTree3-1</div> <div> + SubTree3-2</div> <div> + SubTree3-3</div> </div> <div class="menu">이건 다른 메뉴</div> </BODY> </HTML> |
'인터넷정보' 카테고리의 다른 글
창에서의 F11, F5, Ctrl 비활성화 스크립트 (0) | 2007.10.18 |
---|---|
테이블크기 늘리기,줄이기,초기값지정 (0) | 2007.10.18 |
인풋 박스 숫자 입력시 툴팁으로 표시 (0) | 2007.10.18 |
숫자만 입력되었는지 체크하기 (0) | 2007.10.18 |
이미지 안쓰고 모서리 둥근 테이블 만들기 2 (0) | 2007.10.18 |
CSS 만으로 만든 롤오버 이미지 (0) | 2007.10.18 |
웹페이지에 삽입된 동영상 및 음악 제어 (0) | 2007.10.18 |
토글 메뉴 (0) | 2007.10.18 |
PNG 그림파일 알파값 살리기 (0) | 2007.10.18 |
텍스트 밑줄 긋기 (0) | 2007.10.18 |
<html> <head> <style type="text/css"> <!-- .spanstyle {position:absolute;left:-5000px} --> </style> <script language="JavaScript"> <!-- var imgwidth=242 var imgheight=297 var imgurl=new Array() imgurl[0]="img/img1.gif" imgurl[1]="img/img2.gif" imgurl[2]="img/img3.gif" imgurl[3]="img/img4.gif" var imgpreload=new Array() for (i=0;i<=imgurl.length-1;i++) { imgpreload[i]=new Image() imgpreload[i].src=imgurl[i] } var x_finalpos=250 var y_finalpos=50 var x_slices=7 var y_slices=10 var pause=1 var screenwidth=100 var screenheight=100 var x_step=new Array() var y_step=new Array() var x_randompos=0 var y_randompos=0 var i_loop=0 var max_loop=20 var i_image=0 var width_slice=Math.floor(imgwidth/x_slices) var height_slice=Math.floor(imgheight/y_slices) var cliptop=0 var clipbottom=height_slice var clipleft=0 var clipright=width_slice var spancounter=0 function initiate() { cliptop=0 clipbottom=height_slice clipleft=0 clipright=width_slice i_loop=0 spancounter=0 if (document.all) { for (i=0;i<=y_slices-1;i++) { for (ii=0;ii<=x_slices-1;ii++) { var thisspan=eval("document.all.span"+spancounter+".style") x_randompos=Math.ceil(screenwidth*Math.random()) y_randompos=Math.ceil(screenheight*Math.random()) thisspan.posLeft=x_randompos thisspan.posTop=y_randompos thisspan.clip ="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")" clipleft+=width_slice clipright+=width_slice spancounter++ } clipleft=0 clipright=width_slice cliptop+=height_slice clipbottom+=height_slice } } explode_IE() } function changeimage() { spancounter=0 for (i=0;i<=y_slices-1;i++) { for (ii=0;ii<=x_slices-1;ii++) { var thisspan=eval("document.all.span"+spancounter+".style") thisspan.posLeft=-5000 thisspan.posTop=-5000 spancounter++ } } spancounter=0 if (i_image>imgurl.length-1) {i_image=0} for (i=0;i<=y_slices-1;i++) { for (ii=0;ii<=x_slices-1;ii++) { var thisinnerspan=eval("span"+spancounter) thisinnerspan.innerHTML="<img src='"+imgurl[i_image]+"'>" spancounter++ } } i_image++ initiate() } function explode_IE() { spancounter=0 if (i_loop<=max_loop-1) { for (i=0;i<=y_slices-1;i++) { for (ii=0;ii<=x_slices-1;ii++) { var thisspan=eval("document.all.span"+spancounter+".style") x_step[spancounter]=(x_finalpos-thisspan.posLeft)/(max_loop-i_loop) y_step[spancounter]=(y_finalpos-thisspan.posTop)/(max_loop-i_loop) thisspan.posLeft+=x_step[spancounter] thisspan.posTop+=y_step[spancounter] spancounter++ } } i_loop++ var timer=setTimeout("explode_IE()",pause) } else { spancounter=0 clearTimeout(timer) var timer=setTimeout("changeimage()",2000) } } //--> </script> </head> <body onLoad="changeimage();"> <script language="JavaScript"> <!-- if (document.all) { for (i=0;i<=y_slices-1;i++) { for (ii=0;ii<=x_slices-1;ii++) { document.write("<span id='span"+spancounter+"' class='spanstyle'></span>") spancounter++ } } spancounter=0 } //--> </script> </body></html> - 설명 - 위의 소스보기에서 처럼 빨간색으로 된 부분을 넣고 초록색으로 된 부분을 수정한다. var imgwidth=242 var imgheight=297 이미지의 가로 크가와 세로 크기이다 imgurl[0]="img/img1.gif" imgurl[1]="img/img2.gif" imgurl[2]="img/img3.gif" imgurl[3]="img/img4.gif" 이미지 주소 여러장을 쓸려면 번호를 늘려가며 계속 추가해준다 var x_finalpos=250 var y_finalpos=50 그림이 보여질 곳의 X좌표, Y좌표 그림이 보여질 위치를 지정해 주는거다 var x_slices=7 var y_slices=10 그림이 잘려질 개수 여기서는 가로로 7개 세로로 10개가 잘려졌다 var pause=1 그림이 모이는 속도 숫자가 커질수록 느려진다 var screenwidth=100 var screenheight=100 그림이 모이는 소스가 적용되는 범위 조각난 그림이 여기서는 가로 100 세로 100 범위에서 출발하여 모이게 된다. |
'인터넷정보' 카테고리의 다른 글
깜박이는 이미지나 텍스트 - 블링크 (blink) (0) | 2007.10.18 |
---|---|
접속 할 때마다 램덤으로 다른 이미지 띄우기 (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 |
<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 |
http://oxtag.com/html/ex/ex/ex6.html
- <SCRIPT LANGUAGE="JavaScript">
- <!--
- delay=300 // 이미지가 바뀌는 시간 1000 = 1초, 이미지대신 스타일시트를 이용하면 무지 버벅이겠죠...ㅋ
- num = 1 // 파일 시작 번호.
- my_img = new Array()
- for(i=1;i<=8;i++) {
- my_img[i] = new Image()
- my_img[i].src = "http://oxtag.com/html/img/fish/fish_"+i+".gif"
- }
- function ani() {
- ani_img.src = my_img[num].src
- ani_loop = setTimeout('ani()',delay)
- num = num + 1
- if (num > 8) num = 1
- }
- function ani_stop() {
- clearTimeout(ani_loop)
- }
- //-->
- </SCRIPT>
- </HEAD>
- <BODY>
- <!--
- 문서가 로드 되었을때 실행시킬경우
- <BODY onload=ani()>
- -->
- <center>
- <img src='http://oxtag.com/html/img/fish/fish_1.gif' name='ani_img' width=50 height=30>
- <p>
- <button style="border:1 solid #add8e6;background-color:white;" onClick="ani()" >animation start</button>
- <button style="border:1 solid #add8e6;background-color:white;" onClick="ani_stop()">animation stop</button>
- </center>
'인터넷정보' 카테고리의 다른 글
TextField의 Align - 텍스트 정렬 및 콤마 찍기 (0) | 2007.10.18 |
---|---|
텍스트 애니메이션 (0) | 2007.10.18 |
웹페이지 대화상자 (부모창 위에 새창이 항상 최상위에 존재) (0) | 2007.10.18 |
input 또는 폼안의 포커스 이동 및 글자 길이 제한 (0) | 2007.10.18 |
다중 셀렉트(select) 박스 3 (0) | 2007.10.18 |
체크박스 전체선택 / 전체해제 (0) | 2007.10.18 |
매월 마지막 날자 구하기 (0) | 2007.10.18 |
마우스 좌표값 (0) | 2007.10.18 |
문서길이를 자동으로 맞추는 아이프레임 리사이즈 소스 6가지 (0) | 2007.10.18 |
다중 셀렉트(select) 박스 2 (0) | 2007.10.18 |