Mapping Regions Within an ImageTo 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. These clickable links are also known as areas. An easy way to do this is to open the image in an image editor 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 10.6). When the mouse button is down, the coordinates at the bottom of the screen show both the upper-left and lower-right corners of the rectangle. When the mouse button isn't down, only the x,y position of the mouse is shown. Figure 10.6. You can use an image editor to select regions within an image and determine the coordinates.You could use the whole image in Figure 10.6 as an imagemap, linking to several images that provide somewhat of a virtual tour of a skateboard park. To do so, you would first need to decide which region of the image should be linked to each target image. You can use rectangles, circles, and irregular polygons as regions. Figure 10.7 shows an example of how you might divide the image into these shapes. Figure 10.7. Microsoft FrontPage lets you draw clickable hotspot links onto your imagemaps with your mouse.
To create the imagemap, first jot down the pixel coordinates of the upper-left and lower-right corners of each rectangular region shown in Figure 10.7. You also need to locate and record the center point and radius of the three circles, as well as the coordinates of each corner of the two 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 are the coordinates for the skatepark imagemap areas:
Try It Yourself You'll better remember how to make imagemaps if you get an image of your own and turn it into an imagemap as you continue on throughout the lesson:
|