| 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. 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.
Did you Know? Graphical web page editors such as Microsoft FrontPage, Macromedia Dreamweaver, and Adobe GoLive allow you to paint hotspots onto an imagemap (see Figure 10.7) interactively and then generate the necessary HTML for you. This is one situation in which 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 your favorite general-purpose graphics program or image editor. |
By the Way FrontPage will gladly spit out imagemap code for you, but the goal in this lesson is to teach you how to code imagemaps from the ground up. So I'm just using FrontPage as an example of how to figure out the coordinates for each area within a map. You could just as easily use some other graphics tool. |
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: Spike Pipe (region 1): A rectangle from 536,24 to 610,89. Coach's Corner (region 2): A rectangle from 461,43 to 535,78. Barnstormer (region 3): A rectangle from 342,170 to 422,218. Mitchell's Meadow (region 4): A rectangle from 392,69 to 460,114. MIA Bowl (region 5): A rectangle from 311,87 to 391,118. Bubba Bowl (region 6): A circle at 510,94 with a radius of 30. Flume Zoom (region 7): A circle at 499,135 with a radius of 25. Orange Peel (region 8): A circle at 98,243 with a radius of 28. Horsey Hip (region 9): An irregular polygon with corners at the following six points: (323,134), (309,154), (343,166), (358,139), (345,119), and (311,116). Devan's Divide (region 10): An irregular polygon with corners at the following six points: (227,229), (254,243), (273,267), (247,281), (206,278), and (203,244).
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: - 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 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. Or take a photograph containing multiple people and use each person as an area of the imagemap.
|