Tool Bar Menu | ../ |
[Tool Bar Ver 1.1]
[Tool Bar Ver 1.0]
[Tool Bar Menu (98/07/12)]
ie4에서 ToolBar Ver1.1, 1.0의 문제수정(1999/12/08) |
<body>
<script language="JScript" src="ieToolBarVer11.js"></script>
<div id=nn4toolBar style="position:absolute; left:0; top:0; include-source:url('nn4toolBarVer11.htm')"></div>
:
:
의 식입니다. 페이지의 아래에 넣어주면 매뉴가 겹쳐서 나옵니다. 페이지 아래 부분에 위의 구문을 넣어주면
다시한번 더 일일이 javascript로 매뉴의 좌표를 지정해 주어야 하지만 위의 식처럼 <body> 택 바로 아래에
넣어주면 매뉴가 겹치지 않습니다. nn4, ie5에서는 이런 문제가 없습니다. 이유는 저도 모르겠습니다.
Ver1.0 페이지에는 페이지 아래부분에 위의 구문을 지정했습니다. 아래의 식으로요.
:
:
<script language="JScript" src="ieToolBarVer11.js"></script>
<div id=nn4toolBar style="position:absolute; left:0; top:0; include-source:url('nn4toolBarVer11.htm')"></div>
</body>
</html>
그래서 ie4로 Ver1.0을 보면 매뉴가 겹쳐서 나옵니다. Ver1.0을 사용할 때에도 페이지 윗부분에 넣어주세요.
Ver1.1을 설명한 페이지에는 <body> 택 바로 아래에 넣어주었지만 Ver1.0을 설명한 페이지는
수정하지 않았습니다.
ie4에서 문제가 나는것은 페이지 출력중에 css-p 레이어의 좌표를 javascript로 지정시 지정하는 시간이 필요한 것같습니다. 그래서 페이지 가장 위에 지정하면 페이지의 다른 html 을 출력하는 시간동안 정상적으로 좌표를 지정할 수 있는 것 같습니다. 그래서 다른 방법은 어쩌면 가장 확실한 방법입니다. 좌표를 Javascript로 지정하지 않고 css position 의 좌표를 정확히 지정하고 javascript로는 지정하지 않는 것입니다. 이것은 아래의 식입니다.
/***************************************************
Tool Bar Version 1.1 (99/10/08)
Yongsuk Lee (spacekan@chollian.net)
(http://user.chollian.net/~spacekan/)
****************************************************/
menuStyle = ''
+ '<style>'
+ '.noLine { text-decoration:none; font-weight:bold; color:black}'
+ '#M1, #M2, #M3, #M4 { ' // 상위 매뉴
+ 'position:absolute; top:0px; left:0px; width:50px; border:outset 2px white; '
+ 'background-color: lightblue; font-size: 9pt; '
+ 'font-weight:bold; padding:2px; text-align: center; }'
+ '#M1 { width:150px; left:0px; }'
+ '#M2 { width:120px; left:150px; }'
+ '#M3 { width:120px; left:270px; }'
+ '#M4 { width:50px; left:390px; }'
+ '#S1, #S2, #S3, #S4 { ' // 하위 매뉴
+ 'position:absolute; top:35px; left:300; width:100; visibility:hidden; border:outset 2px white; '
+ 'background-color: lightblue; font-size: 9pt; line-height:12pt; padding:10px; }'
+ '#S1 {width:200; left:0px;}'
+ '#S2 {width:170; left:150px; }'
+ '#S3 {width:170; left:270px; }'
+ '#S4 {width:100; left:390px; }'
+ '</style>';
menuLayout = ''
+ '<span id=M1>Tool Bar Ver 1.0</span>'
+ '<span id=M2>NN4 사용법</span>'
+ '<span id=M3>IE4 사용법</span>'
+ '<span id=M4>문제점</span>';
subMenuLayout = ''
+ '<div id=S1>'
+ '<a class=noLine onmouseover="this.style.color=\'red\'" onmouseout="this.style.color=\'black\'" href="toolBar10.htm"<Tool Bar Ver 1.0</a<<br<'
+ '<a class=noLine onmouseover="this.style.color=\'red\'" onmouseout="this.style.color=\'black\'" href="toolBarWork.htm"<ToolBar Ver 1.0 동작 방식</a<<br<'
+ '<a class=noLine onmouseover="this.style.color=\'red\'" onmouseout="this.style.color=\'black\'" href="toolBar10Base.htm"<기본 페이지</a<<br<'
+ '<a class=noLine onmouseover="this.style.color=\'red\'" onmouseout="this.style.color=\'black\'" href="../toolBar.htm"<../</a<<br>'
+ '</div>'
+ '<div id=S2>'
+ '<a class=noLine onmouseover="this.style.color=\'red\'" onmouseout="this.style.color=\'black\'" href="nn4MakeToolBar.htm">Tool Bar 만들기</a><br>'
+ '<a class=noLine onmouseover="this.style.color=\'red\'" onmouseout="this.style.color=\'black\'" href="nn4Pos.htm">배치하기</a><br>'
+ '<a class=noLine onmouseover="this.style.color=\'red\'" onmouseout="this.style.color=\'black\'" href="nn4Html.htm">style과 html 작성하기</a><br>'
+ '<a class=noLine onmouseover="this.style.color=\'red\'" onmouseout="this.style.color=\'black\'" href="nn4Script.htm">script 수정하기</a><br>'
+ '</div>'
+ '<div id=S3>'
+ '<a class=noLine onmouseover="this.style.color=\'red\'" onmouseout="this.style.color=\'black\'" href="ie4MakeToolBar.htm">Tool Bar 만들기</a><br>'
+ '<a class=noLine onmouseover="this.style.color=\'red\'" onmouseout="this.style.color=\'black\'" href="ie4Pos.htm">배치하기</a><br>'
+ '<a class=noLine onmouseover="this.style.color=\'red\'" onmouseout="this.style.color=\'black\'" href="ie4Html.htm">style과 html 작성하기</a><br>'
+ '<a class=noLine onmouseover="this.style.color=\'red\'" onmouseout="this.style.color=\'black\'" href="ie4Script.htm">script 수정하기</a><br>'
+ '</div>'
+ '<div id=S4>'
+ '<a class=noLine onmouseover="this.style.color=\'red\'" onmouseout="this.style.color=\'black\'" href="nn4Prob.htm"><img src="../images/n4.gif" border=0><img src="../images/n4.gif" border=0><img src="../images/n4.gif" border=0></a><br>'
+ '<a class=noLine onmouseover="this.style.color=\'red\'" onmouseout="this.style.color=\'black\'" href="ie4Prob.htm"><img src="../images/e4.gif" border=0><img src="../images/e4.gif" border=0><img src="../images/e4.gif" border=0></a><br>'
+ '</div>';
function menuOver() {
if( this.son != subLayerOn && subLayerOn) subLayerOn.style.visibility="hidden"
this.style.color = "red"
this.son.style.visibility="visible"
}
function menuOut() {
subLayerOn = this.son;
this.style.color = "black"
}
function subOn() {
clearTimeout(sub_ID)
}
function subOut() {
sub_ID = setTimeout("subLayerOn.style.visibility='hidden'", 1)
}
function displayMenu() {
if(!document.all) return
var menuLayer, subLayer
var firstPos = 0
for(var i=1; i<5; i++) {
menuLayer = document.all["M"+i]
subLayer = document.all["S"+i]
menuLayer.onmouseover=menuOver
menuLayer.onmouseout=menuOut
menuLayer.son=subLayer
subLayer.onmouseover = subOn
subLayer.onmouseout = subOut
// menuLayer.style.posLeft = firstPos
// menuLayer.style.posTop = document.body.scrollTop
// firstPos += menuLayer.offsetWidth
// subLayer.style.pixelTop = menuLayer.style.pixelTop + menuLayer.offsetHeight -1
// subLayer.style.pixelLeft = menuLayer.style.pixelLeft
}
}
function fixMenu() {
var menuLayer, subLayer
var topPos = document.body.scrollTop
for(var i=1; i<5; i++) {
menuLayer = document.all["M"+i]
subLayer = document.all["S"+i]
menuLayer.style.pixelTop = topPos
subLayer.style.pixelTop = topPos + menuLayer.offsetHeight
}
}
subLayerOn=sub_ID=null
document.write(menuStyle)
document.write(menuLayout)
document.write(subMenuLayout)
displayMenu()
window.onscroll = fixMenu
으로 지정합니다. 먼저 정확한 좌표를 지정합니다. 아래입니다.
+ '#M1, #M2, #M3, #M4 { ' // 상위 매뉴
+ 'position:absolute; top:0px; left:0px; width:50px; border:outset 2px white; '
+ 'background-color: lightblue; font-size: 9pt; '
+ 'font-weight:bold; padding:2px; text-align: center; }'
+ '#M1 { width:150px; left:0px; }'
+ '#M2 { width:120px; left:150px; }'
+ '#M3 { width:120px; left:270px; }'
+ '#M4 { width:50px; left:390px; }'
+ '#S1, #S2, #S3, #S4 { ' // 하위 매뉴
+ 'position:absolute; top:35px; left:300; width:100; visibility:hidden; border:outset 2px white; '
+ 'background-color: lightblue; font-size: 9pt; line-height:12pt; padding:10px; }'
+ '#S1 {width:200; left:0px;}'
+ '#S2 {width:170; left:150px; }'
+ '#S3 {width:170; left:270px; }'
+ '#S4 {width:100; left:390px; }'
+ '</style>';
으로 굵은 글자들의 좌표로 위치시킬 곳을 지정해 줍니다. 그리고 아래의 Javascript 로 지정하는 구문은
필요가 없으므로 지워주면 됩니다.
// menuLayer.style.posLeft = firstPos // menuLayer.style.posTop = document.body.scrollTop // firstPos += menuLayer.offsetWidth // subLayer.style.pixelTop = menuLayer.style.pixelTop + menuLayer.offsetHeight -1 // subLayer.style.pixelLeft = menuLayer.style.pixelLeft위의 JavaScript가 하는 역활은 글자로 구성한 레이어의 크기를 1 pixel의 크기고 놓치지 않고 정확한 레이저의 크기로 배치합니다. 글자로 구성한 레이어의 크기는 이미지가 아니기 때문에 정확한 크기를 알 수가 없어서 그 크기를 읽고 배치를 시키는 것입니다. 그래서 편리합니다. 하지만 절대 크기의 font-size를 지정한 글자는 그 크기가 일정하기 때문에 여러번 좌표를 지정하면 굳이 Javascript로 크기를 읽지 않아도 알맞은 좌표로 레이어들을 배치할 수 있습니다. 이 방법을 사용하여 작성한 것은 페이지 아래나 위 아무데나 두어도 매뉴가 겹치지 않고 잘 나왔습니다.
--
진작 알았는 문제인데 낙서판에 수정 요청이 들어 와서야 수정을 하네요. 저의 게으름이
문제입니다. 또 하나 있다면 이런 문제가 없으면 아무도 낙서판이나 메일로 알려주지 않기 때문입니다.
그야말로 이게 필요한 것인지, 쓸모 있는 것인지, 필요도 없는데 괜히 만들은 것인지 알
수가 없습니다. 언제나 새로운 기능이나 좋은 예제 거리를 메일로 받을 수 있는지.. 어쩌면 이것이 저를
더 게을러 지게 하지않나 생각해 봅니다. 설마 이것도 나의 착각인지도 모르겠다는 생각이 듭니다.
아마 빠삐용이 감옥 독방에서 자기가 말하고 자기가 대답할 때의 기분이 이랬을 것 같군요.. -_-
세상의
감옥은 우리가 만들어 가고 있는 것이 아닐까요..? 타인에 대한 무관심, 어떤 사물에 대한 무감각이 자신을
감옥에 가두고 그 감옥은 타인에게도 전염되겠죠. 그리고 그 감옥을 없엘 수 있는 것도 아마 우리일 것 같군요.
감옥 예기하니 창원이 생각이 나는군요.. 한동안 예 때문에 길거리 신호등 앞에 있으면 경찰차가 꼭 내 앞에서
섯다가 가서 무척 신경이 쓰였는 기억이 나네요.. 창원이 있는 옆 방에 들어가야 할 놈들이 널렸는데..
참.. 감옥 예기는 "박인권" 만화보면 아주 재미있게 나옵니다.. 벌써 여러권 나왔습니다. 자칭 깜빵 전문
만화가라고 하더군요.. 히히.. 예..? 예.. 그만 하죠.. 쩝.. -_-