Map <map>

Block-level/Inline?:Neither (not displayed). Should contain one or more <area />s.
Empty?:No

A <map> element is used to define a client-side image map. A client-side image map is different from a server-side image map since, instead of passing the locations of mouse clicks back to the server, the client processes the clicks according to the data in the <map> element, thus avoiding unecessary transmission delay to and from the server and extra work on the server. An href in an area allows you to jump to other resources (webpages, images, or whatever). See screen coordinates for more information on screen coordinates.

Basic example

bear google.com google.com google.com
bear code

Explanation:

  • A map contains one or more areas. It is used/associated with an image by setting the image's usemap attribute.
  • The name (and possibly id) must match between the usemap attribute of the image and the name of the map. Remember to include the '#' for the usemap attribute to let the browser know it's looking for a name/id.
  • For maximal compatibility, use both name and id. They must match.
  • See <area /> for a description of how that shape and coords work (not cords-- short for "coordinates").
  • The area pointed at by the blue arrow is an error- one area or the other will take effect when there's an overlap.

Back to Knowledge Dump