<!-- 문서 최상단 or 최하단에 위치 -->
<div id="layer1" style="display:none;"></div>
클릭위치 있을경우
<table>
<tr>
<td>
<!-- 클릭 시작 -->
<div id="menu_1"><a href="javascript:" onMouseOver="return on_layer('menu_1',event,'layer1','test2.php',100,50,10);">테스트2</a></div>
<!-- 클릭 종료 -->
</td>
</tr>
<tr>
<td>
<div id="menu_2"><a href="javascript:" onMouseOver="return on_layer('menu_2',event,'layer1','test2.php',100,50,10);">테스트2</a></div>
</td>
</tr>
<tr>
<td>
<div id="menu_3"><a href="javascript:" onMouseOver="return on_layer('menu_3',event,'layer1','test2.php',100,50,10);">테스트2</a></div>
</td>
</tr>
<tr>
<td>
<div id="menu_4"><a href="javascript:" onMouseOver="return on_layer('menu_4',event,'layer1','test2.php',100,50,10);">테스트2</a></div>
</td>
</tr>
<tr>
<td>
<div id="menu_5"><a href="javascript:" onMouseOver="return on_layer('menu_5',event,'layer1','test2.php',100,50,10);">테스트2</a></div>
</td>
</tr>
</table>
클릭위치 없을경우
<table>
<tr>
<td>
<!-- 클릭 시작 -->
<div id="menu_6"><a href="javascript:" onMouseOver="return on_layer('menu_6',event,'layer1','test2.php',100);">테스트2</a></div>
<!-- 클릭 종료 -->
</td>
</tr>
<tr>
<td>
<div id="menu_7"><a href="javascript:" onMouseOver="return on_layer('menu_7',event,'layer1','test2.php',100);">테스트2</a></div>
</td>
</tr>
<tr>
<td>
<div id="menu_8"><a href="javascript:" onMouseOver="return on_layer('menu_8',event,'layer1','test2.php',100);">테스트2</a></div>
</td>
</tr>
<tr>
<td>
<div id="menu_9"><a href="javascript:" onMouseOver="return on_layer('menu_9',event,'layer1','test2.php',100);">테스트2</a></div>
</td>
</tr>
<tr>
<td>
<div id="menu_10"><a href="javascript:" onMouseOver="return on_layer('menu_10',event,'layer1','test2.php',100);">테스트2</a></div>
</td>
</tr>
</table>
</BODY>
<script>
//(위치 div ,event,"레이어아이디", 프레임 url, 프레임width, 클릭위치에서 + 될 left, 클릭위치에서 + 될 top)
// 클릭 위치를 입력하지 않을경우 마우스 위치에 따라 레이어가 출력됩니다.
function on_layer(posi,e,id,url,wid,leftv,topv){
if(document.all){ // 익스 플로인지 아닌지 체크
var doc = document.body;
}
var docid = document.getElementById(id);
var content = "<iframe id='IFRAME' src=" + url + " marginwidth='0' marginheight='0' frameborder='0' vspace='0' hspace='0' height='0' style='width:" + wid + "px;background:#000000;' onLoad=resizeHeight('IFRAME')></iframe>";
docid.innerHTML= content;
if(leftv || topv){ // 위치를 입력햇을때
var mousewidth = findLeft(posi) + leftv;
var mouseheight = findTop(posi) + topv;
}else{
var mousewidth = doc? doc.scrollLeft+event.clientX : pageXOffset+e.clientX; // 마우스 가로 위치
var mouseheight = doc? doc.scrollTop+event.clientY : pageYOffset+e.clientY; // 마우스 세로 위치
}
docid.style.left = mousewidth+"px"; // 레프트 위치 설정
docid.style.top = mouseheight+"px"; // 상단 위치 설정
docid.style.position="absolute"; // 절대고정
docid.style.display=""; // 숨겨진 div 오픈
return false // 리턴 펄스 안해주면 ie6.0 에서 안됨
}
// 프레임 세로 길이 자동 리사이징을 위하여
function resizeHeight(FrameName)
{
if(document.all) {
var body_height = frames[FrameName].document.body.scrollHeight;
} else {
var body_height= document.getElementById(FrameName).contentWindow.document.body.offsetHeight;
}
// 자료가 없을경우 레이어를 보이지 안케하기위해
// alert(body_height); 주석을 푼후 아래 나오는 숫자에 대입
if(body_height != 22){
document.getElementById(FrameName).height=body_height;
}else{
document.getElementById(FrameName).height=0;
}
}
// 레프트 클릭 위치
function findLeft(posi){
var parent = document.getElementById(posi).offsetParent
var mousewidth = document.getElementById(posi).offsetLeft;
while(parent){
mousewidth += parent.offsetLeft;
parent = parent.offsetParent;
}
return mousewidth;
}
// 탑 클릭 위치
function findTop(posi){
var parent = document.getElementById(posi).offsetParent
var mouseheight = document.getElementById(posi).offsetLeft;
while(parent){
mouseheight += parent.offsetTop;
parent = parent.offsetParent;
}
return mouseheight;
}
</script>
</HTML> |
|
추천 : 