Image Map - Basics

Rectangle Circle Polygon Default || Rollover 1 Rollover 2 Dynamic Hotspots 1 Dynamic Hotspots 2 Dynamic Hotspots 3

Normally you use one image with one link, with an imagemap you can have multiple links within any image of your choice. Areas within the image are designated as Hotspots which then act as a hyperlink.

Knowing the height and width of the image that you are going to use is important when deciding the size and shape of the hotspot(s)
Siting the hotspots will depend on the contents of the image and will be the main infuence with this decision, a square object, circular object, or a multi-sided object.

To find the co-ordinates where the shape will be, load the image as normal using the IMG tag and add the attribute isMap to the image tag.

IsMap shows the co-ordinates of the cursor within the image in the status bar. The image tag at this stage also has to be enclosed within <A> tags, which are deleted along with isMap once you have your co-ordinates.

<a href="#null">
<img src="image.jpg" border=0 width="200" height="200" isMap>
</a>

Move your cursor over the image below and look in the status bar, this is a quick and simple way of getting your co-ordinates.

Or you can load the image into an image editor with its cursor position function and write down the co-ordinates.

To use an image as an image map you include the attribute usemap and assign it a name usemap="#mapname".

Enter the opening MAP tag and name it the map name that you gave usemap in the img tag.
Enter your AREA tag(s), and finally the closing MAP tag.

Within the AREA tag is where you state the SHAPE and the CO-ORDINATES of the hotspot you want to create.
You also include your link information, your ALT message, and any onmouse events.

For each shape or hotspot you must have a separate AREA tag, this allows you to have a mixture of different shapes.

Rectangle

To create a rectangular or square Hotspot the co-ordinates are stated as follows:

shape="rect" coords="x1,y1,x2,y2"

This is:

x1,y1 = top left of the rectangle
x2,y2= bottom right of the rectangle

The image below has four hotspots, for the examples on this page I have outlined the hotspots with a red dotted line.
Click the hotspots in the image or hold your mouse there for a moment to see the ALT message.

Circle

Requires the center point and radius (x,y radius).
x,y is the position of the center of the radius

Polygon

Requires the coordinate of each vertex (point (x1,y1)) of the area you want to define.
You can define up to 100 points: POLY (x1,y1,x2,y2, etc,etc).

The polygon allows you to trace round objects within your images.
In the image below I have made the head of the alien one hotspot and the alien body a second hotspot.

</map>

Default

DEFAULT(x1,y1,x2,y2)
Specifies the pixel locations for the entire image

As well as having hot spots in the image the rest of the image can be also be used as a link.
The default area tag must be entered last in the map tags otherwise it will override any other hotspots.