Style Your Imagemap Tooltips
By Stephen Bucaro
Tooltips are the text that pops up when you move your mouse pointer over an image,
menu, or button that gives you a little information about that item. Tooltips can be
useful for providing an object's nomenclature for selling things or for educational
purposes. shown below is an example of tooltips used to identify the ports on the back
of a Gateway 6520G2 notebook computer.
Creating tooltips is extremely easy. First you must define non-overlapping
rectangular areas in the image where you want a tooltip to appear. To do this, load
your image into Windows Paint program or your favorite graphics editor, then record the
pixel locations of the upper-left and lower-right corners of each area. You do this by
positioning your mouse pointer over the location and reading the x-y coordinates on the
Paint programís status bar.
Next, code an imagemap. The code for the imagemap used with the Gateway
notebook computer example is shown below.
<area shape="rect" coords="23,37,119,45" alt="PC Card Slot" href="#" />
<area shape="rect" coords="157,47,169,56" alt="Firewire" href="#" />
<area shape="rect" coords="178,47,220,53" alt="Media Port" href="#" />
<area shape="rect" coords="252,35,273,56" alt="USB Port" href="#" />
<area shape="rect" coords="284,40,303,56" alt="Ethernet" href="#" />
<area shape="rect" coords="305,40,323,56" alt="Modem" href="#" />
<area shape="rect" coords="330,49,378,56" alt="USB Port" href="#" />
The first line of the code is a map tag and it contains a name attribute.
Following that are area tags that define areas of the image. Each area tag
contains three attributes; the shape attribute defines the area to be a rect,
the coords attribute is where you enter the pixel locations of the upper-left and
lower-right corners of the area, the alt attribute is where you enter the text
of the tooltip that you want to appear when the user moves the mouse pointer over the area.
The last thing you need to do is put the code to display the image. Shown below is
the img tag used to display the Gateway notebook computer image.
<img border="0" width="414" height="80" src="gw6520G2.jpg" usemap="#ports1" />
The img tag contains a usemap attribute where you assign the
name of the imagemap (prefixed with a "#" character).
That's all there is to it. If you're satisfied with these results, you're finished.
The problem with this method is that the style of the tooltip is defined by the
client operating system, there's no way (that I know of) to style the "alt" portion
of the imagemap area tag.
Now I'll show you another way to code an imagemap that gives you control over the
appearance of your tooltips, as in the example shown below.
PC Card Slot
This method requires a bit of style code and a bit of Java Script code, but
you don't need to know anything about Cascading Style Sheets or
Java Script programming to use this example. I'll keep it simple and explain only generally how the code
works and in detail only those specific lines you need to customize for your application.