An image map makes areas of an image clickable by finding the sets coordinates that make up the area you want as a link, and assigning a hyperlink command to it. To make a clickable area you will need a set of coordinates. To find the coordinates of an image use a program like Microsoft Paint. In MS paint it is simple as the coordinate of where you are holding your cursor will appear in the status bar on the bottom right of the program window. I'll start with an example. In the below example the top and left heart are links: 
Now for the code:
And now to break it down... Map Name. Name your image map. Area Href. To have more than one clickable area on an image, like in the above example, repeat this tag as appropriate. Shape & Coords. Your clickable area can be 3 different shapes. A rectangle only requires two coordinates either top right and bottom left or vice versa. A circle only requires one set of coordinates (the centre) plus a radius (e.g X,Y,R). The last shape is any shape really, a polygon, so if you have a really weird shape, or even a simple triangle, choose polygon and use as many coordinates as it takes. You must separate each pair of coordinates with a space (e.g X,Y X,Y). Alt. There are 2 alt attributes in this code, the first is the text which will appear when you place your mouse over the hyperlinks e.g "Click Here for Art". The second is the alt text for the static image e.g "Header Logo". Img Src. Enter the file name of the image you wish to use as the image map. Usemap. The value entered in this attribute must be the same as the map name. And there you have it, a working image map! |
Tutorials © Samantha Coaker
