본문 바로가기

javascript

[dHTML] 깔끔한 하이퍼링크 툴팁 보여주기

<!--1. 아래의 스크립트를 <HEAD></HEAD>사이에 복사해 넣으세요-->

<STYLE TYPE="text/css">
<!--
body        {
        font-family: Verdana, arial, helvetica, sans-serif;
        font-size: 10pt;
         }

body ul li
        { margin-bottom: 4pt
        }

h1        { font-size: 14pt; }
h2        { font-size: 12pt; }
h3        { font-size: 11pt; }
        
.tip        { font-family: Verdana, arial, helvetica, sans-serif;
        font-size: 8pt;
      }
        
a:link        { color: #000066   }
a:visited  { color: #333399 }

-->
</STYLE>

<SCRIPT LANGUAGE="JavaScript">

<!--
// 구형 브라우저 에러 방지
if (!document.layers && !document.all) {
                event = "nope"
}

function doTooltip(evt,txt) {

// 툴팁 창 설정

var tip = '<TABLE BGCOLOR="#000000" WIDTH="280" CELLSPACING="0" CELLPADDING="1" BORDER="0"><TR><TD><TABLE BGCOLOR="#FFFFCC" WIDTH="100%" CELLSPACING="0" CELLPADDING="4" BORDER="0"><TR><TD CLASS="tip">' + txt  + '</TD></TR></TABLE></TD></TR></TABLE>'

// 레이어 객체 체크
// Netscape 4+
if (document.layers) {
        document.tooltip.document.write(tip)
        document.tooltip.document.close()
        document.tooltip.left = evt.pageX + 8
        document.tooltip.top = evt.pageY + 8
        document.tooltip.visibility = "show"
}
// IE 4+        
if (document.all) {
        document.all.tooltip.innerHTML = tip
        document.all.tooltip.style.pixelLeft = evt.offsetX + 8
        document.all.tooltip.style.pixelTop = evt.offsetY + 8
        document.all.tooltip.style.visibility = "visible"
}
}

function hideTip() {
if (document.layers) {
        document.tooltip.visibility = "hide"  
}

if (document.all) {
                document.all.tooltip.style.visibility = "hidden"  
}
}
//-->
</SCRIPT>
</HEAD>


<BODY BGCOLOR="#FFFFFF">

<!--2. <BODY></BODY> 부분에 아래의 스크립트를 복사해 넣으세요-->

<DIV ID="tooltip" STYLE="position:absolute; visibility:hidden; z-index:10"></DIV>

<UL>
        <LI><A HREF="#" ONMOUSEOVER="doTooltip(event,'비지스는 가장 유명한 자바스크립트 소스 뱅크 입니다. 매일매일 친절한 설명과 함께 업데이트 되는 소식들 기대해 보세요')" ONMOUSEOUT="hideTip()">비지스</A></LI>

        <LI><A HREF="#" ONMOUSEOVER="doTooltip(event,'한메일넷으로 더 많이 알려진 웹메일 전문 사이트죠. 현재는 다음커뮤니케이션으로 바뀌었습니다')" ONMOUSEOUT="hideTip()">한메일넷</A></LI>
</UL>