Contents: Software required - Planning - Copyright issues - Design issues - Making the Map - Accessibility - Other Shapes

Image Maps

Image maps are becoming quite popular in the web. Unfortunately, they have a reputation of being difficult to make, also of requiring special software.

The truth is, that special software would make the procedure point-and-click, but aside from that, they can be made with little effort and the software that most people have already on their computers.

The purpose of this tutorial is to tell you how.

Software Required

Since I am a Windows user, I can only speak for windows software, but similar simple programs exist in most operating systems. 

So, for Windows, you will need Paint and Notepad (these two programs are available for all Windows versions, including the older 16 bit 3.1 - look under accessories), plus an image converter. There are many free image converters, some bundled with scanners and other peripherals, others downloadable from the internet or available with computer magazines on CDs.

My favorite one is Irfanview, but if it will only be used for the purpose of this tutorial, maybe it is overkill. The only thing that an image converter will be required to do for this tutorial, is to convert a BMP image to JPG.

Planning

First, we need to visualize the image map we want to create. What will the picture look like? How many links do we need? Where will we put each link?

We can do a rough sketch on a piece of paper.

The image can be one we will make, or a ready made image.

Copyright Issues

If we do not trust our abilities to make a simple image for an image map, we will have to find an image.

In the second case, we must make sure that we have the right to publish this image on the Net. Is it copyrighted? If it is part of a collection of clipart that we bought? We must read the fine print and make sure. Some of these images are sold under the license to print, but not to use in the Web. Others permit their use, only for personal web pages.

If we downloaded the image from the internet, we must keep the terms of their distribution.
If the image is scanned from a book or other printed media, then it is almost certainly copyrighted and its use on the internet is not permitted.

Of course, we can always use part of a photo that we took.

top

Design issues

Many image maps on the Net are simple colored rectangles with text.

The same effect could be achieved in most cases with the use of HTML - with a table. Since images always add to the loading time of a page, before making such a map, we must be sure whether it is really worth it.

It would make sense if we wanted to add shadows or use a very special font.

Also we must decide the shape of every image map area. i.e. the area that would be clickable for a certain link.

The easiest shape for HTML and the one most familiar to our visitors is the rectangle. The circle is not too difficult to make also, but it poses design problems. It is not easy to design circles on an image, without leaving most areas unclickable. An image map should be clickable on most - if not all - parts of the image and it should be clear to the visitor which part is which.

Polygons, regular or not, are complicated to make and although they might please the designer esthetically, they usually don't make much difference for the visitor as to usability.

So, in the sketch mentioned above, we must put a diagram of all the clickable areas in our image map.

top

Making the map

Once all the above issues have been resolved, we are ready to make our image map.

If we are going to use a ready made image, we must first change its format to BMP, keeping the original.

If we are going to make an image ourselves, we open Paint and start painting.
For the purpose of this tutorial, we have made a house:

Once we have the image (resized with our image converter/viewer if necessary to its final size for the Web and saved) we open it in Paint and also open Notepad.

Choose the rectangle tool and draw rectangles in any color that will clearly stand out from the rest in the areas that you want to be clickable for each link - one rectangle for each link and write the names of the links.

top

If yes, start moving your mouse over the image and writing in Notepad. What exactly you will be doing is this:

Say the first rectangle in your image, according to your sketch should go to a page that we call "top directory" and which could be top.htm. You write top.htm in Notepad, move your cursor to the beginning of the row and press enter to move the word one row down. You move the cursor again to the first (empty) line and go back to Paint. You touch your mouse on the top left corner of your first rectangle and watch the taskbar of Paint: you will see two numbers there, separated by a comma - these are the coordinates. Note them down and copy them on the first empty row of your text with a comma between them. Do the same for the bottom left corner of the same rectangle. Separate the values for each corner with a comma (a space will do as well). After you finish with the first rectangle, move your cursor to the end of the link and press enter twice to make a blank line. Write down you second link and the coordinates of the second rectangle. Always write the link name after the coordinates and leave a blank line between links.

top

Once you finish with all this, you are almost finished. Your text should look like this:

1,0, 167,54
top.htm

1,55, 85,109
option1.htm

86,55, 167,109
option2.htm

1,110, 73,109
alt1.htm

74,110, 101,169
main.htm

102,110, 167,169
alt2.htm

If you try this, you will see that we don't use the same number in coordinates from one rectangle to the next. For example, the first rectangle finishes to 54 at the bottom, so we will start the next row with 55. Using a mouse and our eyes does not help to be exact and the point of 55 or 54 will seem the same to us, but the link coordinates must not overlap (very confusing for the browsers). The rest is easy!

top

With your image converter save your BMP image as a JPG. Move this JPG to the directory where you keep your ready to publish images.
You only have to add the HTML tags in your text document, as below:

It should look like this (you only need to edit the coordinates, links, alt text and image url):

<map name="map1">

<area shape="rect" coords="1,0, 167,54"href=top.htm alt="Top directory">
<area shape="rect" coords="1,55, 85,109" href=option1.htm alt="Option 1">
<area shape="rect" coords="86,55, 167,109" href=option2.htm alt="Option 2">
<area shape="rect" coords="1,110, 73,169" href=alt1.htm alt="Alternative 1">
<area shape="rect" coords="74,110, 101,169" href=main.htm alt="Main">
<area shape="rect" coords="102,110, 167,169" href=alt2.htm alt="Alternative 2">
</map>
<img src="house.jpg" border="0" alt="About our houses" usemap="#map1">

If you have more than one image map in the same page, you can give each map a unique name. In this case, we named our map: "map1". Copy the map text to that part of your HTML page where you want the image map to appear. That's it!

top

Remember to test, both the appearance and functionality of your new image maps - also check if you have the right links.

Let's see how this works (move your mouse over the image):

It seems all right, but it could be perplexing for our visitors. How would they know this is an image map and which areas to click, if they don't move their mouse (at least those that have one) over our little house?

It seems like a better idea to add some words to the image, as unobtrusive as possible, so that our image masterpiece :-) will still show through.

To do that we modify our image and have a new map: (Not that we would sell any house with such an image :-))

top

Accessibility

Just because we can use an image map, does not mean that everybody can use it.

That is why we provide alternate text in the HTML (alt=..), which is what those of our visitors who cannot see images - either by choice or necessity - will see.

The ALT text shows up as a tooltip on mouseover, although that was not its purpose. We should not count on the tooltip, or the obviousness of our image to ensure that our visitor will know what link to choose, maybe we will perplex him even more - some text should be included in the image map.

With HTML 4.0 the MAP element can use other block level elements (lists, tables etc.), instead of - or in addition to - an image and areas, for more alternatives. The exact way to do this has not been implemented in practice yet.

Other Shapes

In this tutorial, we saw a way to make image maps using rectangles. The AREA tag is called "rect"; it could be just as well called "rectangle" - both terms are recognized by browsers. The coordinates needed for a rectangle are: left, top, right, bottom

We can also use a circle.The AREA tag is called "circle". In this case we must define center x, center y, radius coordinates.

A final choice is to use a polygon. The AREA tag is called "poly" and the coordinates needed are all the points defined in its perimeter: x1, y1, x2, y2, ..., xN, yN (Always start from the top left - the first pair of numbers - x1, y1 - should be the same point as the last one, to close the polygon).

top

This Tutorial is the property of HowAmazing.com. It may not be reproduced without prior written consent from Exclusive Concepts, Inc.