Drop Shadow

Image Maps

Normally, an image on your web page can only be linked to one other page. By using “map instructions”, you set aside specific areas on an image and have them link to separate pages. You map various simple shapes on your image, such as circles and rectangles, to specific URLs. These are called “image maps”.

Image map types

There are three styles of image maps: NCSA, CERN, and Client-Side. I recommend client-side image maps wherever possible. They’re easier to use.

Client-side image maps

The client-side image map is an extension to the IMG tag, USEMAP="link to map info":

<img src="usd.gif" usemap="#usdmap">

And, the “usemap” reference has to be match a named “map” entry:

<map name="usdmap"> <area shape="rect" coords="left,top,right,bottom" href="http://www.sandiego.edu/"> <area shape="circle" coords="center,radius" href="Info/Phones.html"> </map>

The “coords” are pixel locations and pixel lengths. You can use just about any graphics program to find out what the pixel locations are. GraphicConverter works great on the Macintosh.

You’ll want to choose either a rectangle or a circle, whichever shape most closely approximates the area you want people to click on. For a rectangle, the shape is ‘rect’, and the coordinates are the pixel counts at the upper left corner (left, top), and the lower right corner (right, bottom). Pixel counts start at 0, 0, in the upper left corner of the image. For example, if you have an image that is 320 pixels wide and 240 pixels high, and you want to link a section that starts 20 pixels to the right, 30 pixels down, and is 35 pixels wide and 45 pixels tall, you would use the coordinates “20,30,55,75”.

For circles, your coordinates are the center of the circle and the radius of the circle. The center is measured as pixels from the left end of the image, and pixels from the top of the image. If, in the above example, you had a circle right in the middle of the image, and the circle was 50 pixels wide, you would link it with the coordinates “160,120,25”. The circle’s center is 160 pixels to the right, 120 pixels from the top, and has a radius of 25 (thus, a diameter of 50).

Server-side image maps

There are two kinds of server-side image maps, CERN and NCSA. We use the NCSA format on USD’s web servers. You’ll need to make sure that your image map editor supports NCSA format image maps and that it is set to save your image maps as NCSA. Read your web page editor’s instructions for how to do this.

I recommend not using server-side image maps unless you really need them. They’re more difficult to manage, and less compatible if you move your web pages to a different server.

Only browsers that understand imagemaps can connect to your mapped links. Anyone using text-oriented browsers such as lynx or elinks, or audio readers will likely be unable to use those links unless you provide them in a normal format elsewhere on your page. Client-side image maps work best for universal support: even Lynx can handle them.

You will need to use a special image map editor to create the image map ‘.map’ file. You can find free image map editors on software download sites such as versiontracker.com. Most web editors will probably also have a means of creating image map files.

In your web page, you have to use a special html tag to tell the browsers that an image is “mapped”. You also have to tell the browser where to find the map. In the <img> tag, add “ismap”. Link the image to the map file that you’ve created. The map file’s name must end in .map. For example:

<a href="Maps/Bernoulli.map"><img src="Figures/Bernoulli.gif" ismap="ismap" /></a>