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

  1. 2008.02.02 이미지 슬라이드 (마우스오버시멈춤)
  2. 2008.02.02 이미지 슬라이드
  3. 2008.02.02 이미지 슬라이드

이미지 슬라이드 (마우스오버시멈춤)

인터넷관련 2008. 2. 2. 09:36

- 이미지 슬라이드(마우스오버시멈춤) -
소스  
<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>

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

이미지 섬광 효과  (0) 2008.02.02
흐려졌다 선명해졌다를 반복하는 이미지  (0) 2008.02.02
이미지 체인징  (0) 2008.02.02
깜박이는 이미지나 텍스트 - 블링크 (blink)  (0) 2008.02.02
이미지에 트랜지션(트렌제이션) 효과주기  (0) 2008.02.02
html문서 없이 이미지 새창띄우기  (0) 2008.02.02
접속 할 때마다 램덤으로 다른 이미지 띄우기  (0) 2008.02.02
이미지 갤러리 만들기 <2>  (0) 2008.02.02
Posted by 알 수 없는 사용자
,

이미지 슬라이드

인터넷관련 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>

<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 알 수 없는 사용자
,

티스토리툴바