Free Tutorials » Blog Archive » » A Client-Side Image Map Example

A Client-Side Image Map Example

Posted by Mantasha in HTML on 06 28th, 2008 | no responses

The following example fragment draws together the various components of a client-side image map we discussed earlier in this section. It includes the <img> tag with the image reference and usemap attribute with a name that points to a <map> that defines four mouse-sensitive regions (three plus a default) and related links:

<body>
...
<img src="pics/map.gif" usemap="#map1" border=0>
...
<map name="map1">
  <area shape=rect coords="0,20,40,100"
      href="k_juice.html"
      onMouseOver="self.status='How to prepare kumquat juice.'
         ;return true">
  <area shape=rect coords="50,50,80,100"
      href="k_soup.html"
      onMouseOver="self.status='A recipe for hearty kumquat soup.'
      ;return true">
  <area shape=rect coords="90,50,140,100"
      href="k_fruit.html"
      onMouseOver="self.status='Care and handling of the native
                   kumquat.'
      ;return true">
  <area shape=default
      href="javascript:window.alert('Choose the cup or one of the
            bowls.')"
      onMouseOver="self.status='Select the cup or a bowl for more
                   information.'
      ;return true">
</map>

See Figure 7.7 for the results.