Hour 13:
Graphical Links and Image Maps

This hour explains how to create image maps - links that lead to more than one place, depending on where you click on an image - as well as why and how to avoid using them whenever possible. You see how to define rectangular and circular link regions within an image, as well as irregularly-shaped polygonal regions. You can also provide an alternate text link just for people using older browsers that don't support the current image map standard.

(View HTML tags covered in Hour 13.)

Example Pages Shown in the Book

Future Records (Figures 13.1 - 13.3)

An image map isn't necessary to create this page. The better solution is to cut the graphic into pieces using Paint Shop Pro (or any other graphics program), and make each piece a separate image link on the Web page. This way, the page is compatible with all versions of all Web browsers. Just be sure not to leave any spaces or line breaks between <IMG> tags, or a small gap may appear between them.

The Best Seller Brain (Figures 13.4 - 13.7)

To make an image link to multiple addresses, put USEMAP="mapname" in the <IMG> tag, and put <MAP NAME="mapname"> anywhere else in the document. Before the closing </MAP> tag, use <AREA> tags to indicate the pixel coordinates of each region you want a link to. This image map has eight <AREA> tags:

1. Fantasy: A rectangle from 15,15 to 220,100.
2. Romance: A rectangle from 0,200 to 75,235...
3. ...and a circle centered at 140,150 with radius 40.
4. Horror: An irregular polygon with corners at the following eight points: (70,175), (90,155), (125,195), (160,195), (190,160), (220,185), (185,270), and (110,270).
5. Sci-Fi: A rectangle from 225,10 to 330,120.
6. Literary Fiction: A rectangle from 330,10 to 475,120.
7. Action/Suspense: An irregular polygon with corners at the following five points: (230,130), (330,130), (330,270), (210,270), and (210,230).
8. Mystery): A rectangle from 330,130 to 475,270.

Have a peek at the HTML source code for this example to see exactly how each of these regions is described in an <AREA> tag.

Additional Online Examples

The Immortal Presidents

This tongue-in-cheek history lesson includes four text links below the image map for the convenience of people using older Web browsers that don't support HTML 3.2 or 4.0 standard image maps.

The Medieval Elements

Another method of supporting older browsers is to include a regular <A HREF> tag before an image map, and put an ISMAP attribute in the <IMG> tag. This tell modern browsers to ignore the <A> link and use the image map instead.

Key Quote from This Hour

"There are fancy programs that let you highlight a rectangle with your mouse and automatically spew out image map coordinates into a file, but they are rather cumbersome to use. You'll save the most time by ignoring the 'time saver' programs and just locating the pixel coordinates in Paint Shop Pro or your favorite general-purpose graphics program and jotting them down on a scrap of paper."

Next Hour: Advanced Layout with Tables