버젼3의 브라우저에서는 이미지를 바꾸어서 여러 링크 중에서 특정 링크를 두드러지게 할 수 있었습니다. 이 때는 여러 벌의 이미지를 출력해야 하는데 시간이 많이 걸린다는 단점이 있습니다.
이미지를 사용하지 않고 글자만으로도 버젼4에서는 비슷한 효과를 낼 수 있습니다. 투명 GIF 이미지로도 할 수 있지만, 이것도 이미지 한벌은 가져와야 합니다. 글자만으로 하는게 출력속도가 가장 빠릅니다.
이미지를 사용하는 것에 비하여 글자로 할때의 단점은 페이지에서의 배치문제입니다. background-color를 사용하므로 레이어(css-p)안에 링크를 두고 레이어의 바탕색을 바꾸어서 이런 효과를 냅니다. 이런 효과를 내는 링크들은 페이지의 한 부분에 모아 놓아놓고 사용 합니다.
이 때, 각 링크의 위치를 지정시 nn4나 ie4가 글자를 다루는 것이 조금 다릅니다. 임의로 각 레이어의 left, top의 값을 지정하면 사용자 글꼴값, 링크로 사용한 글자에 따라서 레이어의 크기가 달라집니다. 그래서 링크들의 거리가 너무 떨어지거나 좁아질 수 있습니다. 그래서 앞 링크의 크기 바로 다음에 다음 링크를 두는 상대적인 배치를 해야합니다.
두번째 링크의 위치 = 첫번째 링크의 위치 + 첫번재 링크의 폭
으로 하면 가장 근접하게 링크들을 배치시킬 수 있습니다. 거리를 10px만큼 더 벌릴려면 더하기 10을 해주면 됩니다. 상대적인 거리의 장점은 사용자 브라우저의 글꼴 환경에 상관없이 링크들을 보기좋게 배치할 수 있는 것입니다. 링크의 폭(글자 높이)은 nn4는 document.레이어이름.document.height 으로 ie4는 document.all.레이어이름.clientHeight로 알 수 있습니다.
#D1 {
position:absolute; font-size:20px; font-style:italic; top:20; left:0; width:100;
background-color:#f0e0d0; layer-background-color:#f0e0d0;
background-color:transparent;
}
<div id=D1><b><a href="javascript:alert('GO HOME')">HOME</A></b></div>
HOME 링크에 사용한 레이어입니다. background-color:transparent;는 JavaScript로 nn4에서 레이어의
바탕색을 바꾸면 글자주위에는 색이 바뀌지 않는데, 이것을 넣어주면 글자 주위에도 색이 바뀝니다.
ie4에서는 이것을 넣어주면 처음에는 바탕색이 나오지 않고 투명하게 보이지만, JavaScript로 색을 바꾸어 주면
바꾸어준 색이 나옵니다. 그러므로 처음 레이어의 바탕색을 페이지의 바탕색과 다른색을 사용할려면
JavaScript로 모든 레이어의 바탕색을 원하는 색으로 바꾸어 주어야 합니다.
이 예제 페이지의 링크를 5개 사용했습니다.
function init() {
if(n4) {
for(var i=1; i<6; i++) {
document.layers["D"+i].onmouseover = over
document.layers["D"+i].onmouseout = out
document.layers["D"+i].captureEvents(Event.MOUSEDOWN|Event.MOUSEUP)
document.layers["D"+i].onmousedown = down
document.layers["D"+i].onmouseup = up
document.layers["D"+i].clip.right = 100
if(i!=5) document.layers["D"+(i+1)].top = document.layers["D"+i].top
+ document.layers["D"+i].document.height
}
window.onresize = new Function("setTimeout('self.location.reload()', 111)");
}
if(e4) {
for(var i=1; i<6; i++) {
document.all["D"+i].onmouseover = over
document.all["D"+i].onmouseout = out
document.all["D"+i].onmousedown = down
document.all["D"+i].onmouseup = up
//document.all["D"+i].style.backgroundColor = "white"
if(i!=5) document.all["D"+(i+1)].style.pixelTop = document.all["D"+i].style.pixelTop
+ document.all["D"+i].clientHeight
}
}
}
</script>
</head>
<body onLoad="setTimeout('init()', 111)">
위의 코드로 각 링크의 레이어에게 상대적인 배치를 하고 바탕색 바꿈을 합니다.
document.layers["D"+i].clip.right = 100는 nn4에서 바탕색 바꿈으로 사용하는 레이어의 오른쪽 clip를 주는것인데, 이것은 nn4에서는 width 만으로는 레이어 전체에 바탕색이 나오지 않기 때문에 넣어주었습니다. clip을 하지 않으면 내용물이 있는 만큼만 나옵니다. ie4는 width만으로도 width만큼 바탕색이 나옵니다.
//document.all["D"+i].style.backgroundColor = "white"는 background-color:transparent;로 된 레이어의 바탕색을 지정합니다. 여기서는 페이지 바탕색과 같은 색으로 했기 때문에 넣지 않았습니다. 처음 링크의 바탕색을 흰색으로 할려면 이것을 넣어주고 위의 #f0e0d0를 모두 white로 바꾸어주면 됩니다.
function over() {
if(n4) this.document.bgColor="aqua"
else if(e4) this.style.backgroundColor="aqua"
}
function out() {
if(n4) this.document.bgColor="#f0e0d0"
else if(e4) this.style.backgroundColor="#f0e0d0"
}
function down() {
if(n4) this.document.bgColor="white"
else if(e4) this.style.backgroundColor="white"
}
function up() {
if(n4) this.document.bgColor="aqua"
else if(e4) this.style.backgroundColor="aqua"
}
각 이벤트에 맞는 바탕색을 지정합니다. 4가지의 이벤트를 사용했습니다. click 이벤트는 넣지 않았습니다.