JavaScript Made Easy: Free JavaScripts Tutorials Example Code

Metachecker.net

|

FontsMadeEasy.com

|

RankChecker.net

Learn Java Script Today

|

Over 5000 Free Fonts

|

|

Javascript Forum

|

Other Javascript Resources

|

JavaScript Basics

Inserting Javascript

Complete Tutorial

Advance DHTML Tutorial



Text Link/Image Map Tooltip Script

Javascripts 2000

Roll mouse cursor over text then over different parts of the image for Tooltip example!!
Insert into <HEAD>


Insert into <BODY>
<script> if (!document.layers&&!document.all) event="test" function showtip(current,e,text){ if (document.all){ 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> <a href="http://dynamicdrive.com" onMouseover="showtip(this,event,'Visit Dynamic Drive for DHTML Scripts!')" onMouseout="hidetip()">Dynamic Drive</a>

Other Options
Giving text links a tooltip: Having done the above, giving any text link a "tooltip" is a snap. Simply add the following code to the <a> tag of the link in question: onMouseover="showtip(this,event,'Visit Dynamic Drive for DHTML Scripts!')" onMouseout="hidetip()" with the part in red representing the text you want shown inside the tip. An example would be: <a href="http://dynamicdrive.com" onMouseover="showtip(this,event,'Visit Dynamic Drive for DHTML Scripts!')" onMouseout="hidetip()">Dynamic Drive</a> If the text inside the tooltip is very long, and you wish to "break it" (like the tip for Techweb above), simply add the <br> tag to the text. For example: onMouseover="showtip(this,event,'Visit Techweb for the latest happenings<br>in the computer sector ')" onMouseout="hidetip()" Giving image map a tooltip: The process for giving your image map a tooltip is the exact same as for text links. Simply insert the same code after the href attribute of each image spot. For 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"> Note to Frontpage 98 (and other similar html editor) users: In Frontpage 98, an image map is represented as a "bot", meaning that when you view the source of the image map within the editor, the href attribute of the individual spots are not revealed. This is a problem, since the tooltip code has to be inserted right alongside the href attribute. To get around this, open the file using a simple text editor. The href attribute will be present, allowing you to insert the tooltip script.