General HTML 3.2 tags, Tables, Forms and Frames all have their own tutorials on this site. After completing this page, follow the back button above.

The farm land image on the left is just a normal image. However, in the page HTML code, there are references to areas of pixels in this image that will react to mouse clicks. Each defined area refers to a hyperlink that will instruct the browser to respond in some way, usually to open another page. The links included in this example are only local bookmarks.

There are three shapes that can be defined in an image map. Two are fairly simple to implement manually, whereas the third can be somewhat complex.

The image on the right above, and the code included below will be understandable from this list. These are the three "shape" types:

Rectangle

Circle

Polygon

The Image Map
These are the Image Map and Area Shape tags used on the image displayed above.

<MAP NAME="imageMap1">
<AREA SHAPE="RECT" COORDS="3, 71, 27, 119" HREF="#Jump1">
<AREA SHAPE="RECT" COORDS="37, 76, 66, 106" HREF="#Jump2">
<AREA SHAPE="RECT" COORDS="79, 76, 103, 122" HREF="#Jump3">
<AREA SHAPE="RECT" COORDS="145, 85, 177, 117" HREF="#Jump4">
<AREA SHAPE="CIRCLE" COORDS="195, 94, 15" HREF="#Jump0">
<AREA SHAPE="POLYGON" COORDS="115, 79, 141, 81, 141, 102, 129, 115, 130, 136, 117, 135, 120, 108, 109, 99" HREF="#top">
</MAP>

The Image Source
This is the standard Image Source tag that also includes a reference to the Map "name", applicable to the image above. Note the 'hash' sign before the map name.

<img src="bush2a.jpg" width="211" height="158" border="0" align="middle" usemap="#imageMap1">

The "usemap=#??????" option is all that has to be included in an image source tag. Make sure, as with the images them selves, that you spell the map name exactly the same in both tags. The   "href=" components of the "area shape" tags is where you place the path or URL of the hyperlinks.

Coordinates
The diagram below shows how the coordinates refer to the required mapped areas. (the sample covers one rectangle and one circle map only) To create the pixel references, open the applicable image in a Painting Program. All painting programs display the cursor position some where on the screen as the cursor is moved over an image.

Place the cursor at the position of each corner of the areas you want to map (in the centre for a circle) and write down the pixels numbers both Horizontally and Vertically. In the case of a circle, note the radius in pixels that you want to apply - out from the recorded centre point. Realise that your painting program might display the cursor position as "X" (horizontal) and "Y" (vertical) coordinates.
Both rectangle and circle maps require only two plots for each map: Top left hand corner plus bottom right hand corner for rectangles. The centre point plus the radius for circles. Polygons require a plot for each point or corner of the shape. The last coordinate pair of numbers that is recorded for a polygon will automatically line up with the first pair.

Try it
Copy this picture, view it in your painting program, and place the cursor on the red dots. The cursor position should relate closely to the numbers displayed in the "area shape" tags displayed in the code sample above.

Once you have mastered these concepts, and hopefully successfully implemented your own manually created image maps, you will become a master of yet another set of complex HTML tags. If it is your intention to eventually design many Web pages, then you will need to have this level of knowledge one day.

Important Note
Be aware that many browsers still in use cannot handle image maps. This is why you will come across properly constructed sites that also offer text based links somewhere on the page.

Avoiding the use of image maps, many Web developers chop up images and place the sections on a page so that they reconstuct the full image when all sections are loaded. Then each section (image) uses the standard <a href=??????> ... </a> hyperlink. See if you recognise this method on sites that you visit. Microsoft.com use this method on many of their pages, but you have to watch the pages carefully as they load.

Server side Image Maps
These image maps are script files that reside on the server and are referenced from there as the page and images are layed out by the browser. This method is less common today, with the advent of WYSIWYG browsers and the powerful programming in the modern browser. Some Hosting servers do not even support server side image maps any more.

As apposed to server side image maps, client side image maps are readily transportable (imbedded in the HTML code) and are not server platform specific. If you need to use server side image maps, contact the Server Master at the Hosting service that will host your pages.

Now, the bad news!:
When you understand how to read Image Map tags, you are better off going to the shareware sites and obtaining a program that lets you draw the link areas on an image AND allows you to save the whole image map as a text file. Then you simply paste the text into your HTML code. The generated code will include the correct <img src=????> reference to that picture also. (I used FrontPage 98 to produce this sample; I am too lazy to go back to the hours of manual implementation)