Tool Tips for Hot Spots

How to give each HotSpot on an ImageMap its own ToolTip: step-by-step instructions with some basic explanations.

Let's use the image map on my home page as a case study. You can examine the HTML code by choosing "View Code" off your browser's menu while that page is displayed.

This is what it looks like in FP98 HTML window after creating the imagemap by placing the hotspots on the pic and assigning links to them:

note: there are 7 hotspots.
note: the 'alt' tag applies to the entire image.
note: this particular imagemap is centered.

This is it what it looks like if the .htm file is opened in Notepad ( notice that FP98 hides stuff from you! ):

<MAP NAME="FrontPageMap">
<AREA SHAPE="CIRCLE" COORDS="178, 154, 9" HREF="discPolitBlad_welc.htm">
<AREA SHAPE="CIRCLE" COORDS="177, 136, 12" HREF="Yin_Yang.htm">
<AREA SHAPE="RECT" COORDS="154, 98, 202, 127" HREF="Friendsfamily.htm">
<AREA SHAPE="CIRCLE" COORDS="55, 72, 47" HREF="links.htm">
<AREA SHAPE="RECT" COORDS="3, 165, 116, 260" HREF="computers.htm">
<AREA SHAPE="RECT" COORDS="222, 186, 330, 249" HREF="discPolitBlad_welc.htm">
<AREA SHAPE="RECT" COORDS="273, 92, 351, 168" HREF="Gallery.htm">
</MAP>
<a href="_vti_bin/shtml.exe/index.htm/map">
<img ismap usemap="#FrontPageMap"
border="0" height="264" alt="MeMntg1_1.gif (38695 bytes)"
src="MeMntg1_1.gif" width="366">
</a>

Note: FP hides a whole lot of stuff from you.
Note: the imagemap has a default name: 'FrontPageMap'.

HOW To give each hotspot its own tooltip:

To give each hotspot its own tooltip, we have to now manually modify this code, but _not in FP_ html editor ( I prefer Notepad, works just fine for this. ). These changes will not be recognized by FP and it'll drop them, so the whole block of code needs to be marked as "custom-HTML-dont-mess-with-it". And FP has a webbot to do that. Here's how:

STEP #1:
bracket the block of code above with these two lines:

goes just above, and

goes just below.

Now we insert tags which will result in tooltips for each hotspot. Here's how:

STEP #2:
in each '<AREA SHAPE="...>' line ( which are hidden in FP! ) insert these two tags:
'alt="ToolTipText" title="ToolTipText"'
It doesn't matter where in the <AREA...> statement these tags appear, I like to put them right after the 'AREA' keyword.

Now, to tidy up...
STEP #3:
1. Change the FP's default imagemap name from 'FrontPageMap' to something that describes this particular map, like 'HomePageMap'.
2. There are two 'alt' tags which apply to the entire image. If you haven't done it yet, replace both alt tags with something meaningful. This will be the tooltip displayed when the cursor is over the image but not over one of the hotspots. The two lines where these 'alt' tags appear are:
'src="MeMntg1_1.gif" alt="MeMntg1_1.gif (38695 bytes)" border="0" startspan -->'
in the top half of the code, and
'border="0" height="264" alt="MeMntg1_1.gif (38695 bytes)" '
in the bottom half.

Save the file! All done!

Here's how it looks all done: ( new and changed code is bold )



<MAP NAME="HomePageMap">
<AREA alt="Political Bladder" title="Political Bladder" SHAPE="CIRCLE" COORDS="178, 154, 9" HREF="discPolitBlad_welc.htm">
<AREA alt="Yin Yang" title="Yin Yang" SHAPE="CIRCLE" COORDS="177, 136, 12" HREF="Yin_Yang.htm">
<AREA alt="Friends&Family" title="Friends&Family" SHAPE="RECT" COORDS="154, 98, 202, 127" HREF="Friendsfamily.htm">
<AREA alt="WWW Links" title="WWW Links" SHAPE="CIRCLE" COORDS="55, 72, 47" HREF="links.htm">
<AREA alt="Computers / My Work" title="Computers / My Work" SHAPE="RECT" COORDS="3, 165, 116, 260" HREF="computers.htm">
<AREA alt="Political Bladder" title="Political Bladder" SHAPE="RECT" COORDS="222, 186, 330, 249" HREF="discPolitBlad_welc.htm">
<AREA alt="Art Gallery" title="Art Gallery" SHAPE="RECT" COORDS="273, 92, 351, 168" HREF="Gallery.htm">
</MAP>
<a href="_vti_bin/shtml.exe/index.htm/map">
<img ismap usemap="#HomePageMap"
border="0" height="264" alt="HomePageMap" src="MeMntg1_1.gif" width="366">
</a>


Home Computers

Hit Counter