Client-Side Image Maps

Bringing Image Maps to the Client-Side

To make an image map, you simply divide an image into different links...like in a navigation bar for example. You simply need to add a few tags and know where to place your image's hotspots [links] and you are set.

Here is an example of the code involved:

client-side map

<map name="my_image_map"> <area shape="rect" href="yellow.html" coords="20,20,70,60"> <area shape="rect" href="red.html" coords="90,20,140,60"> <area shape="rect" href="blue.html" coords="20,80,70,120"> <area shape="rect" href="green.html" coords="90,80,140,120"> <area shape="default" href="black.html"> </map>

It works like this...
You start with an average image.

<IMG SRC="PICTURE.GIF" WIDTH=200 HEIGHT=200 border=0>
From there you add a link to your soon to be image map. It goes like this: usemap="#imagemap"
Then, add the two together... <IMG SRC="PICTURE.GIF" WIDTH=200 HEIGHT=200 border=0 usemap="#imagemap>

Next you have to make the links inside that image of yours [the image MAP]. You do this with the following code...

In each of the href="something.html", you make a link to a target that you want for the area described inside the coords. In the coords="33,33,44,44" section you put the number of pixels from the corner the edges of your rectangle will be [in this case, I am using a rectangle as an example]. You may wonder how to get the coordinates. In any decent graphics program such as Paint Shop Pro, etc there is a set of 2 numbers that change as the cursor moves on your image. You move the cursor to the bottom left corner of the peice of the image you want the link to be in and write down the numbers. Then write down the numbers from top right part of your link area. You take the first two and put them, first like 33,33 and then the second set 44,44 and turn them into a whole string 33,33,44,44. And their ya go.

Client Side Image Map Example

Thats it... Just remember to check your code when you are done.

Back to the front...