<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 |