Image Maps
Image maps are images that allow you to link different parts of an image to seperate HTML files. They are useful in many different situations.

There are a few tags you need to know and understand before you can make a image map, they are all listed below, along with a detailed explaination of how we made our image map.

These are all client-side image maps, server-side image maps require cgi and are slower when retrieving the page. Client-side maps are supported by most browsers 2.0 and above, so only a small percentage of the web will not be able to view these image maps.

TagExplanation
<MAP> </MAP>Tells the browser that the following code is for an image map.
<IMG>Used to insert images into web pages.
<AREA>This tag is used to define the coordinates of an image map.
Examples

First off, we will show you how we made the image map seen on our page.

This is the code we used to make the above image map:

<IMG SRC="imagemap.gif" USEMAP="#imagemap" BORDER=0>
<MAP NAME="imagemap">
<AREA SHAPE=RECT COORDS="129,5,170,24" HREF=java.html>
<AREA SHAPE=RECT COORDS="185,5,241,24" HREF=html.html>
<AREA SHAPE=RECT COORDS="67,26,129,42" HREF=links.html>
<AREA SHAPE=RECT COORDS="146,26,221,42" HREF=credits.html>
<AREA SHAPE=RECT COORDS="238,26,302,42" HREF=search.html>
<AREA SHAPE=RECT COORDS="11,45,49,59" HREF=cgi.html>
<AREA SHAPE=RECT COORDS="71,45,198,59" HREF=other.html>
<AREA SHAPE=RECT COORDS="215,45,360,59" HREF=try.html>
<AREA SHAPE=default HREF=index.html>
</MAP>

Here is a detailed explaination of exactly what each of those tags does:

<IMG SRC="imagemap.gif" USEMAP="#imagemap" BORDER=0>
IMG places the image on the page and USEMAP gives the name of the image map so you can place multiple maps on a page, and they will still work correctly.

<MAP NAME="imagemap">
This tells the browser what image to use for this image map, this is the same as the USEMAP attribute in the IMG tag.

<AREA SHAPE=RECT COORDS="129,5,170,24" HREF=java.html>
These are what distinguish what areas of the image link to certain HTML documents.

<AREA SHAPE=default HREF=index.html>
This tells what HTML document users will receive if they click on an area of the image map that is not defined.

If any two areas are ever overlapped, the link followed will always be that of the first area you listed in the image map's code.

Now that you understand what each part of image map does, you will learn how to define areas of your image.

First off, you need to know how to find the coordinates of a certain part of your image. To do this, open your image in your graphics program and place your cursor over any area of the image, on the bottom of your screen you will see a set of numbers, a comma, and another set of numbers. Those define the coordinates of your image, width by height.

There are three shapes you can use to distinguisht he "hot spots", they are rectangles, circles, and polygons.

Rectangles
The first shape you can use is a rectangle, an instance would be one image with several words used as clickable areas, like the image below.

To map a rectangle, you simply find the coordinates of the Upper-left corner and the Lower-right corner of the rectangle. This is the code we would use to make each word a hot spot:


<IMG SRC="imagemap-rect.gif" USEMAP="#rectangle-imagemap" BORDER=0>
<MAP NAME="rectangle-imagemap">
<AREA SHAPE=RECT COORDS="19,7,124,40" HREF=index.html>
<AREA SHAPE=RECT COORDS="133,4,211,38" HREF=java.html>
<AREA SHAPE=RECT COORDS="10,48,117,76" HREF=html.html>
<AREA SHAPE=RECT COORDS="128,46,245,79" HREF=http://www.yahoo.com/>
<AREA SHAPE=default HREF=index.html> </MAP>

That produces this image map:

Circles
Sometimes, the section of an image you need to use as part of the image map is a circle, like in the image map below.


Mapping circles is fairly easy, and it only requires three numbers, the coordinates of the exact center of the circle, and the radius of the circle in pixels. If you are having troublt finding these, look at this diagram. After you have have determined these numbers, you are ready to make the image map. The code for the image map at the beginning of this section looks like this:


<IMG SRC="imagemap-circle.gif" USEMAP="#circle-imagemap" BORDER=0>
<MAP NAME="circle-imagemap">
<AREA SHAPE=CIRCLE COORDS="60,61,59" HREF=index.html>
<AREA SHAPE=CIRCLE COORDS="247,62,59" HREF=java.html>
<AREA SHAPE=default HREF=index.html>
</MAP>

As you can see, SHAPE attribute has changed from rect to circle, this is to let the users browser know that it is mapping a circle. The coordinates of the center of the circle always appear first, followed by the radius.

Polygons

The third and final shape you can use to map an image is a polygon. It is used to make a hot spot out of a shape with more than four sides, like the image map below:

To make a polygon hot spot, you need to find the coordinates of all corners of the image. The first and last have to be the same, or your image map will not work. here is the code for the above image map:


<IMG SRC="imagemap-poly.gif" USEMAP="#poly-imagemap" BORDER=0>
<MAP NAME="poly-imagemap">
<AREA SHAPE=POLY COORDS="71,4,165,4,233,69,233,166,165,234,71,235,7,169,7,75,71,4" HREF=index.html>
<AREA SHAPE=RECT COORDS="278,90,381,140" HREF=java.html>
<AREA SHAPE=default HREF=index.html>
</MAP>

You can use differently shaped areas, like in the example above, in your image map, simply change the SHAPE attribute to the one you want and use the correct amount of coordinates.