Image Maps

Any Image can be turned into a clickable link by surrounding it with HTML anchor tags. An Image map however contains multiple links within the same image.

Creating an Image Map

There are two types of image maps:

• Server side- Rely on cgi scripts on the server and are more difficult to set up, and are not really used anymore.
• Client side- These are interpreted by the users browser and are relatively easy to set up and run faster than server side maps. These are the only ones we will consider.

An image map consists of two components:

• The Image- This can be any GIF image.
• The HTML for the links and image sections.- This is usually created by a graphic program but can be done manually with a little trial and error.

For this example the starting image is a simple menu image with text for the home page and the contact page. We are going to turn the text on the image into links.

It should be noted that the image isn't changed by the process. Meaning that any existing image can be used to create an image map. The image map process just uses the image to calculate the co-ordinates of the image hotspots. Here is the Image:

The image map toolbar is on the bottom of the left toolbar and has an arrow pointing to the  left and and drop down selection arrow:

Click the toolbar and select the image  map shape (I used a square) Then use it to outline the part of the image that will act as the link (here the text-home)

Then click the image toolbar icon again. This will confirm the selection.

Now click inside the selected area it should have a border around it (see below) then right click and select properties.

A image map text box appears. Enter the text that will be displayed when the visitor hovers over the link and the URL of the link. I have used a relative link in the example below.

If you use the full url with the http:// .. then you may find that it doesn't all fit in the text box. If that happens enter as much as possible and remember to edit the generated html code manually.

Repeat the above process for the contact link.

Click ok and its done. Now Click export the Create html checkbox should be automatically ticked and then give it a name (here menu) and click save.

Two files are created an .gif file ( the image)  and an HTML file ( the image map).

Image Map HTML

Here is the HTML generated.

I've highlighted the contact link in yellow to show that it isn't complete. You need to manually edit this to correct it. The Home page link is shown in green, and is ok.

It is the COORDS attribute which picks out the image hotspot, the ones for the contact I've highlighted in purple.

The 12,51 is 12 pixels horizontal (x) and 51 pixels vertically measure from the top left corner of the image and 97,73 is 97 pixels horizontal (x) and 73 pixels vertically measure from the top left corner of the image marking the upper left and lower right corners of the rectangle.

Here is the result (opens in another window). If you place the mouse over the text you will see that they are in fact links:

Web www.build-your-website.co.uk

• Adding Images/Pictures to Your Website
• Add Multi-Media (Audio and Video) to Your Website