Image Maps continued

Image Maps (continued)

In the last part of this tutorial, we had this is an example of image map code:

<MAP NAME = planets>

</MAP>

We'll break that code down now.

Notice that the MAP part comes first, and the Image second. After typing the word AREA we then set the shape we want to use:

SHAPE = "circle"

The coordinates of the circle come next:

COORDS = "430, 210, 100"

The first number, 430, is how far left the centre of the circle is on the image (the measurements are all in pixels). The second number, 210, is how far from the top the centre of the circle is on the image. The third number, 100, is the radius of the circle.

Next, we have a HREF attribute:

HREF = "imagemap.html"

This is quite simply the name (and address) of the web page that people go to when our circle link is clicked on.

Finally, we have the ALT attribute:

ALT = "Click here for extra information about Planet One">

If you hold you mouse over the first planet, you'll see this text pop up in a little box. Notice that the right angle bracket ( > ) comes at the very end.

Four more AREA tags were needed, one for each of the other four planets. The final planet uses a Rectangle as the SHAPE, and it's worth examining how it works. The code used was this:

The HREF and ALT parts of the code are fairly straightforward. Notice that the name of the SHAPE is "rect" and not "Rectangle". (Like all attribute values, however, the "rect" is not case sensitive. So you can have it in Uppercase, lowercase, or a mix of both, if you wanted. The double quotes are not needed either.)

The Coordinates were these:

COORDS = "520, 580, 650, 760"

The first two, 520 and 580, define the top left hand corner of the rectangle. The 520 is how far left of the image the top left corner is; the 580 is the how far from the top the top left corner is. The final two coordinates, 650 and 760, define the bottom right of the rectangle. The 650 is how far left of the image the bottom right corner is; the 760 is the distance from the top of the image to the bottom right corner.

You can easily grab the coordinates of a rectangle, if you have image editing software, like Paint Shop Pro. Here's a screenshot from Paint Shop Pro 7 showing the coordinates of the top left hand corner of the rectangle:

Paint Shop Pro Coordinates

The red cross in the picture represents the mouse pointer when the selection tool is selected. You move your mouse to the top left corner of the rectangle and the coordinates will show up in the bottom left of the screen, on the grey task bar (520, 580). Move your mouse to where you want the bottom right of your rectangle, and jot down the coordinates.

In the final part of the hyperlink tutorials, we'll take a look at how to link to files such as MP3 files, zip files, and PDF documents.

<-- Back One Page Move on to the Next Part -->

<--Back to the Web Design Contents Page

View all our Home Study Computer Courses