http://oxtag.com/html/ex/ex/ex8.html
- <html>
- <head>
- <title>이미지에 섬광 효과 주기</title>
- <style><!--
- #spotlight {filter:light}
- --></style>
- <meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
- </head>
- <body>
- <p align="center"><font color="red" size="2"><b>이미지에 섬광 효과 주기</b></font><P><span
- style="font-size:9pt;"><IMG height=30 src="http://oxtag.com/html/img/banner/jjin_tagpia.gif" width=90> 스크립트 적용 전</span></P>
- <P><span style="font-size:9pt;"><IMG id=spotlight height=30 src="http://oxtag.com/html/img/banner/jjin_tagpia.gif" width=90 speed="50"> 스크립트 적용
- 후</span></P>
- <P><span style="font-size:9pt;">마치 어두운 밤에 여기저기 손전등을 비추는 듯, 평범한 이미지에 섬광효과를 줍니다.</span></P>
- <p class="tip-dot-line-table"><span style="font-size:9pt;"> </span></p>
- <P><span style="font-size:9pt;"><head>와 </head> 아래 소스를 넣어 줍니다.</span></P>
- <P><span style="font-size:9pt;"> </span></P>
- <P><FONT class=tip-tag-font color="blue"><span style="font-size:9pt;"><style><!--</span></FONT></P>
- <P><FONT class=tip-tag-font color="blue"><span style="font-size:9pt;">#spotlight {filter:light}</span></FONT></P>
- <P><FONT class=tip-tag-font color="blue"><span style="font-size:9pt;">--></style></span></FONT></P>
- <p class="tip-dot-line-table"><span style="font-size:9pt;"> </span></p>
- <P><span style="font-size:9pt;"><body>와 </body> 사이에 아래와 같은 식으로 이미지 태그 안에 <b>id="spotlight"
- speed="50"</b> 를 추가합니다.</span></P>
- <P><FONT class=tip-tag-font color="blue"><span style="font-size:9pt;"><img<B> id=</B>"<B>spotlight</B>"<B>
- speed=</B>"<B>50</B>" src="</FONT><font color="blue">http://oxtag.com/html/img/banner/jjin_tagpia.gif</font><FONT class=tip-tag-font color="blue">"></span></FONT></P>
- <P><span style="font-size:9pt;">50 은 속도. 큰 수일수록 속도 느림</span></P>
- <p class="tip-dot-line-table"><span style="font-size:9pt;"> </span></p>
- <P><B><span style="font-size:9pt;"></body> 바로 앞</B>에 아래 소스를 넣어 줍니다.</span></P>
- <P><FONT class=tip-tag-font color="blue"><span style="font-size:9pt;"><script language="JavaScript1.2"></span></FONT></P>
- <P><FONT class=tip-tag-font color="blue"><span style="font-size:9pt;">/*<BR>Moving light on image script<BR>?Dynamic Drive
- (www.dynamicdrive.com)<BR>For full source code, installation
- instructions,<BR>100's more DHTML scripts, and Terms Of<BR>Use, visit
- dynamicdrive.com<BR>*/
</span></FONT></P> - <P><FONT class=tip-tag-font color="blue"><span style="font-size:9pt;"><BR>if
- (document.all&&window.spotlight){<BR>var x=new Array()<BR>var
- direction=new Array()<BR>var y=new Array()<BR>if
- (spotlight.length==null){<BR>spotlight[0]=document.all.spotlight<BR>x[0]=0<BR>direction[0]="right"<BR>y[0]=spotlight[0].height<BR>spotlight[0].filters.light.addPoint(100,50,100,255,255,255,90)<BR>}<BR>else<BR>for
- (i=0;i<spotlight.length;i++){<BR>x[i]=0<BR>direction[i]="right"<BR>y[i]=spotlight[i].height<BR>spotlight[i].filters.light.addPoint(100,50,100,255,255,255,90)<BR>}<BR>}</span></FONT></P>
- <P><FONT class=tip-tag-font color="blue"><span style="font-size:9pt;">function
- slidelight(cur){<BR>spotlight[cur].filters.light.MoveLight(0,x[cur],y[cur],200,-1)</span></FONT></P>
- <P><FONT class=tip-tag-font color="blue"><span style="font-size:9pt;">if
- (x[cur]<spotlight[cur].width+200&&direction[cur]=="right")<BR>x[cur]+=10<BR>else
- if
- (x[cur]>spotlight[cur].width+200){<BR>direction[cur]="left"<BR>x[cur]-=10<BR>}<BR>else
- if
- (x[cur]>-200&&x[cur]<-185){<BR>direction[cur]="right"<BR>x[cur]+=10<BR>}<BR>else{<BR>x[cur]-=10<BR>direction[cur]="left"<BR>}<BR>}</span></FONT></P>
- <P><FONT class=tip-tag-font color="blue"><span style="font-size:9pt;">if (document.all&&window.spotlight){<BR>if
- (spotlight.length==null)<BR>setInterval("slidelight(0)",spotlight[0].speed)<BR>else<BR>for
- (t=0;t<spotlight.length;t++){<BR>var
- temp='setInterval("slidelight('+t+')",'+spotlight[t].speed+')'<BR>eval(temp)<BR>}<BR>}<BR></script></span></FONT></P>
- <p><FONT class=tip-tag-font color="blue"><span style="font-size:9pt;"> </span></FONT></p>
- <p><FONT class=tip-tag-font color="blue"><span style="font-size:9pt;"> </span></FONT></p>
- <script language="JavaScript1.2">
- /*
- Moving light on image script
- ?Dynamic Drive (www.dynamicdrive.com)
- For full source code, installation instructions,
- 100's more DHTML scripts, and Terms Of
- Use, visit dynamicdrive.com
- */
- if (document.all&&window.spotlight){
- var x=new Array()
- var direction=new Array()
- var y=new Array()
- if (spotlight.length==null){
- spotlight[0]=document.all.spotlight
- x[0]=0
- direction[0]="right"
- y[0]=spotlight[0].height
- spotlight[0].filters.light.addPoint(100,50,100,255,255,255,90)
- }
- else
- for (i=0;i<spotlight.length;i++){
- x[i]=0
- direction[i]="right"
- y[i]=spotlight[i].height
- spotlight[i].filters.light.addPoint(100,50,100,255,255,255,90)
- }
- }
- function slidelight(cur){
- spotlight[cur].filters.light.MoveLight(0,x[cur],y[cur],200,-1)
- if (x[cur]<spotlight[cur].width+200&&direction[cur]=="right")
- x[cur]+=10
- else if (x[cur]>spotlight[cur].width+200){
- direction[cur]="left"
- x[cur]-=10
- }
- else if (x[cur]>-200&&x[cur]<-185){
- direction[cur]="right"
- x[cur]+=10
- }
- else{
- x[cur]-=10
- direction[cur]="left"
- }
- }
- if (document.all&&window.spotlight){
- if (spotlight.length==null)
- setInterval("slidelight(0)",spotlight[0].speed)
- else
- for (t=0;t<spotlight.length;t++){
- var temp='setInterval("slidelight('+t+')",'+spotlight[t].speed+')'
- eval(temp)
- }
- }
- </script>
- </body>
- </html>
'인터넷관련' 카테고리의 다른 글
셀렉트 박스 새창과 현재창을 라이오 버튼으로 제어 (0) | 2008.02.01 |
---|---|
셀렉트를 이용해서 이미지 선택 나타내기 (0) | 2008.02.01 |
이미지 슬라이드 (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 |