해상도 변화에 따라 레이어로 만든 메뉴의 위치도 변하게 하려면 어떻게 하면 될까요?
레이어의 위치가 해상도 1024x768을 기준으로 한 절대경로 위치로 설정되어 있어서 해상도가 바뀌면 메뉴의 위치가 이상해 집니다. 해상도를 바뀌면 레이어로 만든 메뉴의 위치도 같이 변하게 하고 싶은데 어떻게 하면 좋을까요? ㅜㅜ
제가 아직 초보라서 고수분들의 가르침 부탁드립니다.
==========================================================================================================================
<?
include_once("./_common.php");
include_once("$g4[path]/lib/latest.lib.php");
include_once("$g4[path]/lib/outlogin.lib.php");
include_once("$g4[path]/lib/poll.lib.php");
include_once("$g4[path]/lib/visit.lib.php");
include_once("$g4[path]/lib/connect.lib.php");
?>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>제목 없음</title>
include_once("./_common.php");
include_once("$g4[path]/lib/latest.lib.php");
include_once("$g4[path]/lib/outlogin.lib.php");
include_once("$g4[path]/lib/poll.lib.php");
include_once("$g4[path]/lib/visit.lib.php");
include_once("$g4[path]/lib/connect.lib.php");
?>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>제목 없음</title>
<script language="JavaScript">
<!--
function na_object_show(obj)
{
var is_ns4 = navigator.appName.indexOf('Netscape', 0) != -1 && !document.getElementById;
<!--
function na_object_show(obj)
{
var is_ns4 = navigator.appName.indexOf('Netscape', 0) != -1 && !document.getElementById;
var is_ns6 = navigator.appName.indexOf('Netscape', 0) != -1 && document.getElementById;
if(is_ns4)
document.layers[obj].visibility = 'show'
else if (is_ns6)
document.getElementById(obj).style.visibility = 'show'
else if(document.all)
document.all(obj).style.visibility = 'visible'
}
document.layers[obj].visibility = 'show'
else if (is_ns6)
document.getElementById(obj).style.visibility = 'show'
else if(document.all)
document.all(obj).style.visibility = 'visible'
}
function na_object_hide(obj)
{
var is_ns4 = navigator.appName.indexOf('Netscape', 0) != -1 && !document.getElementById;
{
var is_ns4 = navigator.appName.indexOf('Netscape', 0) != -1 && !document.getElementById;
var is_ns6 = navigator.appName.indexOf('Netscape', 0) != -1 && document.getElementById;
if(is_ns4)
document.layers[obj].visibility ='hide'
else if(is_ns6)
document.getElementById(obj).style.visibility = 'hidden';
else if(document.all)
document.all(obj).style.visibility ='hidden'
}
document.layers[obj].visibility ='hide'
else if(is_ns6)
document.getElementById(obj).style.visibility = 'hidden';
else if(document.all)
document.all(obj).style.visibility ='hidden'
}
function na_init_layer_events()
{
if (document.layers) {
document.layers['layer1'].captureEvents(Event.MOUSEOVER|Event.MOUSEOUT|Event.MOUSEUP);
document.layers['layer1'].onmouseout = new Function("na_object_hide('layer2');");
document.layers['layer1'].onmouseover = new Function("na_object_show('layer2');");
document.layers['layer2'].captureEvents(Event.MOUSEOVER|Event.MOUSEOUT|Event.MOUSEUP);
document.layers['layer2'].onmouseout = new Function("na_object_hide('layer2');");
document.layers['layer2'].onmouseover = new Function("na_object_show('layer2');");
document.layers['layer4'].captureEvents(Event.MOUSEOVER|Event.MOUSEOUT|Event.MOUSEUP);
document.layers['layer4'].onmouseout = new Function("na_object_hide('layer5');");
document.layers['layer4'].onmouseover = new Function("na_object_show('layer5');");
document.layers['layer5'].captureEvents(Event.MOUSEOVER|Event.MOUSEOUT|Event.MOUSEUP);
document.layers['layer5'].onmouseout = new Function("na_object_hide('layer5');");
document.layers['layer5'].onmouseover = new Function("na_object_show('layer5');");
document.layers['layer6'].captureEvents(Event.MOUSEOVER|Event.MOUSEOUT|Event.MOUSEUP);
document.layers['layer6'].onmouseout = new Function("na_object_hide('layer7');");
document.layers['layer6'].onmouseover = new Function("na_object_show('layer7');");
document.layers['layer7'].captureEvents(Event.MOUSEOVER|Event.MOUSEOUT|Event.MOUSEUP);
document.layers['layer7'].onmouseout = new Function("na_object_hide('layer7');");
document.layers['layer7'].onmouseover = new Function("na_object_show('layer7');");
document.layers['layer8'].captureEvents(Event.MOUSEOVER|Event.MOUSEOUT|Event.MOUSEUP);
document.layers['layer8'].onmouseout = new Function("na_object_hide('layer9');");
document.layers['layer8'].onmouseover = new Function("na_object_show('layer9');");
document.layers['layer9'].captureEvents(Event.MOUSEOVER|Event.MOUSEOUT|Event.MOUSEUP);
document.layers['layer9'].onmouseout = new Function("na_object_hide('layer9');");
document.layers['layer9'].onmouseover = new Function("na_object_show('layer9');");
document.layers['layer10'].captureEvents(Event.MOUSEOVER|Event.MOUSEOUT|Event.MOUSEUP);
document.layers['layer10'].onmouseout = new Function("na_object_hide('layer11');");
document.layers['layer10'].onmouseover = new Function("na_object_show('layer11');");
document.layers['layer11'].captureEvents(Event.MOUSEOVER|Event.MOUSEOUT|Event.MOUSEUP);
document.layers['layer11'].onmouseout = new Function("na_object_hide('layer11');");
document.layers['layer11'].onmouseover = new Function("na_object_show('layer11');");
}
}
// --></script>
{
if (document.layers) {
document.layers['layer1'].captureEvents(Event.MOUSEOVER|Event.MOUSEOUT|Event.MOUSEUP);
document.layers['layer1'].onmouseout = new Function("na_object_hide('layer2');");
document.layers['layer1'].onmouseover = new Function("na_object_show('layer2');");
document.layers['layer2'].captureEvents(Event.MOUSEOVER|Event.MOUSEOUT|Event.MOUSEUP);
document.layers['layer2'].onmouseout = new Function("na_object_hide('layer2');");
document.layers['layer2'].onmouseover = new Function("na_object_show('layer2');");
document.layers['layer4'].captureEvents(Event.MOUSEOVER|Event.MOUSEOUT|Event.MOUSEUP);
document.layers['layer4'].onmouseout = new Function("na_object_hide('layer5');");
document.layers['layer4'].onmouseover = new Function("na_object_show('layer5');");
document.layers['layer5'].captureEvents(Event.MOUSEOVER|Event.MOUSEOUT|Event.MOUSEUP);
document.layers['layer5'].onmouseout = new Function("na_object_hide('layer5');");
document.layers['layer5'].onmouseover = new Function("na_object_show('layer5');");
document.layers['layer6'].captureEvents(Event.MOUSEOVER|Event.MOUSEOUT|Event.MOUSEUP);
document.layers['layer6'].onmouseout = new Function("na_object_hide('layer7');");
document.layers['layer6'].onmouseover = new Function("na_object_show('layer7');");
document.layers['layer7'].captureEvents(Event.MOUSEOVER|Event.MOUSEOUT|Event.MOUSEUP);
document.layers['layer7'].onmouseout = new Function("na_object_hide('layer7');");
document.layers['layer7'].onmouseover = new Function("na_object_show('layer7');");
document.layers['layer8'].captureEvents(Event.MOUSEOVER|Event.MOUSEOUT|Event.MOUSEUP);
document.layers['layer8'].onmouseout = new Function("na_object_hide('layer9');");
document.layers['layer8'].onmouseover = new Function("na_object_show('layer9');");
document.layers['layer9'].captureEvents(Event.MOUSEOVER|Event.MOUSEOUT|Event.MOUSEUP);
document.layers['layer9'].onmouseout = new Function("na_object_hide('layer9');");
document.layers['layer9'].onmouseover = new Function("na_object_show('layer9');");
document.layers['layer10'].captureEvents(Event.MOUSEOVER|Event.MOUSEOUT|Event.MOUSEUP);
document.layers['layer10'].onmouseout = new Function("na_object_hide('layer11');");
document.layers['layer10'].onmouseover = new Function("na_object_show('layer11');");
document.layers['layer11'].captureEvents(Event.MOUSEOVER|Event.MOUSEOUT|Event.MOUSEUP);
document.layers['layer11'].onmouseout = new Function("na_object_hide('layer11');");
document.layers['layer11'].onmouseover = new Function("na_object_show('layer11');");
}
}
// --></script>
</head>
<body OnLoad="na_init_layer_events();">
<table align="center" cellpadding="0" cellspacing="0" border="0" width="950" height="65">
<tr>
<td><img src="test/top.jpg" width="950" height="65" border="0"></td>
</tr>
</table>
<body OnLoad="na_init_layer_events();">
<table align="center" cellpadding="0" cellspacing="0" border="0" width="950" height="65">
<tr>
<td><img src="test/top.jpg" width="950" height="65" border="0"></td>
</tr>
</table>
------- 아래의 굵은 표시 부분이 레이어로 메뉴를 만든 부분입니다. 위의 테이블(align="center" width="950" height="65)과 같은 위치에 맞게 오도록 만들고 싶은데 어떻게 하면 좋을지 모르겠습니다. 아시는 분 답변 부탁드립니다. -----------
<table align="center" cellpadding="0" cellspacing="0" border="0" width="950" height="35">
<tr>
<td width="180">
<div id="layer3" style="background-image:url('test/lefttop.jpg'); width:25px; height:35px; position:absolute; left:21px; top:80px; z-index:1; visibility:visible;">
</div>
</td>
<td width="180">
<div id="layer1" style="width:180px; height:35px; position:absolute; left:46px; top:80px; z-index:1; visibility:visible;" OnMouseOver="na_object_show('layer2');" OnMouseOut="na_object_hide('layer2');">
<img src="test/menubar.jpg" width="180" height="35" border="0">
</div>
<div id="layer2" style="width:350px; height:30px; position:absolute; left:50px; top:115px; z-index:1; visibility:hidden;" OnMouseOver="na_object_show('layer2');" OnMouseOut="na_object_hide('layer2');">
<a href="http://1234.com"><img src="test/submenu.jpg" width="160" height="28" border="0"></a>
<a href="http://5678.com"><img src="test/submenu.jpg" width="160" height="28" border="0"></a> </div>
</td>
<td width="180">
<div id="layer4" style="width:180px; height:35px; position:absolute; left:226px; top:80px; z-index:1; visibility:visible;" OnMouseOut="na_object_hide('layer5');" OnMouseOver="na_object_show('layer5');">
<img src="test/menubar.jpg" width="180" height="35" border="0">
</div>
<div id="layer5" style="width:350px; height:30px; position:absolute; left:230px; top:115px; z-index:1; visibility:hidden;" OnMouseOut="na_object_hide('layer5');" OnMouseOver="na_object_show('layer5');">
<a href="http://9012.com"><img src="test/submenu.jpg" width="160" height="28" border="0"></a>
<a href="http://3456.com"><img src="test/submenu.jpg" width="160" height="28" border="0"></a>
</div>
</td>
<td width="180">
<div id="layer6" style="width:180px; height:35px; position:absolute; left:406px; top:80px; z-index:1; visibility:visible;" OnMouseOut="na_object_hide('layer7');" OnMouseOver="na_object_show('layer7');">
<img src="test/menubar.jpg" width="180" height="35" border="0">
</div>
<div id="layer7" style="width:350px; height:30px; position:absolute; left:410px; top:115px; z-index:1; visibility:hidden;" OnMouseOut="na_object_hide('layer7');" OnMouseOver="na_object_show('layer7');">
<a href="http://7890.com"><img src="test/submenu.jpg" width="160" height="28" border="0"></a>
<a href="http://1234.com"><img src="test/submenu.jpg" width="160" height="28" border="0"></a>
</div>
</td>
<td width="180">
<div id="layer8" style="width:180px; height:35px; position:absolute; left:586px; top:80px; z-index:1; visibility:visible;" OnMouseOut="na_object_hide('layer9');" OnMouseOver="na_object_show('layer9');">
<img src="test/menubar.jpg" width="180" height="35" border="0">
</div>
<div id="layer9" style="width:350px; height:30px; position:absolute; left:590px; top:115px; z-index:1; visibility:hidden;" OnMouseOut="na_object_hide('layer9');" OnMouseOver="na_object_show('layer9');">
<a href="http://5678.com"><img src="test/submenu.jpg" width="160" height="28" border="0"></a>
<a href="http://9012.com"><img src="test/submenu.jpg" width="160" height="28" border="0"></a>
</div>
</td>
<td width="180">
<div id="layer10" style="width:180px; height:35px; position:absolute; left:766px; top:80px; z-index:1; visibility:visible;" OnMouseOut="na_object_hide('layer11');" OnMouseOver="na_object_show('layer11');">
<img src="test/menubar.jpg" width="180" height="35" border="0">
</div>
<div id="layer11" style="width:350px; height:30px; position:absolute; left:770px; top:115px; z-index:1; visibility:hidden;" OnMouseOut="na_object_hide('layer11');" OnMouseOver="na_object_show('layer11');">
<a href="http://3456.com"><img src="test/submenu.jpg" width="160" height="28" border="0"></a>
<a href="http://7890.com"><img src="test/submenu.jpg" width="160" height="28" border="0"></a>
</div>
</td>
<td width="180">
<div id="layer12" style="background-image:url('test/righttop.jpg'); width:25px; height:35px; position:absolute; left:946px; top:80px; z-index:1;">
</div>
</td>
</tr>
</table>
<tr>
<td width="180">
<div id="layer3" style="background-image:url('test/lefttop.jpg'); width:25px; height:35px; position:absolute; left:21px; top:80px; z-index:1; visibility:visible;">
</div>
</td>
<td width="180">
<div id="layer1" style="width:180px; height:35px; position:absolute; left:46px; top:80px; z-index:1; visibility:visible;" OnMouseOver="na_object_show('layer2');" OnMouseOut="na_object_hide('layer2');">
<img src="test/menubar.jpg" width="180" height="35" border="0">
</div>
<div id="layer2" style="width:350px; height:30px; position:absolute; left:50px; top:115px; z-index:1; visibility:hidden;" OnMouseOver="na_object_show('layer2');" OnMouseOut="na_object_hide('layer2');">
<a href="http://1234.com"><img src="test/submenu.jpg" width="160" height="28" border="0"></a>
<a href="http://5678.com"><img src="test/submenu.jpg" width="160" height="28" border="0"></a> </div>
</td>
<td width="180">
<div id="layer4" style="width:180px; height:35px; position:absolute; left:226px; top:80px; z-index:1; visibility:visible;" OnMouseOut="na_object_hide('layer5');" OnMouseOver="na_object_show('layer5');">
<img src="test/menubar.jpg" width="180" height="35" border="0">
</div>
<div id="layer5" style="width:350px; height:30px; position:absolute; left:230px; top:115px; z-index:1; visibility:hidden;" OnMouseOut="na_object_hide('layer5');" OnMouseOver="na_object_show('layer5');">
<a href="http://9012.com"><img src="test/submenu.jpg" width="160" height="28" border="0"></a>
<a href="http://3456.com"><img src="test/submenu.jpg" width="160" height="28" border="0"></a>
</div>
</td>
<td width="180">
<div id="layer6" style="width:180px; height:35px; position:absolute; left:406px; top:80px; z-index:1; visibility:visible;" OnMouseOut="na_object_hide('layer7');" OnMouseOver="na_object_show('layer7');">
<img src="test/menubar.jpg" width="180" height="35" border="0">
</div>
<div id="layer7" style="width:350px; height:30px; position:absolute; left:410px; top:115px; z-index:1; visibility:hidden;" OnMouseOut="na_object_hide('layer7');" OnMouseOver="na_object_show('layer7');">
<a href="http://7890.com"><img src="test/submenu.jpg" width="160" height="28" border="0"></a>
<a href="http://1234.com"><img src="test/submenu.jpg" width="160" height="28" border="0"></a>
</div>
</td>
<td width="180">
<div id="layer8" style="width:180px; height:35px; position:absolute; left:586px; top:80px; z-index:1; visibility:visible;" OnMouseOut="na_object_hide('layer9');" OnMouseOver="na_object_show('layer9');">
<img src="test/menubar.jpg" width="180" height="35" border="0">
</div>
<div id="layer9" style="width:350px; height:30px; position:absolute; left:590px; top:115px; z-index:1; visibility:hidden;" OnMouseOut="na_object_hide('layer9');" OnMouseOver="na_object_show('layer9');">
<a href="http://5678.com"><img src="test/submenu.jpg" width="160" height="28" border="0"></a>
<a href="http://9012.com"><img src="test/submenu.jpg" width="160" height="28" border="0"></a>
</div>
</td>
<td width="180">
<div id="layer10" style="width:180px; height:35px; position:absolute; left:766px; top:80px; z-index:1; visibility:visible;" OnMouseOut="na_object_hide('layer11');" OnMouseOver="na_object_show('layer11');">
<img src="test/menubar.jpg" width="180" height="35" border="0">
</div>
<div id="layer11" style="width:350px; height:30px; position:absolute; left:770px; top:115px; z-index:1; visibility:hidden;" OnMouseOut="na_object_hide('layer11');" OnMouseOver="na_object_show('layer11');">
<a href="http://3456.com"><img src="test/submenu.jpg" width="160" height="28" border="0"></a>
<a href="http://7890.com"><img src="test/submenu.jpg" width="160" height="28" border="0"></a>
</div>
</td>
<td width="180">
<div id="layer12" style="background-image:url('test/righttop.jpg'); width:25px; height:35px; position:absolute; left:946px; top:80px; z-index:1;">
</div>
</td>
</tr>
</table>
|
댓글을 작성하시려면 로그인이 필요합니다.
로그인
댓글 2개
<td style="position:relative">
<div id="navigation" style="position:absolute; left: 0; top: 0; width: 레이어 가로사이즈; height: 세로사이즈; visibility: show">
레이어내용</div></td>
이런식으로 넣어주면.. 됩니다. left: 0; top: 0; 이 곳이 해당 td에서 몇 픽셀이 떨어진 곳에 레이어를 띄울지 픽셀수치를 넣어주면끝....
좌측과 높이가 지정되면 화면의 좌측에서 946px 떨어진 곳에 보여라~ 라고 명령을 주게되어 가운데 정렬된 테이블의 경우 해상도에 따라 레이어는 항상 같은위치에 고정되어 메뉴의 위치가 맞지 않게됩니다.
레이어의 위치 지정값을 빼버리면 레어어는 테이블 안에 위치하게 됩니다.