Client-side Image Map

• Based on the user clicking part of an image, the browser retrieves information from a new URL.
• <IMG SRC="name.gif" alt="description of image" border=0 usemap="#mapname">
  
  • The image source tag must include the usemap attribute.
  • The usemap attribute is followed by the name of the map.
  
  
• <map name="mapname">
  <area shape ="rect" coords=x1,y1,x2,y2 href="URL">
  </map>
  • Within the opening <map> tag, include the name attribute so that the usemap tag will have instructions to which to refer.
  • Between the opening <map> tag and closing </map> tag, the various areas of the image map are defined by the <area> tag
  • Within the area tag, include three important attributes.
    • Shape:
      • rectangle="rect"
      • circle="circle"
      • polygon="poly"
    • Coordinates (in pixels)
      • rectangle: left-x, top-y, right-x, bottom-y
      • circle: center-x, center-y, radius-x
      • polygon: x1,y1,x2,y2, x3,y3...
    • HREF="URL"
  
  
• Example:
  
  
  <IMG SRC="web_development.gif" alt="Infoeagle/Web Development Resources" border=0 usemap="#develop">
  
  <map name="develop">
  
  <area shape="rect" coords="0,0,82,51" href="http://www.bc.edu/iehome/">
  
  <area shape="rect" coords="82,0,459,51" href="http://www.bc.edu/cwis/web_development.html">
  
  </map>