How do I make client-side imagemaps?

Client-side imagemaps are clickable images that don't require a CGI program to make them work. Instead, the browser interprets the imagemap based on HTML tags. Because they are faster and more reliable, client-side imagemaps have largely supplanted server-side imagemaps.

To set up a client-side imagemap, create the image that you want to use as a map. Then, in the HTML document where you want the imagemap to appear, enter the following HTML tag: <IMG SRC="image" USEMAP="mapname"> Replace image with the URL of the image that you want to use as a clickable image. Replace mapname with the name of the map definition (described below). For example, if the name of your image is deathstar.jpg and the map information is in the map definition named stationmap, you would type: <IMG SRC="deathstar.jpg" USEMAP="#stationmap">

Use a program like Photoshop, xv, or Paintshop Pro to determine the coordinates (in pixels) of the borders of your regions. Once you have accomplished that, you will need to specify what regions of the image correspond to what URLs. Create the map definition in the following format: <MAP NAME="name"> <AREA SHAPE="method" COORDS="coordinates" HREF="url"> <AREA SHAPE="method" COORDS="coordinates" HREF="url"> <AREA SHAPE="method" COORDS="coordinates" HREF="url"> <AREA SHAPE="method" NOHREF> </MAP>

• Replace name with the name of this map (e.g., stationmap).
  
  
• Replace method with the shape of the region to be mapped (i.e., rect, circle, or poly).
  
  
  • rect: The simplest method, the coordinates define the x,y of the upper left corner and the coordinate of the lower right corner, in that order.
  • circle: The three coordinates for a circle represent the x,y coordinates for the center of the circle, and the radius of the circle in pixels, in that order.
  • poly: Indicates non-rectangular polygons. Each x,y coordinate is a vertex of the polygon, and up to 100 vertices can be defined.
  
  
• Replace coordinates with the x and y coordinates that mark the parts of the image that delimit the region.
  
  
• Replace url with the URL of the page that the region leads to.
  
  
• The NOHREF attribute indicates that the coordinates defined don't lead to a URL. You should include this attribute in the last line of the map definition.

The browser evaluates regions based on the order they appeared in the map file. So, if you have a region within a region, then the smaller region would have to appear first in the map definition to be expressed, for example: <MAP NAME="shapes"> <!-- Triangle in the center --> <AREA SHAPE="poly" COORDS="50,50,50,70,70,70" HREF="oops.html"> <!-- Circle around triangle --> <AREA SHAPE="circle" COORDS="60,60,20" HREF="http//bogus.url.com/~scooby/"> <!-- Square around circle --> <AREA SHAPE="rect" COORDS="20,20,100,100" HREF="loopy/crazy.html"> <!-- Part of the map that doesn't go anywhere --> <AREA SHAPE="rect" COORDS="0,0,120,120" NOHREF> </MAP>

Note: The lines that have <!-- before and --> at the end are comments and are not read by the browser.

Comments/Questions/Corrections