'슬라이드'에 해당되는 글 6건

  1. 2008.02.02 슬라이드 메뉴
  2. 2008.02.02 이미지 슬라이드 (마우스오버시멈춤)
  3. 2008.02.02 이미지 슬라이드
  4. 2008.02.02 이미지 슬라이드
  5. 2008.02.02 이미지 슬라이드
  6. 2008.02.01 이미지 슬라이드

슬라이드 메뉴

인터넷관련 2008. 2. 2. 10:15
<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>

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

사업자등록번호, 주민등록번호 등 편리하게 붙혀넣기  (0) 2008.02.02
자식창에서 부모창으로 submit 하기  (0) 2008.02.02
숫자만 입력되었는지 체크하기  (0) 2008.02.02
인풋 박스 숫자 입력시 툴팁으로 표시  (0) 2008.02.02
테이블크기 늘리기,줄이기,초기값지정  (0) 2008.02.02
CSS 만으로 만든 롤오버 이미지  (0) 2008.02.02
이미지 안쓰고 모서리 둥근 테이블 만들기 2  (0) 2008.02.02
해상도에따른 브라우저 크기조절  (0) 2008.02.02
Posted by 알 수 없는 사용자
,

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

인터넷관련 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>
<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 알 수 없는 사용자
,

이미지 슬라이드

인터넷관련 2008. 2. 1. 09:40
http://oxtag.com/html/ex/ex/ex6.html

  1. <SCRIPT LANGUAGE="JavaScript">
  2. <!--
  3. delay=300        // 이미지가 바뀌는 시간 1000 = 1초, 이미지대신 스타일시트를 이용하면 무지 버벅이겠죠...ㅋ
  4. num = 1        // 파일 시작 번호.
  5. my_img = new Array()
  6. for(i=1;i<=8;i++) {
  7.     my_img[i] = new Image()
  8.     my_img[i].src = "http://oxtag.com/html/img/fish/fish_"+i+".gif"
  9. }
  11. function ani() {
  12.      ani_img.src = my_img[num].src
  13.      ani_loop = setTimeout('ani()',delay)
  14.          num = num + 1
  15.          if (num > 8) num = 1
  16. }
  18. function ani_stop() {
  19.     clearTimeout(ani_loop)
  20. }
  21. //-->
  22. </SCRIPT>
  23. </HEAD>
  24. <BODY>
  26. <!--
  27. 문서가 로드 되었을때 실행시킬경우
  28. <BODY onload=ani()>
  29. -->
  31. <center>
  32. <img src='http://oxtag.com/html/img/fish/fish_1.gif' name='ani_img' width=50 height=30>
  33. <p>
  34. <button style="border:1 solid #add8e6;background-color:white;" onClick="ani()" >animation start</button>
  35. <button style="border:1 solid #add8e6;background-color:white;" onClick="ani_stop()">animation stop</button>
  36. </center>

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

이미지 슬라이드  (0) 2008.02.01
쿠키 적용으로 체크하면 다음부터는 뜨지 않는 창  (0) 2008.02.01
이미지에 섬광 효과 주기  (0) 2008.02.01
자바스크립트와 테이터베이스 연동  (0) 2008.02.01
TextField의 Align - 텍스트 정렬 및 콤마 찍기  (0) 2008.02.01
텍스트 애니메이션  (0) 2008.02.01
웹페이지 대화상자 (부모창 위에 새창이 항상 최상위에 존재)  (0) 2008.02.01
다중 셀렉트(select) 박스 3  (0) 2008.02.01
Posted by 알 수 없는 사용자
,

티스토리툴바