링크 설명 보여주기Go to UP





추가예제





어떤 링크에 마우스가 갔을때, 이동할 문서의 간략한 내용을 보여줄 수 있습니다. 버젼 4 이전의 브라우저에서는 이런 것을 이미지로 할수 있었는데, 이것을 css layer로 구현할 수 있습니다. 속도는 이미지를 사용하는 것보다 훨씬 빠릅니다.

어떤 이벤트에서 보여줄 레이어의 visibility값을 "visible", "hidden"으로 조정하면 이런 효과를 낼 수 있습니다. 위의 이미지에 마우스를 올리면 링크의 내용을 보여주고 치우면 감춥니다. 가장 간단한 이벤트인 링크의 mouseover, mouseout를 사용하여 만든것입니다. 

<table><tr><td>
<a href="javascript:alert('Go Home')"
	onMouseOver="if(document.layers)document.homeGuy.visibility='visible'; 
		else if(document.all)document.all.homeGuy.style.visibility='visible'" 
	onMouseout="if(document.layers)document.homeGuy.visibility='hidden'; 
		else if(document.all)document.all.homeGuy.style.visibility='hidden'"
><img src="../../images/home.gif" width=100 height=30 border=0></a>
</td></tr></table>
위의 "HOME" 링크에 사용한 소스입니다. 이미지를 가지고 있는 링크에 mouseover, mouseout로 보여줄 레이어 "homeGuy"를 보였다 안보였다 합니다. <table>을 넣어준 것은 nn4에서 line-height를 지정한 페이지에서 이미지가 겹쳐서 나오는 버그를 해결해 줍니다. 그리고 "homeGuy" 레이어는 링크의 설명을 하기 위한 글자들을 가지고 있는 단순한 레이어입니다. 
<div id=homeGuy style="position:absolute;left:200;top:100;width:30px;visibility:hidden">
<pre>
홈으로 갑니다. 홈으로 갑니다.
홈으로 갑니다. 홈으로 갑니다.
홈으로 갑니다. 홈으로 갑니다.
홈으로 갑니다. 홈으로 갑니다.
홈으로 갑니다. 홈으로 갑니다.
</pre>
</div>
위치를 left:200;top:100;로 지정을 했습니다. 링크와 보여줄 안내문 레이어의 거리를 알맞게 조정을 하면 됩니다. 정확한 거리가 필요하다면 이미지를 링크안에 두지말고 절대위치 레이어안에 두면 정확한 거리로 배치할 수 있습니다.

TOP