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

In the Lab continued
Instructions: Perform the following tasks:
1. Using Paint, open the file floorplan.jpg from the Chapter05\IntheLab folder of the Data Files for
Students.
2. Using Paint, determine the x- and y-coordinates necessary to create three clickable areas on
the map image. Use two rectangular-shaped areas for the Family room and the Entrance. Use a
polygonal-shaped area for the Laundry Storage room. Write down these coordinates for later use.
3. Using Notepad++, create a new HTML file with the title Lab 5-3 in the main heading section.
4. Make all headings and links (other than the e-mail link) red. Insert left- and right-margins of
20 pixels. Make the text Arial 11 point font. Links should have no text-decoration. ( Hint: Use an
embedded style sheet for these styles.)
5. Begin the body section by adding the floorplan.jpg image, as shown in Figure 5-41.
6. Use the usemap attribute usemap="#menubar" in the <img> tag.
7. Enter the <map> </map> tags required to create the image map named menubar.
8. Enter the <area> tags required to define three clickable areas on the image floorplan.jpg. Use the
x- and y-coordinates determined in Step 2 and set the href attribute to display the images provided
in the Data Files (entrance.jpg, family.jpg, and laundry.jpg) when a link is clicked.
9. Save the HTML file in the Chapter05\IntheLab folder using the filename lab5-3solution.html.
Validate the Web page. Print the HTML file.
10. Open the file lab5-3solution.html in your browser and test the image map and text links to
verify they link to the correct images.
11. Print the main Web page.
12. Submit the completed HTML files and Web pages in the format specified by your instructor.
Cases and Places
Apply your creative thinking and problem-solving skills to design and implement a solution.
1: Analyzing Web Sites for Image Map Use
Academic
Complete an analysis of frequently visited Web sites to discover which sites use image maps for
navigation. Some examples of Web sites are: amazon.com, yahoo.com, and many others. Find at least
one site that uses image maps and one that does not. Print the home pages of those sites to use as
examples. Explain in a paper why you think the use of image maps is appropriate. Also explain why you
think the Web site that does not use image maps has other navigation techniques. Submit your paper in
the format specified by your instructor.