Add title attributes to hotspots in an image map
How to add short descriptions to parts of an image
It is useful to have items in images (group shot of people) named or described as the mouse moves over the image. This can be done using an image map, where the image forms the basis for the map, and hotspots mark the areas (or people) that have names/descriptions applied.
Thsi article describes using the title tag for this description - titles should be kept short as their display in a browser is not always predictable.
If a longer description is needed, then a flyout may be more useful.
This example uses a hotspot created on the box labelled "Web Faqs" in the image above.
First, create the hotspot. The easiest way is to use the hotspot icon on the picture toolbar. Use View->Toolbars->Picture to display the toolbar.
- Click on the image to select it.
- Click the hotspot icon - there are three to choose from: rectangular, circular and polygon. The polygon can be used to make irregular shapes.
- Draw the hotspot and release the mouse button. This open the hyperlink dialogue.
- Type in
javascript:; (Do not click OK, yet). This creates a valid link that does nothing. The hotspot is now ready for the title attribute.
- Click on the Screen Tip button and type in the wording that should show when the hotspot is hovered, and click OK. Note that alt text is added to the area tag - this has to be changed to a title attribute.
- Click OK to close the hyperlink dialogue.
- In Split View, find the area tag corresponding to the hotspot.
- Change the
alt="whatever" to title="whatever"
- If the alt attribute was not produced (the Screen Tip button may not be in the vesion of FrontPage/Expression Web being used) type in the complete title attribute - in this example:
<area title="web faqs pages" coords="477, 19, 529, 42" href="javascript:;" shape="rect" />
The code for the image map should look similar to this:
<map id="FPMap0" name="FPMap0">
<area title="web faqs pages" coords="477, 19, 529, 42"
href="javascript:;" shape="rect" />
</map>
<p><img alt="sitemap" src="../images/fp/998566610_navigation.jpg"
usemap="#FPMap0" height="93" width="600" /></p>
Repeat for other hotspots as required.