<html>
<head>
<title>태그로 마스크효과</title><STYLE>
</head>
<body bgcolor="#FFFFFF" text="#000000" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<script language="JavaScript">
<!--
var picurl="http://lia.pe.kr/zb41pl2/bbs/data/images/2_13_38.jpg"
// 바탕에 놓여있는 이미지파일명을 지정합니다.
var picposition_x=0
var picposition_y=0
// 바탕 이미지의 위치를 지정합니다.
var peepholesize=150
// 마스크효과를 낼 원의 크기를 지정합니다.
// 요기까지만 수정해서 사용하심됩니다.
var x,y
var marginbottom
var marginleft
var margintop
var marginright
var cliptop
var clipbottom
var clipleft
var clipright
var clippoints
var imageheight
var imagewidth
var tempo=25
var stepx=12
var stepy=6
var timer
function setValues() {
if (document.all) {
var thisspan=eval("document.all.piccontent")
imagewidth=thisspan.offsetWidth
imageheight=thisspan.offsetHeight
margintop=picposition_y
marginleft=picposition_x
marginbottom=imageheight-peepholesize+picposition_y
marginright=imagewidth-peepholesize+picposition_x
document.all.ball.style.posLeft=randommaker(imagewidth)
document.all.ball.style.posTop=picposition_y
document.all.piccontent.style.posLeft=picposition_x
document.all.piccontent.style.posTop=picposition_y
moveball()
}
if (document.layers) {
var thisspan=eval("document.piccontent.document")
imagewidth=thisspan.width
imageheight=thisspan.height
margintop=picposition_y
marginleft=picposition_x
marginbottom=imageheight-peepholesize+picposition_y
marginright=imagewidth-peepholesize+picposition_x
document.ball.left=randommaker(imagewidth)
document.ball.top=picposition_y
document.piccontent.left=picposition_x
document.piccontent.top=picposition_y
moveball()
}
}
function randommaker(range) {
rand=Math.floor(range*Math.random())
return rand
}
function moveball() {
checkposition()
if (document.all) {
document.all.ball.style.posLeft+=stepx
document.all.ball.style.posTop+=stepy
cliptop=document.all.ball.style.posTop-picposition_y
clipbottom=cliptop+peepholesize
clipleft=document.all.ball.style.posLeft-picposition_x
clipright=clipleft+peepholesize
clippoints="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")"
document.all.piccontent.style.clip=clippoints
timer=setTimeout("moveball()",tempo)
}
if (document.layers) {
document.ball.left+=stepx
document.ball.top+=stepy
cliptop=document.ball.top-picposition_y
clipbottom=cliptop+peepholesize
clipleft=document.ball.left-picposition_x
clipright=clipleft+peepholesize
document.piccontent.clip.left=clipleft
document.piccontent.clip.right=clipright
document.piccontent.clip.top=cliptop
document.piccontent.clip.bottom=clipbottom
timer=setTimeout("moveball()",tempo)
}
}
function checkposition() {
if (document.all) {
if (document.all.ball.style.posLeft>=marginright) {
stepx=stepx*-1
document.all.ball.style.posLeft-=10
}
if (document.all.ball.style.posLeft<=marginleft) {
stepx=stepx*-1
document.all.ball.style.posLeft+=10
}
if (document.all.ball.style.posTop>=marginbottom) {
stepy=stepy*-1
document.all.ball.style.posTop-=10
}
if (document.all.ball.style.posTop<=margintop) {
stepy=stepy*-1
document.all.ball.style.posTop+=10
}
}
if (document.layers) {
if (document.ball.left>=marginright) {
stepx=stepx*-1
document.ball.left-=10
}
if (document.ball.left<=marginleft) {
stepx=stepx*-1
document.ball.left+=10
}
if (document.ball.top>=marginbottom) {
stepy=stepy*-1
document.ball.top-=10
}
if (document.ball.top<=margintop) {
stepy=stepy*-1
document.ball.top+=10
}
}
}
if (document.all) {
document.write("<DIV id='piccontent' style='position: absolute; top:-5000px; left:-5000px'><img src='"+picurl+"' border=0></DIV>")
if (navigator.appVersion.indexOf("Mac") > 0) {
document.write("<DIV id='ball' style='position:absolute; top:-50px; width:"+peepholesize+"px;height:"+peepholesize+"px'></DIV>")
}
else {
document.write("<DIV id='ball' style='position:absolute; top:-50px; width:"+peepholesize+"px;height:"+peepholesize+"px;background-color:white;filter:alpha(opacity=0,finishopacity=100,style=2,startX=0px,startY=0px,finishX="+peepholesize+"px,finishY="+peepholesize+"px)'></DIV>")
}
}
else if (document.layers) {
document.write("<layer name='piccontent' top=-5000 left=-5000><img src='"+picurl+"' border=0></layer>")
document.write("<layer name='ball' top=-500 width="+peepholesize+" height="+peepholesize+"></layer>")
document.close()
}
else {
document.write("<DIV id='piccontent' style='position:absolute; top:"+picposition_y+"px;left:"+picposition_x+"px'><img src='"+picurl+"' border=0></DIV>")
document.close()
}
if (document.all || document.layers) {
window.onload=setValues
}
// --->
</script>
</body>
</html>
'Html & Css' 카테고리의 다른 글
| 전체화면 투명하게..... (0) | 2016.06.02 |
|---|---|
| 아이프레임밖에서 아이프레임안으로 링크 (0) | 2016.06.02 |
| 링크시 아래위로 줄생기게 (0) | 2016.05.31 |
| 링크시, 마우스오버때 박스생기게하기 (0) | 2016.05.31 |
| 버튼색바꾸기 (0) | 2016.05.31 |