DHTML Tooltip Script- Developer's View

<html>
<head>
<script type="text/javascript">

/***********************************************
* Text Link/Image Map Tooltip Script- (c) Dynamic Drive (www.dynamicdrive.com)
* This notice must stay intact for use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

if (!document.layers&&!document.all&&!document.getElementById)
event="test"
function showtip(current,e,text){

if (document.all||document.getElementById){
thetitle=text.split('<br>')
if (thetitle.length>1){
thetitles=''
for (i=0;i<thetitle.length;i++)
thetitles+=thetitle[i]
current.title=thetitles
}
else
current.title=text
}

else if (document.layers){
document.tooltip.document.write('<layer bgColor="white" style="border:1px solid black;font-size:12px;">'+text+'</layer>')
document.tooltip.document.close()
document.tooltip.left=e.pageX+5
document.tooltip.top=e.pageY+5
document.tooltip.visibility="show"
}
}
function hidetip(){
if (document.layers)
document.tooltip.visibility="hidden"
}

</script>
<div id="tooltip" style="position:absolute;visibility:hidden"></div>

</head>

<body>
<!--Text Link tooltip example-->
<a href="http://dynamicdrive.com"
onMouseover="showtip(this,event,'Visit Dynamic Drive for
DHTML Scripts!')" onMouseout="hidetip()">Dynamic Drive</a>

<!--Image Map tooltip example-->
<MAP NAME="FrontPageMap0">
<AREA SHAPE="RECT" COORDS="57, 78, 135, 138"
HREF="http://www.webreference.com"
onMouseover="showtip(this,event,'Click here for
Webreference')"
onMouseout="hidetip()"><AREA SHAPE="RECT" COORDS="103,
10, 174, 75" HREF="http://www.wsabstract.com"
onMouseover="showtip(this,event,'Click here for Website
Abstraction')"
onMouseout="hidetip()">
</MAP>
<img src="imagemap.gif" width="188" height="173" border="0"
alt="imagemap.gif (14679 bytes)" usemap="#FrontPageMap0">

</body>
</html>


Please use the following image to link to Dynamic Drive. More images here.

Copyright © 1998-2004 Dynamic Drive. Read Terms Of Use here.