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.

• Trellian ImageMapper (Advert)
  Trellian Image Mapper is the quickest way to create image mapped images for your website. Full support for hyperlinked rectangles, circles and even polygon regions is provided and you can import all your current image maps. After you have created your image map, Trellian Image Mapper will generate the required HTML code ready to be pasted directly into your favorite HTML editor. You can even use the built-in image map previewer.
  
  
• Web Hotspots (Advert)
  Software for creating Client-Side Imagemaps.