Skip Navigation | Groups

This site uses cookies- for more information see the Cookie Policy | Continue

 

Add title attributes to hotspots in an image map

How to add short descriptions to parts of an image


web faqs pages Navigation View with HotSpot

 

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.

This 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 opens 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 copied to a title attribute.
  • Click OK to close the hyperlink dialogue.
  • In Split View, find the area tag corresponding to the hotspot.
  • copy the alt="whatever" to title="whatever" within the area tag.
    • If the alt attribute was not produced (the Screen Tip button may not be in the version of FrontPage/Expression Web being used) type in the complete alt and title attributes - in this example:
      <area title="Web Faqs pages" alt="Web Faqs pages" coords="477, 19, 529, 42" href="javascript:;" shape="rect" />

The code for the image map should now be similar to this:

<map id="FPMap0" name="FPMap0">
<area title="Web Faqs pages" alt="Web Faqs pages" 
coords="477, 19, 529, 42" href="javascript:;" shape="rect"/>
</map>
<p><img alt="sitemap" src="/images/fpa/998566610_navigation.jpg" 
usemap="#FPMap0" height="93" width="600" /></p>

Repeat for other hotspots as required.