Image maps combine images and hyperlinks. The image can be logically segmented into "hot spots" and hyperlinks assigned to a coordinate space.
Consider this example which includes the following:
 | A classic tool button bar |
| Using JavaScript with an image map |
Elements of an Image Map
Image
An image (JPEG or GIF format) is needed to contain the image map hot spots. Ideally, the image should contextually define the image (e.g., borders within the image indicating separation, text indicating that something needs to be clicked).
Coordinates
Coordinates are X (width),Y (height) pixel positions within the image. There are two basic ways to handle coordinates:
- Use a graphics editor to figure out the end points of the "hot-spot".
- Use a tool that specifically supports image map generation (most WYSIWYG web editors will do this).
The Hot Spot
The hot spots are defined by the coordinates. There are three different shapes (commonly termed "hot spots") that can be used in image maps. They are as follows:
| RECT: top & left and bottom & right. |
| CIRCLE: center coordinate (the point in the center of your shape) and it's radius size |
| POLYGON: a set of coordinates that define a polygon, they must be listed in order and connect back to the starting point. |
Map Name
Image maps also require names. You can have multiple image maps on a page, so this is simply used to keep them straight.
Also
You can use anchors for bookmarks on the page for:
| mail-to links |
| bookmark (named) links |