Chapter 8. Image Maps

Image maps allow a web developer to associate actions with regions of an image. A user’s click may activate a link to another page, run a server-side script, or launch a client-side JavaScript program. In the typical nerdy hipster parlance of the Web, these regions are known as “hot spots.”

The requirements for a working image map are:

  • An image that can be included as an inline image on a web page (generally this means GIF, JPEG, or PNG).

  • Some means of displaying the image and finding the coordinates of the regions you want to define.

  • If a client-side map, a <MAP> element in the same document that defines the regions of the image map.

  • If a server-side map, a map file on the server that defines the regions of the image map in a format that the server recognizes.

  • If a server-side map, an image map program that handles the resolution of the region from the coordinate clicked by the user (most web servers now come with this program preconfigured or built-in, so you probably don’t have to worry about it).

The most difficult part of dealing with image maps from a programming or automation point of view is the generation of the coordinates for the regions within the image. This generally requires some intervention by the author. There are some ways of setting up a site so that certain types of image maps may be generated automatically.

Several people and companies have created tools for making it easier to designate regions within an image map. A few of these free or inexpensive ...

Get Programming Web Graphics with Perl and GNU Softwar now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.