Images as Hyperlinks

Using an Image as a Hyperlink

As mentioned before you can use an image, like a button for example, as a hyperlink. If you want to put images on your pages as illustrations, perhaps your holiday photos, as these are likely to be comparatively large you could consider putting a thumbnail image (a smaller copy of the full size image) just big enough to show what it is, and make it into a hyperlink to a page containing the full size image. Then only if people want to see the full image will they have to wait for it to load.

Click me to see the full size image

The thumbnail image on the left is a hyperlink, click on it to see the full size image.

The normal code for the image hyperlink above would look like this:

<a href="harley_sketch.gif"><img src="sm_harley.gif" width="71" height="44" alt="Click me to see the full size image" border="0"></a>

Using one Image for Multiple Hyperlinks

As the name suggests an image map is a navigational object based on an image. Instead of an entire image being used as a hyperlink hotspot a single image can have many different hyperlinks associated with it. Additionally these hotspots can be different shapes according to the image used. One obvious example would literally be a map with hyperlinks in specific geographic locations. Alternatively you may have shaped button type images on a transparent background and you only want the buttons to be clicked, not the background as well.

England England Wales Northern Ireland Scotland

The image on the left is a simple image map. As your mouse pointer moves over the map it will change to the "click" finger when you are over a the hotspot defined in the HTML code. You should also see a description of the target.

England and Wales are rectangular hotspots, Northern Ireland is a circular hotspot and Scotland is a polygon hotspot. You can have more than one hotspot linked to the same target, here for example England has a large rectangle for the main part of the country and a smaller one for the south-west corner, underneath the hotspot for Wales. Depending on the browser version you are using you may see the outline of the hotspot appear when you click on one with your mouse.

(The hyperlinks are for demonstration purposes only and are not functional).

These are the HTML tags you will need to create an image map.

<map name="map_of_uk">

map lets the browser know that the following code is an image map. The name tag is to associate this set of map co-ordinates with the correct map image.

<area shape="rect" coords="0, 20, 100, 50" href="index.html" alt="Description">

This area tag is for shape that is a rectangle. The coords are the co-ordinates in pixels of the top left x and y of the hot spot, followed by the bottom right x and y co-ordinates. The target is specified by the href variable in the usual way, complete with the alt text for a description.

<area shape="circle" coords="50, 100, 25" href="index.html" alt="Description">

This area tag is for shape that is a circle. The coords are the centre of the circle x and y co-ordinates in pixels, followed by the radius of the circle. The target is specified by the href variable in the usual way, complete with the alt text for a description.

<area shape="polygon" coords="10, 60, 100, 80, 70, 60, 20, 10" href="index.html" alt="Description">

This area tag is for shape that is a polygon. The coords are the co-ordinates in pixels of the x and y corners of the hot spot. The target is specified by the href variable in the usual way, complete with the alt text for a description.

</map>

This lets the browser know that this is the end of the MAP co-ordinates list.

<img src="uk_map.gif" border="0" width="120" height="200" usemap="#map_of_uk">

This is an image tag just like you would normally use for an image with the addition of the usemap attribute that must show the name used in the map name tag above. This line could go before the map tag without altering how the code works.

If any of the areas overlap the browser will search the list and use the first hyperlink listed for those co-ordinates. For people with older browsers that do not recognise client-side image maps, or those who have images turned off (or in case your image becomes deleted or corrupted) always provide corresponding text links to the hotspots on your map. It is common to put a block of text links at the bottom of the web page that replicate the links on the page.

The code for the image map above looks like this:

<map name="map_of_uk">
<area shape="rect" coords="90, 224, 131, 259" href="england.html" alt="England">
<area shape="rect" coords="129, 112, 217, 241" href="england.html" alt="England">
<area shape="rect" coords="94, 164, 128, 218" href="wales.html" alt="Wales">
<area shape="circle" coords="68, 132, 23" href="ireland.html" alt="Northern Ireland">
<area shape="polygon" coords="146, 100, 99, 131, 56, 66, 80, 23, 129, 21, 149, 50" href="scotland.html" alt="Scotland">
</map>
<img border="0" src="uk_map.gif" width="220" height="263" usemap="#map_of_uk">

Defining Your Co-ordinates

If you use an image that you have created you can check where the co-ordinates should be by looking at your image in the package you used to create it, using its' built in measurement tools. For example in Microsoft Photo Editor and Microsoft Image Composer the current position of the mouse is shown on the status bar. Make a note of the co-ordinates at the appropriate positions on your image and enter them into your code. When you test your web page you can make any adjustments to the co-ordinates as necessary.

You can use the same technique to check the co-ordinates of other images by opening them in your image editing software too.