Image Maps

We can create a hyperlink from an image and we can also create hyperlinks from parts of images. Run your mouse over the following image. Although the effect is due to JavaScript, you will notice that different AREAS behave differently. This is due to the HTML

rectArea.gif (2843 bytes)

 



Here is the HTML code for the AREAS in the above image

<MAP NAME="rectArea">

<AREA NAME="one" SHAPE="rect" COORDS="0,0,100,100" HREF="index.html" title="AREA one">

<AREA NAME="two" SHAPE="rect" COORDS="100,0,200,100" HREF="anchors.htm" title="AREA two.By the way, I am the TITLE">

<AREA NAME="three" SHAPE="rect" COORDS="200,0,300,100" HREF="Headings.htm" title="AREA three">

<AREA NAME="four" SHAPE="rect" COORDS="300,0,400,100" HREF="Headings.htm"

title="AREA four">

</MAP>

<img src="rectArea.gif" width="400" height="100" USEMAP="#rectArea">

The last line defines the image in the normal way, except that it references an image map: USEMAP="#rectArea" The MAP tags begin with <MAP NAME="rectArea"> which has an end tag </MAP>

Enclosed within the MAP tags are the details of the different AREAs in the MAP.

Each AREA has a NAME, a SHAPE - which can be rect, circ or poly - COORDS and HREF.

The SHAPEs are rectangular, circular or polyganol. The COORDS specify the SHAPE. If the SHAPE isn't mentioned, then a rectangular SHAPE is assumed by the browser.

The coordinates are specified relative to the image. So 0,0 is the top left-hand corner of the image. In the above rectangular image, the first rectangle has the COORDS value of 0,0,100,100 which are the coordinates of the top left and the bottom right corners of the first square.

When clicked, the browser will take the user to the URL specified by the HREF value.

The TITLEs of the different areas replace the ALT text in the image when the mouse moves over the area.

The changes in the text area below the image are due to JavaScript and merely allow you to explore the image AREAs visually.

The next example if a circle. Run your mouse over the circle and notice the titles for the different parts of the image and changes in the text area below.

imageCircle.gif (1902 bytes)

Below is the code. There is nothing new here. The SHAPEs are circles this time and the COORDS are the value of the centre of the circle relative the top left corner of the image, and the radius of the circle.

<!-- ####################### start of circles ####################### -->

<MAP NAME="circleArea">

<AREA NAME="littleCircle" SHAPE="circ" COORDS="100,100,45" HREF="index.html"

title="AREA=littleCircle">

<AREA NAME="bigCircle" SHAPE="circ" COORDS="100,100,85" HREF="anchors.htm"

title="AREA=bigCircle.By the way, I am the TITLE">

</MAP>

<!-- ####################### end of map

####################### -->

<p align="left"><p><img src="imageCircle.gif" width="200"

height="200" USEMAP="#circleArea"></p>


[back to:  image hyperlinks]
[home][contents]
[on to: lists]


Most Recent Revision: 18-Oct-98.
Copyright © 1998

I am always pleased to hear from you.
Send your comments to