Free computer Tutorials
HOME Stay at Home and Learn

Web Design Tutorials
 
Computer Tutorials List

Beginners Computing
Microsoft Word
Microsoft Excel
Web Design
Cascading Style Sheets
Javascript
Visual Basic .NET
Beginners PHP

Excel 2007
Which Qualifications?

 

 

 
 

Using HTML Image Maps on your Web Pages

 

To help your visitors find their way around your site, you can use something called an image map. An image map is a graphic on your web page that has been split into different areas. Each area is a separate link. Click the link below to get a good idea of how they work:

Image Map

When the web page is loaded into your browser, hold your mouse over one of the planets. You should see a little pop-up box with some more information.

Only the planets are clickable links. Move your mouse on a black area, and nothing happens when you click. Click on a planet and the idea is that you would be taken to a new web page (though you stay on the same page with this image map).

You'll now learn how to construct your own image map. Unfortunately, your HTML Editor will not insert the code for you, so this is something you'll have to do on your own. You can, of course, use your editor to start a new html page and add the code by hand. Off we go then.

An image map consists of two parts: the actual image itself, and the coordinates to use for the links. Both parts go between the two BODY tags. Here's the code for the image:

<IMG SRC = imagemap.jpg USEMAP = #planets border =0>

You met most of that code before. The only thing you haven't met is the USEMAP attribute:

USEMAP = #planets

The word USEMAP is followed by an equals sign, then the hash symbol (#). After that comes the name of the image you want to use. This name is something you pick yourself, and can be anything you want. The name is then used for the second step of the process.

The second step of the process is where you set up the coordinates of your map. In the web page on the disk, we wanted only the planets to be links to web pages. So we need to "tell" the browser where the planets are. This how you "tell" the browser which parts of your image you want to turn into links:

<MAP NAME = "planets">

<AREA SHAPE = "" COORDINATES = "" HREF = "" ALT = "">

</MAP>

Only the basic tags have been inserted. Here's an explanation.
  <AREA

Set up an area to use for your map. You need one for every part of the map. We used five areas in our image map. So five lots of area tags were needed.

 
SHAPE =

You have three choices here: Rectangle, Circle, and Polygon. The actual code for the three is:

SHAPE = "rect"

SHAPE = "circle"

SHAPE = "poly"

We used four circle shapes and one rectangle shape (Yes, you can mix them).

 
COORDS

Shorts for Coordinates. The coordinates can be quite tricky to set up.The coordinates for a rectangle use this format:

COORDS = "x1, y1, x2, y2"

The first two (x1 and y1) are the coordinates of the top left of your rectangle; the second two (x2 and y2) are the bottom right of your rectangle (we'll see an easy way to get these coordinates shortly.)

The coordinates for a circle use this format:

COORDS = "x, y, r"

The x and y are the centre of the circle, and the r is the radius.The coordinates for a Polygon use this format:

COORDS = "x1, y1, x2, y2, x3, y3"

Each pair of coordinates is a point on your polygon

 
HREF =

This is where you add the name of the web page that people will betaken to when they click an area of your image map

 
ALT =

Set the text you want to use when people hold the mouse over you link

 
</MAP> Finish the whole thing off with the end map tag.

An example is this (Taken from the code for the planets image map):

<MAP NAME = planets>

<AREA SHAPE = "circle" COORDS = "430, 210, 100" HREF = "imagemap.html" ALT= "Click here for extra information about Planet One">

</MAP>

<IMG SRC = imagemap.jpg USEMAP = #planets border =0>

An explanation of the above code comes next.

 

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

<--Back to the Web Design Contents Page

View all our Home Study Computer Courses