아래 스크립트는 검은색 바탕화면에 동그란 후레쉬 영역이 마우스를 따라 움직이며 페이지의 내용을 보여줍니다. 그러다가 마우스를 클릭하면 지정된 페이지로 옮겨갑니다. 중요한 것은 후레쉬 영역으로 사용할 이미지를 지정해야 한다는 것입니다. 아래 BODY 부분에서 'a.gif' 라는 화일이 그 이미지입니다. 여기서 사용된 이미지는 임의의 사각형 영역에 동그란 원이 그려져 있으며, 원 안은 투명이고 테두리는 검은색입니다.
기타 페이지의 내용은 여러분이 알아서 넣으셔야 합니다. 인트로로 사용하여도 좋습니다.
다음을 <HEAD></HEAD> 사이에 넣습니다.
<style>
TD{font-family:arial,helvetica; font-size:10pt}
BODY{background-color:black}
A{color:Navy; text-decoration:none}
A:hover{color:red}
A:visited:{color:#808080}
#divExCont{position:absolute; left:-1; top:-1; clip:rect(0,0,0,0);
layer-background-color:white; background-color:white}
#divCircle{position:absolute; z-index:500; visibility:hidden; width:200}
</style>
<script>
<!--
/********************************************************************************
This script is made by and copyrighted to Thomas Brattli at www.bratta.com
Visit www.bratta.com/dhtml for more great scripts. This may be used freely as
long as this msg is intact! I'd appriciate any links to my page.
********************************************************************************/
//Easy browsercheck.
var n = (document.layers) ? 1:0;
var ie = (document.all) ? 1:0;
/******************************************************************************
Making the clipobject part
******************************************************************************/
function makeObj(obj,nest,x,y){
nest=(!nest) ? '':'document.'+nest+'.'
this.css=(n) ? eval(nest+'document.'+obj):eval('document.all.'+obj+'.style') this.clipIt=b_clipIt; this.clip=b_clip;
this.clipTo=b_clipTo;
this.obj = obj + "Object"; eval(this.obj + "=this")
return this
}
//clip part
function b_clipTo(t,r,b,l){
if(n){this.css.clip.top=t;this.css.clip.right=r;this.css.clip.bottom=b;
this.css.clip.left=l }else{
this.css.clip="rect("+t+","+r+","+b+","+l+")";
}
}
function b_clipIt(tstop,rstop,bstop,lstop,step,fn){
if(!fn) fn=null
var clipval=new Array()
if(ie) {
clipval=this.css.clip
clipval=clipval.slice(5,clipval.length-1);
clipval=clipval.split(' ')
for(var i=0;i<4;i++){clipval[i]=parseInt(clipval[i])}
}else{
clipval[0]=this.css.clip.top
clipval[1]=this.css.clip.right
clipval[2]=this.css.clip.bottom
clipval[3]=this.css.clip.left
}
totantstep=Math.max(Math.max(Math.abs((tstop-clipval[0])/step),
Math.abs((rstop-clipval[1])/step)), Math.max(Math.abs((
bstop-clipval[2])/step),Math.abs((lstop-clipval[3])/step)))
if(!this.clipactive)
this.clip(clipval[0],clipval[1],clipval[2],clipval[3],
(tstop-clipval[0])/totantstep, (rstop-clipval[1])/totantstep,
(bstop-clipval[2])/totantstep, (lstop-clipval[3])/totantstep,
totantstep,0, fn)
}
function b_clip(tcurr,rcurr,bcurr,lcurr,tperstep,rperstep,bperstep,
lperstep,totantstep,antstep, fn){
tcurr=tcurr+tperstep; rcurr=rcurr+rperstep
bcurr=bcurr+bperstep; lcurr=lcurr+lperstep
this.clipTo(tcurr,rcurr,bcurr,lcurr)
if(antstep<totantstep){
this.clipactive=true
antstep++
setTimeout(this.obj+".clip("+tcurr+","+rcurr+","+bcurr+",
"+lcurr+","+tperstep+"," +rperstep+","+bperstep+","+lperstep+",
"+totantstep+","+antstep+",'"+fn+"')",50)
}else{
this.clipactive=false
eval(fn)
}
}
/******************************************************************************
Initiating the page and the clip objects.
******************************************************************************/
function spotInit(){
pageWidth=(n)?innerWidth:document.body.offsetWidth;
pageHeight=(n)?innerHeight:document.body.offsetHeight;
oExCont=new makeObj('divExCont')
oExCont.clipTo(0,0,0,0)
if(ie){oExCont.css.width=pageWidth+10;oExCont.css.height=pageHeight+10}
oCircle=new makeObj('divCircle','divExCont')
oCircle.css.visibility="visible"
if(n)document.captureEvents(Event.MOUSEMOVE)
document.onmousemove=moveCircle;
}
function moveCircle(e){
x=(n)?e.pageX:event.x;y=(n)?e.pageY:event.y
oExCont.clipTo(y-100,x+100,y+100,x-100)
oCircle.css.left=x-100;oCircle.css.top=y-100
}
//This is being called when someone clicks the circle.
function showCont(){
document.onmousemove=null
oCircle.css.visibility="hidden"
oExCont.clipIt(-20,pageWidth+20,pageHeight+20,-20,20)
}
onload=spotInit;
//-->
</script>
다음을 <BODY></BODY> 사이에 넣습니다.
<div id="divExCont">
<div id="divCircle">
<a href="http://wizz.kr.net/" onclick="showCont(); if(ie)this.blur()"><img src="a.gif" tppabs="a.gif" width=200 height=200 border="0"></a> <!--'a.gif'라는 화일을 여러분이 원하는 크기의 원으로 정해 설정하십시오.-->
</div> <!--주소 영역은 마우스 클릭시 옮겨갈 페이지의 주소입니다.-->
<div id="Layer1" style="position:absolute; width:72px; height:115px; z-index:1; left:81px; top: 154px"> <img src="com.jpg" width="169" height="171"></div>
<p><br><br><br><br>
<kbd>마치 후레쉬로 화면을 비추는듯 하지 않습니까?<br><br>
왼쪽에 그림도 있습니다.<br><br>
마우스를 누르면, 짜근커뮤니티로 날아가기...
<!--이 내용들은 여러분이 임의로 원하는 페이지 내용을 작성하십시오.-->
</kbd>
</div>
'Tech: > HTML·DHTML' 카테고리의 다른 글
| 테이블, 입력상자의 Border Style들 (0) | 2008.06.26 |
|---|---|
| 입력한 Text의 byte수 체크 (0) | 2008.06.26 |
| 페이지 내용안의 이미지 바꾸기 (0) | 2008.06.26 |
| 튀어나오는 애니메이션 효과 글자 (0) | 2008.06.26 |
| 페이지가 커튼처럼 열린다! (0) | 2008.06.26 |
