How To Make An Imagemap

Chapter 2: Client-Side Imagemaps

A Client-Server Imagemap
(Actually works!)

• The first thing to note is the USEMAP attribute in the IMG tag. In here, I tell the browser which MAP to use for that image. I need to do that because a single HTML page could contain more than one imagemap.
  
  
• Next, the MAP tag. You should notice that the NAME attribute matches the earlier USEMAP attribute.
  
  
• Within the MAP tag, I give the coordinates of each clickable region within the image, using the AREA tags:
  
  
  • The SHAPE can be rect (or rectangle), to define a rectangular region. In this case, COORDS has four numbers, the top left X,Y coordinate, and the bottom right X,Y coordinate of the rectangle.
    
    
  • The SHAPE can be poly (or polygon), to define a polygon region. In this case, COORDS can contain as many pairs of X,Y coordinates as I like, each pair giving the X,Y coordinate of one of the polygon's vertices.
    
    
  • The SHAPE can also be circle. In this case, COORDS gives the X,Y coordinate of the center, followed by the radius of the circle.
    
    
  • Although not shown in the above example, I can also create "holes" in regions where a click performs no action. I can do this by substituting NOHREF for HREF="...etc..."
    
    
  • Also not shown in this example is what happens if two regions overlap. In this case, the first AREA covering a particular coordinate takes precedence.
    
    
  • Finally it is worth noting that two or more AREAs can share the same HREF destination. This allows you to create maps with composite shapes or non-contiguous regions. For example, if I presented a map of North America, I might make the 48 contiguous states one polygonal region with the destination usa.html, and Alaska a separate polygonal region also with a destination of usa.html.