Image Maps HTML Tutorials

Free HTML Tutorials • CSS • Popups tutorial • Frames Tutorials • Forms Tutorials • Beginners HTML Tutorials • Advanced HTML Tutorials • JavaScripts • Free Web Page Tutorials • Free Downloads

	Advanced Section
IMAGE MAPS

Images Maps are useful when you have a very large graphic or want a different way to do links. We will only look at links here.

So what exactly is an image map? On the small graphic below you'll see three options ...

If you hover your mouse over each heading in turn you can read the address or URL in the task bar. If you click each section of the image you will go to the named part of this tutorial. All the links are on this one graphic or image which is why it is called an IMAGE MAP.

One advantage of using an image map is that you use ONE image instead of several for, say, a navigation bar. To start with you will need to create a suitable image. A simple bar like this takes a couple of minutes with your favourite graphics programme. Or find one floating around that seems the right shape. For now stick to rectangular shapes as they are easier to define.

Tip. You can use IrfanView to create small images and add simple text to them.

The above image is called "navbar2.gif", a logical choice for a navigation bar. Its width is 300 pixels and its height is 30 pixels.

Add the image to your page with same image tag as usual, but with a new attribute, USEMAP. You will notice the USEMAP is named, but we'll look at that a bit further down.

<IMG SRC="navbar2.gif" width="300" height="30" border="0" alt="navbar2.gif" USEMAP="#navbar">
Make a note of the width and height of the image as we will need them to create our “map”.

DEFINING MAP CO-ORDINATES

First we need to tell the browser that we are using a map with this image, so we add the USEMAP="#navbar" command to the end of the image tag.

It is essential to define the WIDTH and HEIGHT of the image as we will be using these to create the co-ordinates to define the map. You can put the co-ordinates any where on the page, but for convenience it is probably best to put it right after the IMG tag.

These are the co-ordinates for our little navigation bar:

We have given our map the name "#navbar" which is located after the tag “USEMAP”.

Taking the first line, we now define the shape of our map:

<AREA SHAPE="RECT" COORDS="0,0,99,30" HREF="downloads.html">

The AREA tag defines an area of the image that will be used as a link.
The SHAPE attribute tells the browser what shape the area will be. You can use other shapes but some can be very tricky to define.
The COORDS attribute is where we define the edges of each area or each of the three small rectangles we will be using.

We need two sets of co-ordinates - the first to define the start of the rectangle (where the top left edge of the rectangle will be) and the second to define where to end the rectangle (the lower-right edge of the rectangle)

It's probably a good idea to work out the whole map on paper first. Just draw a simple rectangle and work out the measurements and co-ordinates for each part of the image map, like that shown below:

First small rectangle
0,0 (top left,bottom left)
99,30 (top right, bottom right)

Second small rectangle
100,0 (top left,bottom left)
199,30 (top right, bottom right)

Third small rectangle
200,0 (top left,bottom left)
300,30 (top right, bottom right)

The image size in this example is 300 x 30. In effect we are going to define the three small rectangles contained within the image. Each will be approximately 100 X 30.

<AREA SHAPE="RECT" COORDS="0,0,99,30" HREF="downloads.html">

For the first we start at the left, (top 0, bottom 0) then we need one third of 300, which is 100, but because each figure can only be used once, we drop it by one pixel to 99. We then need the full height of the image, which will give us the final co-ordinate of 30. Then we add the <HREF> tag for the address of the page you want it to point to.

Moving to our second small rectangle we get this:

<AREA SHAPE="RECT" COORDS="100,0,199,30" HREF="tips.html">

Starting where the first one ended and at the top of the image, we begin this one at 100 pixels (the upper left of the second rectangle). We start it at the top again (0 pixels) the end it two thirds of the way along the large rectangle. Again we have to allow for the next small rectangle so the co-ordinates here will be 199, 30.

<AREA SHAPE="RECT" COORDS="200,0,300,30" HREF="aamain.html">

For the third small rectangle we repeat as above, starting at 200,0 and ending at the end of the image which of course is 300,30

We need a closing tag to end this:

</MAP>

The same simple rectangle could be used as a vertical image for an index or site map, again instead of using several images. Just work it all out on paper first.

USEMAPS can be very simple or very complex, with many more co-ordinates than we have defined here. Using “raw” HTML would take forever to define them. So what do we do instead?

I will now try to make life easy for all of us. If you want to use a very complex map for navigation or some other purpose, don't use HTML, use a map creation programme. There are some inexpensive (or free) shareware image map creation programmes available. Also most of the better web creation programmes will do it all for you. Check out the references in TIPS for software sites or try your favourite search engine.

Next: Cascading Style Sheets

Advanced Index