Intermediate HTML Tutorial: Client Side Image Maps

Home > Build > Programming > HTML > Intermediate HTML Tutorial

1.7 Client Side Image Maps

Before you put your image map on the web, you have to define your coordinates. In order to do that, you have to determine where they are. You can use image map programs to do this, which we actually recommend. But it wouldn't hurt to know how to find them yourself. We will use Adobe Photoshop for our examples since it is the most powerful, and is becoming the standard for bitmap image editing.

We will use a simple sample graphic with 3 colors:

First, you must ascertain the shape of the graphic. It can be RECT, POLY, CIRCLE, or DEFAULT. Obviously our sample is a rectangle, which is also the default. To find the coordinates:

1. Open Photoshop
2. Go to Window | Select Show Info
3. Drag your mouse to the boundaries of the map area
4. Write down the X and Y coordinates displayed in the Info Palette

Finding the coordinates in Photoshop can be quite time consuming. If that's not for you, download MapEdit, which has a much easier interface.

Now let's put your code together. Here is how the map above was defined.

<MAP NAME="sample">
<AREA SHAPE="rect" COORDS="100,0,150,50" HREF="Inter/link3.htm" TARGET="link3">
<AREA SHAPE="rect" COORDS="50,0,100,50" HREF="Inter/link2.htm" TARGET="link2">
<AREA SHAPE="rect" COORDS="0,0,50,50" HREF="Inter/link1.htm" TARGET="link1">
</MAP>

First you must give the map a name. Then define the shape and the coordinates. Then point to the URL you plan to link that area to.

Now when you use the <IMG> tag to place the map onto the page, you have to point it towards the map you defined. You do this with the USEMAP attribute.

Now you have a client side image map.

<IMG SRC="Inter/map.gif" USEMAP=#sample>

1.6 Image Maps

Tutorial Index

1.8 Server Side Image Maps