Imagemaps are images on html documents that have some areas within them that can be clicked(or that accept other kind of input). These areas inside the image are called hotspots. Imagemaps come in two varieties, they can be client side or server side. Client side image maps use html code inside your page. In server side there're also text files stored on the server that contain the map information. On this tutorial we are going to discuss client side imagemaps.
To make parts of the image clickable we need to define regions within it. These regions can be rectangles, circles, or polygons. The first step is to find the coordinates of the areas that we want to use. This can be done with a program like photoshop or another graphics program that show image coordinates. Lets see the following example.
<MAP NAME="samplemap">
<AREA SHAPE="Circle" HREF="http://www.devpapers.com" COORDS="72,116 40">
<AREA SHAPE="rect" HREF="http://www.devpapers.com" COORDS="158,134 260,212">
<AREA SHAPE="polygon" HREF="http://www.devpapers.com" COORDS="305,98 321,35 382,16 431,62 416,124 353,144">
</MAP>
<IMG USEMAP="#samplemap" SRC="image.gif" BORDER="0"> |
As you can see we have defined three areas on the image. The circle is defined by the center coordinates 72,116 and the radius 40. The rectangle is defined by two corners 158,134 and 260,212. The polygon is defined by all its points coordinates. Finaly, on our img tag we specify the source of the imagemap with USEMAP="#samplemap", the name of our map.
