Client Side ImageMaps

Client-Side imagemaps allow you to place the map coordinates for your imagemap right into your html page to be handled by the browser of the person viewing your page. This side-steps the problem of making an external map file, and processing it on your server. However, it requires that your viewer have a recent version of a popular browser, which can handle client-side image maps.

The syntax is simple. You simply place the map information into a few html markup tags called "map" tags. The map tags contain the map coordinates and URLs to map them to. Then you place the img src tag calling the image map with an extra piece of information containing the name of the map tags you'd like it to use. Here's my guide to the Two minute Image Map.

Here is the image map stuff located within this page to direct the image map: 
<img border=0 src="http://www.he.net/~seidel/Map/glob.gif" usemap="#mymap">

<map name="mymap">
<area shape=circle coords="128,35,35" href="http://www.he.net/~seidel/Map/glob1.html">
<area shape=rect coords="8,93,121,161" href="http://www.he.net/~seidel/Map/glob2.html">
<area shape=poly coords="148,86,177,63,217,67,252,111,229,127,194,125,148,86" href="http://www.he.net/~seidel/Map/glob3.html">
<area shape=default href="http://www.he.net/~seidel/Map/globdflt.html">
</map>

The general syntax and methods supported are similar, but different than those used for map files.

<map name="mymap">
<area shape=circle coords="x_center,y_center,radius" href="URL1">
<area shape=rect coords="x1,y1,x2,y2" href="URL2">
<area shape=poly coords="x1,y1,x2,y2,x3,y3,x4,y4,x5,y5,...xn,yn" href="URL3">
<area shape=default href="URL4">
</map>

The URLs can be relative or absolute. I imagine the point method is supported, but I haven't tried it.

Back to Poor Person's ImageMapper | Chris Seidel