'이미지 슬라이드'에 해당되는 글 3건

  1. 2008.02.02 이미지 슬라이드
  2. 2008.02.02 이미지 슬라이드
  3. 2008.02.02 이미지 슬라이드

이미지 슬라이드

인터넷관련 2008. 2. 2. 09:35
<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 미만의 소수도 가능)

'인터넷관련' 카테고리의 다른 글

html문서 없이 이미지 새창띄우기  (0) 2008.02.02
접속 할 때마다 램덤으로 다른 이미지 띄우기  (0) 2008.02.02
이미지 갤러리 만들기 <2>  (0) 2008.02.02
이미지 갤러리 만들기 <1> - 작은 그림을 클릭해보면 왼쪽으로 원본 이미지가 뜬다.  (0) 2008.02.02
이미지 슬라이드  (0) 2008.02.02
이미지 슬라이드  (0) 2008.02.02
은은하게 변하는 롤오버 이미지  (0) 2008.02.02
같은 글자 반복해서 나타내기  (0) 2008.02.01
Posted by 알 수 없는 사용자
,

이미지 슬라이드

인터넷관련 2008. 2. 2. 09:35
<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 범위에서 출발하여 모이게 된다.

'인터넷관련' 카테고리의 다른 글

접속 할 때마다 램덤으로 다른 이미지 띄우기  (0) 2008.02.02
이미지 갤러리 만들기 <2>  (0) 2008.02.02
이미지 갤러리 만들기 <1> - 작은 그림을 클릭해보면 왼쪽으로 원본 이미지가 뜬다.  (0) 2008.02.02
이미지 슬라이드  (0) 2008.02.02
이미지 슬라이드  (0) 2008.02.02
은은하게 변하는 롤오버 이미지  (0) 2008.02.02
같은 글자 반복해서 나타내기  (0) 2008.02.01
마우스 오버시 툴팁 - 풍선 도움말  (0) 2008.02.01
Posted by 알 수 없는 사용자
,

이미지 슬라이드

인터넷관련 2008. 2. 2. 09:35
<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">
가장 먼저 보여질 그림의 경로

'인터넷관련' 카테고리의 다른 글

이미지 갤러리 만들기 <2>  (0) 2008.02.02
이미지 갤러리 만들기 <1> - 작은 그림을 클릭해보면 왼쪽으로 원본 이미지가 뜬다.  (0) 2008.02.02
이미지 슬라이드  (0) 2008.02.02
이미지 슬라이드  (0) 2008.02.02
은은하게 변하는 롤오버 이미지  (0) 2008.02.02
같은 글자 반복해서 나타내기  (0) 2008.02.01
마우스 오버시 툴팁 - 풍선 도움말  (0) 2008.02.01
E-mail :: 이메일 추출기에 걸리지 않게 E-mail 링크하기 2  (0) 2008.02.01
Posted by 알 수 없는 사용자
,

티스토리툴바