http://oxtag.com/html/ex/popup3.html
<html>
<head>
<style type='text/css'>
body { font-family:돋움,돋움체; color: #d5d5d5; font-size: 10pt }
.drag{position:relative;cursor:hand;}
#scontentmain{position:absolute;width:200px;}
#scontentbar{cursor:move;position:absolute;background-color:#c8c8c8;height:15;width:100%;top:0;}
#scontentsub{position:absolute;width:100%;top:15;background-color:#696969;border:1px solid #c8c8c8;}
</style>
<script language="JavaScript">
var dragapproved=false
var zcor,xcor,ycor
function movescontentmain(){
if (event.button==1&&dragapproved){
zcor.style.pixelLeft=tempvar1+event.clientX-xcor
zcor.style.pixelTop=tempvar2+event.clientY-ycor
leftpos=document.all.scontentmain.style.pixelLeft-document.body.scrollLeft
toppos=document.all.scontentmain.style.pixelTop-document.body.scrollTop
return false
}
}
function dragscontentmain(){
if (!document.all)
return
if (event.srcElement.id=="scontentbar"){
dragapproved=true
zcor=scontentmain
tempvar1=zcor.style.pixelLeft
tempvar2=zcor.style.pixelTop
xcor=event.clientX
ycor=event.clientY
document.onmousemove=movescontentmain
}
}
document.onmousedown=dragscontentmain
document.onmouseup=new Function("dragapproved=false")
</script>
</head>
<body bgcolor="black" text="white" link="blue" vlink="purple" alink="red">
<div id="scontentmain">
<div id="scontentbar" ><font style="font-size:10pt;color:#696969" onClick="onoffdisplay()" style="cursor:hand;">『 여기도 클릭해보고 』</font></div>
<div id="scontentsub">
<table border=0 cellpadding="10" cellspacing="0" width="100%">
<tr>
<td>
<font style="font-size:9pt">안내창 상단을 드래그하고 <br>
아무곳에나 가져다 놓으시고 <br>
스크롤 바를 움직여 보세요 <br>
스크롤이 움직여도 <br>
안내창은 늘 그 자리에... <br>
</font>
</td>
</tr>
</table>
</div>
</div>
<script language="JavaScript">
var w=document.body.clientWidth-550
var h=350
w+=document.body.scrollLeft
h+=document.body.scrollTop
var leftpos=w
var toppos=h
scontentmain.style.left=w
scontentmain.style.top=h
function onoffdisplay(){
if (scontentsub.style.display=='')
scontentsub.style.display='none'
else
scontentsub.style.display=''
}
function staticize(){
w2=document.body.scrollLeft+leftpos
h2=document.body.scrollTop+toppos
scontentmain.style.left=w2
scontentmain.style.top=h2
}
window.onscroll=staticize
</script>
<script language="JavaScript">
function highlight(x){
document.forms[x].elements[0].focus()
document.forms[x].elements[0].select()
}
</script>
<p> 1</p>
<p> 2</p>
<p> 3</p>
<p> 4</p>
<p> 5</p>
<p> 6</p>
<p> 7</p>
<p> 8</p>
<p> 9</p>
<p> 0</p>
<p> 1</p>
<p> 2</p>
<p> 3</p>
<p> 4</p>
<p> 5</p>
<p> 6</p>
<p> 7</p>
<p> 8</p>
<p> 9</p>
<p> 0</p>
<p> 1</p>
<p> 2</p>
<p> 3</p>
<p> 4</p>
<p> 5</p>
<p> 6</p>
<p> 7</p>
<p> 8</p>
<p> 9</p>
<p> 0</p>
<p> 1</p>
<p> 2</p>
<p> 3</p>
<p> 4</p>
<p> 5</p>
<p> 6</p>
<p> 7</p>
<p> 8</p>
<p> 9</p>
<p> 0</p>
<p> 1</p>
<p> 2</p>
<p> 3</p>
<p> 4</p>
<p> 5</p>
<p> 6</p>
<p> 7</p>
<p> 8</p>
<p> 9</p>
<p> 0</p>
<p> 1</p>
<p> 2</p>
<p> 3</p>
<p> 4</p>
<p> 5</p>
<p> 6</p>
<p> 7</p>
<p> 8</p>
<p> 9</p>
<p> 0</p>
</body>
</html>
'인터넷정보' 카테고리의 다른 글
| 마우스 오버시 그림이 무자게 떨려요... (0) | 2007.10.17 |
|---|---|
| 랜덤으로 이미지 전환하기 (0) | 2007.10.17 |
| 랜덤으로 이미지 전환하기 (0) | 2007.10.17 |
| 이미지가 안개처럼 나타납니다. / 지정된 곳으로 이동 (0) | 2007.10.17 |
| 이미지가 안개처럼 나타납니다. / 지정된 곳으로 이동 (0) | 2007.10.17 |
| 공지창(마우스로 위치 조절/스크롤바 따라다님) (0) | 2007.10.17 |
| 새 창 점점 커지면서 띄우기 (0) | 2007.10.17 |
| 새 창 점점 커지면서 띄우기 (0) | 2007.10.17 |
| 팝업 창 (마우스로 위치조절) (0) | 2007.10.17 |
| 팝업 창 (마우스로 위치조절) (0) | 2007.10.17 |