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">
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
deathstar.jpg and the map information is in the map definition
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>
namewith the name of this map (e.g.,
methodwith the shape of the region to be mapped (i.e.,
- 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.
coordinateswith the x and y coordinates that mark the parts of the image that delimit the region.
urlwith the URL of the page that the region leads to.
NOHREFattribute 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
--> at the end are comments and are not
read by the browser.
Last modified on April 21, 2005.