Learning Web Design Third Edition- P15:Everything you need to know to create professional web sites is right here. Learning Web Design starts from the beginning defining how the Web and web pages work and builds from there. By the end of the book, you'll have the skills to create multi-column CSS layouts with optimized graphic files, and you'll know how to get your pages up on the Web. | Test Yourself O map name veggies id veggies 2 A area shape poly coords 56 5 45 32 18 32 39 52 30 80 56 64 85 82 76 5 1 97 33 68 31 58 4 55 5 href alt pea icon area shape rect coords 127 9 196 79 href alt tomato icon C area shape circle coords 270 46 37 href alt carrot icon map p img src width 330 height 90 usemap veggies p exercise 7-2 Making an imagemap The image shown in this section and Figure 7-8 is available in the materials directory for this chapter. If you have Dreamweaver you can use Figure 7-7 to help make your own imagemap. The general steps for making an imagemap are outlined above but you ll need to consult the documentation for a detailed explanation of how to use your program. Your resulting pixel coordinates are not likely to be identical to the ones shown in this chapter because dragging hotspot areas is not an exact science. What matters is that the area is covered well enough that the user will go to the page as expected. O This marks the beginning of the map. I gave the map the name veggies. Dreamweaver has used both the name and id attributes to identify the map element. Both attributes have been included in order to be both backward name and forward id compatible. Within the map element there are area elements representing each hot spot in the image. 2 Each area element has several attributes the shape identifier shape pixel coordinates coords the URL for the link href and alternative text alt . In this map there are three areas corresponding to the rectangle circle and polygon that I drew over my image The list of x y coordinates for the polygon poly identifies each of the points along the path of the star shape containing a pea. The x y pixel coordinates for the rectangle rect identify the top-left and bottom-right corners of the area over the tomato. C The pixel coordinates for the circle circle identify the center point and the length of the radius for the area with the carrots. .
