Sams Teach Yourself HTML 4 in 24 Hours

Sams Teach Yourself HTML 4 in 24 Hours

By Dick Oliver

Mapping Regions Within an Image

To make any type of imagemap, you need to figure out the numerical pixel coordinates of each region within the image that you want to turn into a clickable link. An easy way to do this is to open the image with Paint Shop Pro and watch the coordinates at the bottom of the screen as you use the rectangle selection tool to select a rectangular region of the image (see Figure 14.4). When the mouse button is down, the coordinates at the bottom of the screen show both the top-left and bottom-right corners of the rectangle. When the mouse button isn't down, only the x,y position of the mouse is shown.

14fig04.jpg

Figure 14.4 Paint Shop Pro can easily give the coordinates for imagemap regions without mucking about with special image-mapping utilities.

You could use the whole image in Figure 14.4 as an imagemap, linking to seven Web pages about the various literary genres. To do so, you would first need to decide which region of the image should be linked to each Web page. You can use rectangles, circles, and irregular polygons as regions. Figure 14.5 shows an example of how you might divide the image into these shapes.

14fig05.jpg

Figure 14.5 Microsoft FrontPage 2000 lets you draw clickable hotspot links onto your imagemaps with your mouse.

TIP

Graphical Web page editors such as Microsoft FrontPage 2000 allow you to paint hotspots onto an imagemap (see Figure 14.5) interactively and they generate the necessary HTML for you. This is one situation where a graphical editor is very handy to have around.

There are also programs available that let you highlight a rectangle with your mouse and automatically spew out imagemap coordinates into a file for you to cut-and-paste into your HTML, but they are rather cumbersome to use. If you don't have access to FrontPage or another good graphical Web page editor, you can easily locate the pixel coordinates in Paint Shop Pro or your favorite general-purpose graphics program.

To create the imagemap, first jot down the pixel coordinates of the top-left and bottom-right corners of each rectangular region shown in Figure 14.5. You also need to locate and record the center point and radius of the circle, as well as the coordinates of each corner of the irregularly shaped regions. (If you want to follow along with this by using an image of your own, just write the coordinates on a piece of paper for now. You'll see exactly how to put them into an HTML file momentarily.)

These coordinates are as follows:

To Do

You'll better remember how to make imagemaps if you get an image of your own and turn it into an imagemap as you read the following explanation.

  • For starters, it's easiest to choose a fairly large image that is visually divided into roughly rectangular regions.
  • If you don't have a suitable image handy, use Paint Shop Pro (or your favorite graphics program) to make one. One easy and useful idea is to put a word or an icon for each of your important pages together into a button bar or signpost.

Share ThisShare This

Informit Network