Serving California Since 1993.

Imagemaps

What an ImageMap does for your Web Page(s) is allow you to create a single large image and have sections of it link to other pages within your Web Site.

Here's how to set up the HTML page to run a client side map.

Next you want to setup your hot spots to click. The hot spots are calculated based on the upper left and lower right sets of coordinates, using the actual pixels as increments, for each "zone" on the image.

Now in your HTML define the map name and hotspots with a tag that will look something like this:

<map name = "map">
<area shape = "rect" coords = "0,0,78,21" href = "destination1.html">
<area shape = "rect" coords = "83,0,162,21" href = "destination2.html">
<area shape = "rect" coords = "166,0,245,21" href = "destination3.html">
<area shape = "rect" coords = "248,0,328,21" href = "destination4.html">
</map>

• "shape" (usually 'rect' but can also be 'circle' or 'ploy')
• "URL" (the link that should be made from that particular hot spot)
• "coordinates" (the numerical coordinates of the upper left and lower right corners of the hot spot)

NOTE: the coordinates are in a comma-separated list with NO SPACES. The HREF is the URL or filename the hotspot defined by the 'coords' should link to.

In the HTML where you want the image to appear, include an IMG SRC tag like this:
<img src="images/filename.gif" border=0 usemap="map" ismap>

Use your image file name instead of filename.gif. Assuming you've called your map (defined in the previous step) "map", you can leave the USEMAP tag as it appears. Save the HTML file and upload it to the server to test it.