우선 메모장을 열고 아래소스를 복사 후 Layer.js 이름으로 저장합니다.
isIE=document.all;
isNN=!document.all&&document.getElementById;
isN4=document.layers;
isHot=false;
function ddInit(e){
topDog=isIE ? "BODY" : "HTML";
whichDog=isIE ? document.all.divpop : document.getElementById("divpop");
hotDog=isIE ? event.srcElement : e.target;
while (hotDog.id!="titleBar"&&hotDog.tagName!=topDog){
hotDog=isIE ? hotDog.parentElement : hotDog.parentNode;
}
if (hotDog.id=="titleBar"){
offsetx=isIE ? event.clientX : e.clientX;
offsety=isIE ? event.clientY : e.clientY;
nowX=parseInt(whichDog.style.left);
nowY=parseInt(whichDog.style.top);
ddEnabled=true;
document.onmousemove=dd;
}
}
function dd(e){
if (!ddEnabled) return;
whichDog.style.left=isIE ? nowX+event.clientX-offsetx : nowX+e.clientX-offsetx;
whichDog.style.top=isIE ? nowY+event.clientY-offsety : nowY+e.clientY-offsety;
return false;
}
function ddN4(whatDog){
if (!isN4) return;
N4=eval(whatDog);
N4.captureEvents(Event.MOUSEDOWNEvent.MOUSEUP);
N4.onmousedown=function(e){
N4.captureEvents(Event.MOUSEMOVE);
N4x=e.x;
N4y=e.y;
}
N4.onmousemove=function(e){
if (isHot){
N4.moveBy(e.x-N4x,e.y-N4y);
return false;
}
}
N4.onmouseup=function(){
N4.releaseEvents(Event.MOUSEMOVE);
}
}
function hideMe(){
if (isIEisNN) whichDog.style.visibility="hidden";
else if (isN4) document.divpop.visibility="hide";
}
function showMe(){
if (isIEisNN) whichDog.style.visibility="visible";
else if (isN4) document.divpop.visibility="show";
}
document.onmousedown=ddInit;
document.onmouseup=Function("ddEnabled=false");
function ViewLayer(){
document.getElementById("divpop").style.display='inline'
}
function close_Layer(){
document.getElementById("divpop").style.display='none'
}
저장한 뒤..
계정에 업로드 하고..
불러옵니다. 해드사이에 넣어주세요.
<head>
<script language="javascript" src="계정경로/Layer.js"></script>
</head>
* 버튼에 링크걸기 - 이버튼을 클릭시 레이어팝업이 열립니다.
<a href="javascript:ViewLayer();"><img src="계정/버튼.gif" border"0"></a>
</body> 위에 아래소스↓를 넣습니다.
<div id="divpop" style="position:absolute; top:120; left:100px; z-index:200; display:none;">
<table cellpadding="5" cellspacing="0" bgcolor="#FFFFFF" border="5" bordercolor="#424242">
<tr>
<td id="titleBar" style="cursor:move" width="100%" align="center">
<ilayer width="100%" onSelectStart="return false">
<layer width="100%" onMouseover="isHot=true;if (isN4) ddN4(divpop)" onMouseout="isHot=false">
<img src="이미지.gif" border="0">
</layer>
</ilayer>
</td>
</tr>
<tr>
<td align="right" height="10" bgcolor="#424242">
<a href="javascript:close_Layer();"><img src="닫기버튼.gif" border="0"></a>
</td>
</tr>
</table>
</div>
위의 소스중에서.. <img src="이미지.gif" border="0"> 부분을 수정하셔서 사용하시면 됩니다.
이미지뿐만 아니라 응용하시면 여러가지를 넣으실 수 있습니다.
또한 현재는 닫기버튼이 이미지로 되어있지만 이것또한 수정해서 사용하실 수 있습니다.
레이어팝업 테두리 색상 및 두께도 취향에 맞춰 수정하여 사용하시면 됩니다.
'etc.' 카테고리의 다른 글
| css { margin:0 0 0 0; } 마진값으로 input 위치설정 (0) | 2014.01.16 |
|---|---|
| 이동가능한 레이어팝업, 오늘 하루 이 창을 열지 않음 (0) | 2014.01.16 |
| 퀵메뉴, 스크롤에 따라움직이는, 고정메뉴, 따라다니는 메뉴, quick (0) | 2014.01.16 |
| swf 플래시 테두리 없이 삽입 , 플래시 삽입태그 (0) | 2014.01.16 |
| body 마우스 오른쪽버튼 사용금지 태그 (0) | 2014.01.16 |