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.

<map name="ports1">
<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="#" />
</map>

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.

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.

 General Web Design
 HTML
 Graphics Design
 CSS Quick Reference
 Easy Cascading Style Sheets
 Java Script Quick Reference
 Easy Java Script Code
 Web Design Tools
 Coding Issues

RSS Feed