Image Maps

An image map is a graphic that has defined areas that can be used to trigger HTML events. Most often these clickable areas or "hotspots" are used to create links to other Web pages.

In the example image map to the left, each of the numbers has been defined as a hotspot with a rectangular shape. (Other possible hotspot shapes are circle and polygon.) Notice how the cursor changes as you roll your mouse over the numbers.

Most HTML editors such as Dreamweaver have built-in image map creation tools. Some Web-oriented graphics editors like ImageReady and Fireworks also have image map creation tools and will even write the HTML image map code for you.

There are two types of images maps: 1) server-side, where the map information and the software that interprets mouse movement are located on the server machine; and 2) client-side, where the browser interprets the mouse movement and the map information is stored in the HTML code of the page.

Today client-side image maps are the norm.

The image map on this page is a client-side map. Here's the map information taken from the page's source code:
<MAP NAME="map1">
<AREA SHAPE="RECT" COORDS="17,168,53,208" HREF="#" ALT="Hotspot 4">
<AREA SHAPE="RECT" COORDS="249,187,282,230" HREF="#" ALT="Hotspot 3">
<AREA SHAPE="RECT" COORDS="268,33,302,76" HREF="#" ALT="Hotspot 2">
<AREA SHAPE="RECT" COORDS="91,8,124,47" HREF="#" ALT="Hotspot 1">
</MAP>