레이어 고정에 관해 질문드립니다. 정보
레이어 고정에 관해 질문드립니다.본문
레이어를 2개가 겹치게 한후 해상도에 상관없이 고정시키고 싶습니다.
레이어 2개가 겹치는것까지는 되는데 해상도마다 위치가 바뀌어서 계속 뒤죽박죽 되네요,,
이런 경우가 있으셨던 분이나 해결 보신분 있으면 도와주세요~~
현재는 1280*1024로 맞쳐져 있습니다.
댓글 전체
좌측정렬이면 별 상관이 없는데 중앙정렬의 경우 위치지정이 달라지는 경우가 있죠...특히 절대좌표값의 경우는 기준점이 창의 좌측상단(?)이기 때문에 생기는 문제요....이럴경우 기준점을 따로 잡아주고 거기에대한 상대거리값을 주면 됩니다...
ex) newlist_over.style.left = standard_table.offsetLeft + 27;
이런식입니다...newlist_over(대상)의 좌측값을 standard_table(기준점)위치의 좌측보다 27픽셀 떨어지게...라는 의미죠...네이버나 질문답변에 검색해 보시면 나올겁니다...^^
ex) newlist_over.style.left = standard_table.offsetLeft + 27;
이런식입니다...newlist_over(대상)의 좌측값을 standard_table(기준점)위치의 좌측보다 27픽셀 떨어지게...라는 의미죠...네이버나 질문답변에 검색해 보시면 나올겁니다...^^
죄송합니다 다른 일이 생겨 늦게 확인하게 되었습니다. 아침에 바로 시도해 보고 모르면 다시 여쭤봐도 되겠습니까? ^^ 일단 답변 주셔서 정말 너무나 감사합니다~~
삼윤님 조금만 쉽게 설명해 주시면 안될까요? ^^
1. 고정하고 싶은 레이어에 id를 줍니다.(예 standard_table)
2. 기준을 잡을 것에 id를 줍니다.(예 newlist_over)
3. 거리를 조정합니다.
<script>
newlist_over.style.left = standard_table.offsetLeft + 27;
</script>
여기서 레이어일 필요는 없습니다. 테이블도 되고 div도 되고 그냥 id값을 부여할수 있는곳에 주면됩니다.
4. 주의점이 있습니다. 위치는 모든 html위치들이 나온뒤에 해야됩니다. 그때서야 offsetLeft(좌측위치)값이 정해지니깐요...보통 setInterval류나 setTimeout같은함수로 일정시간 후에 다시 부르는 방식으로 합니다...네이트같은데 검색해보세요...offsetLeft로 하시면 많이 나올겁니다 보통 오른쪽에 따라다니는 광고나 오늘본 제품, 퀵메뉴 같은데 사용되는 코드입니다
2. 기준을 잡을 것에 id를 줍니다.(예 newlist_over)
3. 거리를 조정합니다.
<script>
newlist_over.style.left = standard_table.offsetLeft + 27;
</script>
여기서 레이어일 필요는 없습니다. 테이블도 되고 div도 되고 그냥 id값을 부여할수 있는곳에 주면됩니다.
4. 주의점이 있습니다. 위치는 모든 html위치들이 나온뒤에 해야됩니다. 그때서야 offsetLeft(좌측위치)값이 정해지니깐요...보통 setInterval류나 setTimeout같은함수로 일정시간 후에 다시 부르는 방식으로 합니다...네이트같은데 검색해보세요...offsetLeft로 하시면 많이 나올겁니다 보통 오른쪽에 따라다니는 광고나 오늘본 제품, 퀵메뉴 같은데 사용되는 코드입니다
<table id=newlist_over width=100% cellpadding=0 cellspacing=0 height="762">
<tr>
<td valign=top width="655" rowspan="3" height="554"><div id="standard_table" style="position:absolute; width:609px; height:541px; left:170px; top:100px; z-index:1;"><img src="http://www.and1tour.co.kr/image/111main.jpg"><div id="standard_table2" style="position:absolute; width:200px; height:200px; left:0px; top:50px; z-index:2;"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="609" height="480">
<param name="movie" value="http://www.and1tour.co.kr/image/mainindex.swf">
<param name="play" value="true">
<param name="loop" value="true">
<param name="quality" value="high">
<param name="wmode" value="transparent">
<embed width="609" height="480" src="http://www.and1tour.co.kr/image/mainindex.swf" play="true" loop="true" quality="high" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash"></object>
<script>
newlist_over.style.left = standard_table.offsetLeft + 27;
</script>
현재 이렇게 잡아 주었는데,, 그래도 되지가 않습니다. 어느부분이 틀린걸까요??
<tr>
<td valign=top width="655" rowspan="3" height="554"><div id="standard_table" style="position:absolute; width:609px; height:541px; left:170px; top:100px; z-index:1;"><img src="http://www.and1tour.co.kr/image/111main.jpg"><div id="standard_table2" style="position:absolute; width:200px; height:200px; left:0px; top:50px; z-index:2;"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="609" height="480">
<param name="movie" value="http://www.and1tour.co.kr/image/mainindex.swf">
<param name="play" value="true">
<param name="loop" value="true">
<param name="quality" value="high">
<param name="wmode" value="transparent">
<embed width="609" height="480" src="http://www.and1tour.co.kr/image/mainindex.swf" play="true" loop="true" quality="high" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash"></object>
<script>
newlist_over.style.left = standard_table.offsetLeft + 27;
</script>
현재 이렇게 잡아 주었는데,, 그래도 되지가 않습니다. 어느부분이 틀린걸까요??
일단 standard_table은 소스보기에서 중간쯤이 적당하겠네요...index에서 head호출후의 상단의 테이블에 <!-- 중간 -->
<table align=center width='900' cellpadding=0 cellspacing=0 border=0 id='standard_table'>
정도로 줍니다
다음에는 div로 묶어두신 위치고정하실것들에 <div id='newlist_over' ....>정도를 줍니다. 두개일 경우는 <div id='newlist_over2' ....>로 하나 더 주시면 되구요
다음에는 위치고정인데 이건 중간에 한번만 위치를 변경하면 안되는경우가 많으므로
<script language="javascript">
function getRealOffsetTop(o)
{
return o ? o.offsetTop + getRealOffsetTop(o.offsetParent) : 0;
}
function getRealOffsetLeft(o)
{
return o ? o.offsetLeft + getRealOffsetLeft(o.offsetParent) : 0;
}
function rePlace(){
try {
tb_zone = getRealOffsetLeft(document.getElementById('standard_table'));
document.getElementById("newlist_over").style.left = tb_zone+27;
tb_zone = getRealOffsetTop(document.getElementById('standard_table'));
document.getElementById("newlist_over").style.top = tb_zone+79;
} catch(e) {
// Do nothing
}
}
function init_layer(){
rePlace();
setTimeout('init_layer()',100)
}
init_layer();
</script>
을줍니다...이건 제가 전에 했던곳의 소스를 복사해둔겁니다. 좌측값과 상단값을 0.1초마다 변경시키는 겁니다...27과 79의 수치를 적당히 바꾸시면 될듯합니다
<table align=center width='900' cellpadding=0 cellspacing=0 border=0 id='standard_table'>
정도로 줍니다
다음에는 div로 묶어두신 위치고정하실것들에 <div id='newlist_over' ....>정도를 줍니다. 두개일 경우는 <div id='newlist_over2' ....>로 하나 더 주시면 되구요
다음에는 위치고정인데 이건 중간에 한번만 위치를 변경하면 안되는경우가 많으므로
<script language="javascript">
function getRealOffsetTop(o)
{
return o ? o.offsetTop + getRealOffsetTop(o.offsetParent) : 0;
}
function getRealOffsetLeft(o)
{
return o ? o.offsetLeft + getRealOffsetLeft(o.offsetParent) : 0;
}
function rePlace(){
try {
tb_zone = getRealOffsetLeft(document.getElementById('standard_table'));
document.getElementById("newlist_over").style.left = tb_zone+27;
tb_zone = getRealOffsetTop(document.getElementById('standard_table'));
document.getElementById("newlist_over").style.top = tb_zone+79;
} catch(e) {
// Do nothing
}
}
function init_layer(){
rePlace();
setTimeout('init_layer()',100)
}
init_layer();
</script>
을줍니다...이건 제가 전에 했던곳의 소스를 복사해둔겁니다. 좌측값과 상단값을 0.1초마다 변경시키는 겁니다...27과 79의 수치를 적당히 바꾸시면 될듯합니다
잘봤습니다
