이 소스는 수정되었습니다. 수정된 페이지로 바로가기
이벤트 대상엘리먼트의 위치에 상관없이 이벤트 대상엘리먼트에 상대적으로 레이어 위치를 조절.
function layer(layerid,target,xpos,ypos,isoverevent){
// 위치 제어가 가능한 레이어 컨트롤.
// http://www.psyonline.kr
try{clearTimeout(layerclosetimer)}catch(error){}
var obj=document.getElementById(layerid);
if(!obj.style.display || obj.style.display=='none'){
var targetinfo=[target.offsetWidth,target.offsetHeight,0,0];
for(var i=0; i<1; i++){
targetinfo[2]+=target.offsetLeft;
targetinfo[3]+=target.offsetTop;
target=target.offsetParent;
if(target.tagName.toLowerCase()!='body' && target.tagName.toLowerCase()!='html') i--;
}
obj.style.display='block';
var objinfo=[obj.offsetWidth,obj.offsetHeight];
obj.style.display='none';
if(xpos || ypos){
if(xpos){
if(!isNaN(xpos)) setleft(xpos);
else{
var xpospm;
if(xpospm=xpos.match(/([a-z-]+)(\-|\+)([0-9]+)/)) xpos=xpospm[1];
if(xpos=='left') setleft(targetinfo[2]-objinfo[0]);
else if(xpos=='justify-left') setleft(targetinfo[2]);
else if(xpos=='right') setleft(targetinfo[2]+targetinfo[0]);
else if(xpos=='justify-right') setleft((targetinfo[2]+targetinfo[0])-objinfo[0]);
else if(xpos=='center') setleft((targetinfo[2]+(targetinfo[0]/2))-(objinfo[0]/2));
}
}
if(ypos){
if(!isNaN(ypos)) settop(ypos);
else{
var ypospm;
if(ypospm=ypos.match(/([a-z-]+)(\-|\+)([0-9]+)/)) ypos=ypospm[1];
if(ypos=='top') settop(targetinfo[3]-objinfo[1]);
else if(ypos=='justify-top') settop(targetinfo[3]);
else if(ypos=='bottom') settop(targetinfo[3]+targetinfo[1]);
else if(ypos=='justify-bottom') settop((targetinfo[3]+targetinfo[1])-objinfo[1]);
else if(ypos=='middle') settop((targetinfo[3]+(targetinfo[1]/2))-(objinfo[1]/2));
}
}
}else{
if(xpos===0) setleft(xpos);
if(ypos===0) settop(ypos);
}
obj.style.display='block';
}else{
if(!isoverevent) obj.style.display='none';
}
function setleft(value){
if(xpospm) value=eval('value'+xpospm[2]+xpospm[3]);
obj.style.left=value+'px';
}
function settop(value){
if(ypospm) value=eval('value'+ypospm[2]+ypospm[3]);
obj.style.top=value+'px';
}
}
인수
첫번째 : 제어할 레이어의 아이디(문자열로 지정)두번째 : 이벤트를 적용할 엘리먼트(엘리먼트 자신일 경우 this, 아닐 경우 적용할 엘리먼트를 object로 지정)세번째 : 수평 위치(위치값 옵션은 아래 참조)네번째 : 수직 위치(위치값 옵션은 아래 참조)다섯번째 : 마우스오버 드롭다운 효과를 위한 설정(자세한 사항은 아래 참조)
함수를 마우스오버 이벤트로 사용할 경우 마우스아웃 시 레이어를 감추기 위해 이벤트 대상 엘리먼트에 onmouseout="layerclose('제어할 레이어의 아이디')" 이벤트 추가.
위치값 옵션
위치값은 숫자로 직접 지정할 수도 있으며, 이벤트 대상 엘리먼트에 상대적으로 적용하려면 다음의 정해진 옵션 값을 사용.
수평위치 종류
justify-left : 이벤트를 적용할 엘리먼트의 왼쪽을 기준으로 레이어의 왼쪽을 지정.left : 이벤트를 적용할 엘리먼트의 왼쪽을 기준으로 레이어의 오른쪽을 지정.justify-right : 이벤트를 적용할 엘리먼트의 오른쪽을 기준으로 레이어의 오른쪽을 지정.right : 이벤트를 적용할 엘리먼트의 오른쪽을 기준으로 레이어의 왼쪽을 지정.center : 이벤트를 적용할 엘리먼트의 수평 중앙에 지정.
수직위치 종류
justify-top : 이벤트를 적용할 엘리먼트의 상단을 기준으로 레이어의 상단을 지정.top : 이벤트를 적용할 엘리먼트의 상단을 기준으로 레이어의 하단을 지정.justify-bottom : 이벤트를 적용할 엘리먼트의 하단을 기준으로 레이어의 하단을 지정.bottom : 이벤트를 적용할 엘리먼트의 하단을 기준으로 레이어의 상단을 지정.middle : 이벤트를 적용할 엘리먼트의 수직 중앙에 지정.
위치값 뒤에 +, -로 세밀한 위치 지정 가능. 아래 예시참조(검정박스에 마우스를 올리면 위치값 확인 가능)
마우스오버 드롭다운 메뉴
마우스오버 드롭다운 메뉴로 사용시에는 여러가지 문제로 -_- 다음 변수와 함수를 추가 후 사용해야 하며, 이벤트를 적용하는 엘리먼트의 onmouseout이벤트에는 layerclose('제어할 레이어 아이디')를 지정하고, 타겟 레이어 자체에 onmouseover="layerwaitforclose('제어할 레이어의 아이디')" onmouseout="layerclose('제어할 레이어의 아이디')" 이벤트를 지정.
var layerclosetimer=null;
function layerclose(layerid){
layerclosetimer=setTimeout("layer('"+layerid+"')",100);
}
function layerwaitforclose(layerid){
clearTimeout(layerclosetimer);
}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>레이어 컨트롤 샘플3</title>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
<meta http-equiv="imagetoolbar" content="no">
<style type="text/css">
body{
font-family:tahoma;
font-size:0.74em;
color:#000;
margin:0;
padding:0;
}
#dropdown{
position:absolute;
left:50%;
top:10px;
width:100px;
line-height:1.3em;
margin-left:-55px;
padding:1px 5px;
border:1px solid #BBB;
background:#FFF;
cursor:pointer;
}
#dropdownlayer{
position:absolute;
width:106px;
line-height:1.3em;
padding:2px;
border:1px solid #BBB;
background:#FFF;
display:none;
}
#dropdownlayer a{
padding:1px 3px;
display:block;
}
#dropdownlayer a:hover{
background:#EEE;
}
</style>
<script type="text/javascript">
var layerclosetimer=null;
function layerclose(layerid){
layerclosetimer=setTimeout("layer('"+layerid+"')",100);
}
function layerwaitforclose(layerid){
clearTimeout(layerclosetimer);
}
function layer(layerid,target,xpos,ypos,isoverevent){
// 위치 제어가 가능한 레이어 컨트롤.
// http://www.psyonline.kr
try{clearTimeout(layerclosetimer)}catch(error){}
var obj=document.getElementById(layerid);
if(!obj.style.display || obj.style.display=='none'){
var targetinfo=[target.offsetWidth,target.offsetHeight,0,0];
for(var i=0; i<1; i++){
targetinfo[2]+=target.offsetLeft;
targetinfo[3]+=target.offsetTop;
target=target.offsetParent;
if(target.tagName.toLowerCase()!='body' && target.tagName.toLowerCase()!='html') i--;
}
obj.style.display='block';
var objinfo=[obj.offsetWidth,obj.offsetHeight];
obj.style.display='none';
if(xpos || ypos){
if(xpos){
if(!isNaN(xpos)) setleft(xpos);
else{
var xpospm;
if(xpospm=xpos.match(/([a-z-]+)(\-|\+)([0-9]+)/)) xpos=xpospm[1];
if(xpos=='left') setleft(targetinfo[2]-objinfo[0]);
else if(xpos=='justify-left') setleft(targetinfo[2]);
else if(xpos=='right') setleft(targetinfo[2]+targetinfo[0]);
else if(xpos=='justify-right') setleft((targetinfo[2]+targetinfo[0])-objinfo[0]);
else if(xpos=='center') setleft((targetinfo[2]+(targetinfo[0]/2))-(objinfo[0]/2));
}
}
if(ypos){
if(!isNaN(ypos)) settop(ypos);
else{
var ypospm;
if(ypospm=ypos.match(/([a-z-]+)(\-|\+)([0-9]+)/)) ypos=ypospm[1];
if(ypos=='top') settop(targetinfo[3]-objinfo[1]);
else if(ypos=='justify-top') settop(targetinfo[3]);
else if(ypos=='bottom') settop(targetinfo[3]+targetinfo[1]);
else if(ypos=='justify-bottom') settop((targetinfo[3]+targetinfo[1])-objinfo[1]);
else if(ypos=='middle') settop((targetinfo[3]+(targetinfo[1]/2))-(objinfo[1]/2));
}
}
}else{
if(xpos===0) setleft(xpos);
if(ypos===0) settop(ypos);
}
obj.style.display='block';
}else{
if(!isoverevent) obj.style.display='none';
}
function setleft(value){
if(xpospm) value=eval('value'+xpospm[2]+xpospm[3]);
obj.style.left=value+'px';
}
function settop(value){
if(ypospm) value=eval('value'+ypospm[2]+ypospm[3]);
obj.style.top=value+'px';
}
}
</script>
</head>
<body>
<div id="dropdown" onmouseover="layer('dropdownlayer',this,'justify-left','bottom+2',true)" onmouseout="layerclose('dropdownlayer')">Drop Down</div>
<div id="dropdownlayer" onmouseover="layerwaitforclose('dropdownlayer')" onmouseout="layerclose('dropdownlayer')">
<a href="#">Case 1</a>
<a href="#">Case 2</a>
</div>
</body>
</html>