Creating an Image Map - HTML5 and CSS Comprehensive - page 274

Make It Right continued
four phrases used
as image map
navigation bar with text
links using ctdivider.jpg
as separator
Figure 5-38
In the Lab
Lab 1: Creating a Web Page for a Senior Center
Problem: You are very involved in volunteer work at your local senior center. You decide to create a
Web page similar to the Web page in Figure 5-39, with the file seniorlogo.png as an image map that
links to five Web pages of your choosing. The Web page sample.html is provided as a temporary page
to which you can link.
Instructions: Perform the following steps:
1. Using Paint, open the file seniorlogo.png from the Chapter05\IntheLab folder.
2. Determine the x- and y-coordinates necessary to create three rectangular clickable areas and two
polygonal areas (for Parcheesi and Poker) on the graphical image. ( Hint: For the polygonal shapes,
note the coordinates of each point, as discussed in the chapter.) Write down these coordinates for
later use.
3. Using Notepad++, create a new HTML file with the title Lab 5-1 in the title section. Add the text
links, as shown in Figure 5-39.
4. Insert the image seniorlogo.png. Use the usemap attribute usemap="#menubar" in the <img> tag.
5. Enter the <map> </map> tags required to create the image map named menubar.