1. Chapter 5 Creating an Image Map
HTML5 & CSS 7th Edition
Chapter 5
Creating an Image Map

2. Chapter Objectives Define terms relating to image mapping
List the differences between server-side and client-side image maps
Name the two components of an image map and describe the steps to implement an image map
Distinguish between appropriate and inappropriate images for mapping
Sketch hotspots on an image
Chapter 5: Creating an Image Map

3. Chapter Objectives
Describe how the x- and y-coordinates relate to vertical and horizontal alignment
Open an image in Paint and use Paint to locate the image map coordinates
Create a home page
Create a navigation bar of text links
Insert an image onto a Web page that is used as an image map and use the usemap attribute to define an image map
Chapter 5: Creating an Image Map

4. Chapter Objectives Insert special characters into a Web page
Use the <map> </map> tags to start and end a map
Use the <area> tag to indicate the shape, coordinates, and URL for a mapped area
Create an external style sheet for styles used across the Web site
Chapter 5: Creating an Image Map

5. Plan Ahead Plan the Web site Analyze the need Choose the image
Determine what areas of the image map to use as links
Establish what other links are necessary
Create the Web page, image map, and links
Test all Web pages within the Web site
Chapter 5: Creating an Image Map

6. Starting Paint Click the Start button on the taskbar
Click All Programs on the Start menu, click Accessories on the All Programs submenu, and then point to Paint on the Accessories submenu
Click Paint
If necessary, click the Maximize button on the right side of the title bar to maximize the window
Chapter 5: Creating an Image Map

7. Starting Paint
Chapter 5: Creating an Image Map

8. Opening an Image File in Paint
With a USB drive plugged into your computer, click the Paint button and then click Open
Navigate to the location of the image you wish to open
Click the image, and then click the Open button in the Open dialog box to display the image that will be used for image mapping
Chapter 5: Creating an Image Map

9. Opening an Image File in Paint
Chapter 5: Creating an Image Map

10. Locating X- and Y-Coordinates of an Image
If necessary, click the Pencil button in the Tools group
Move the mouse pointer to the top-left corner of the word Home in the image and note the x- and y-coordinates for that point, as indicated in the status bar. Move the mouse until the coordinates read (195,63)(Do not click the mouse button.)
Move the mouse pointer to the bottom-right corner of the word Home. The coordinates should read (247,82) (your coordinates may differ slightly), as indicated on the status bar. (Do not click the mouse button.) The four coordinates to be used for this rectangular hotspot are 195,63,247,82
Move the mouse pointer to the top-left and bottom-right corners of the four other words that are used as hotspots for navigation (Skiing, Boating, and Dining) in the image. Locate the corresponding x- and y-coordinates
After you have finished, click the Close button on the right side of the title bar. If prompted, do not save any changes to the file
Chapter 5: Creating an Image Map

11. Locating X- and Y-Coordinates of an Image
Chapter 5: Creating an Image Map

12. Starting Notepad ++
Click the Start button on the Windows taskbar to display the Start menu
Click All Programs at the bottom of the left pane on the Start menu to display the All Programs list
Click the Notepad++ folder in the All Programs list
Click the Notepad++ icon in the list to display the Notepad++ window. Maximize the Notepad++ window if necessary
Click View on the menu bar. If the word wrap command does not have a check mark next to it, click word wrap
Chapter 5: Creating an Image Map

13. Entering Initial HTML Tags to Define the Web Page Structure
Chapter 5: Creating an Image Map

14. Saving an HTML File
Click File on the menu bar, click Save, and then type tahanna.html in the File name text box (do not press ENTER)
Navigate to the storage device and folder (Chapter05\ChapterFiles) where you save your Data Files and then click the Save button in the Save As dialog box to save the file
Chapter 5: Creating an Image Map

15. Inserting an Image to Use as an Image Map
If necessary, click line 14
Type <div style=”text-align: center”> and then press the ENTER key
Press the TAB key once and type <img src=”tahanna.jpg” width=”774” height=”434” alt=”Lake Tahanna” usemap= ”#menubar” /> and then press the ENTER key
Press SHIFT+TAB to move back to the left margin, type </div>, and then press the ENTER key twice
Chapter 5: Creating an Image Map

16. Inserting an Image to Use as an Image Map
Chapter 5: Creating an Image Map

17. Adding a Paragraph of Text
Chapter 5: Creating an Image Map

18. Inserting a Special Character
Position the insertion point to the right of the > in the second </span> tag on line 18 and type ® and then press the SPACEBAR
Chapter 5: Creating an Image Map

19. Creating a Horizontal Menu Bar with Text Links
Chapter 5: Creating an Image Map

20. Creating an Image Map
Chapter 5: Creating an Image Map

21. Saving the HTML File
Click the Save icon on the Notepad++ tool bar to save the most recent version of tahanna.html on the same storage device and in the same folder as the last time you saved it
Chapter 5: Creating an Image Map

22. Validating a Web Page
Open Internet Explorer, navigate to the Web site validator.w3.org, and then click the Validate by File Upload tab
Click the Browse button
Locate the tahanna.html file on your storage device, click the filename, and then click the Open button in the Choose File to Upload dialog box
Click the Check button to validate the file
Chapter 5: Creating an Image Map

23. Viewing a Web Page
In Internet Explorer, click the Address bar to select the URL on the Address bar
Type G:\Chapter05\ChapterFiles\tahanna.html on the Address bar of your browser and press enter to display the Web page
Chapter 5: Creating an Image Map

24. Viewing a Web Page
Chapter 5: Creating an Image Map

25. Testing Links on a Web Page
With the USB flash drive in drive G, click the Skiing link from the home page just created. Click back to the Home page from there, using either the image map or the text link. Next, click the other links to test the additional Web pages provided in the Data Files for Students (boating.html and dining.html). Test the links back to the Home page from those Web pages
Chapter 5: Creating an Image Map

26. Printing an HTML File
Click the Notepad++ button on the taskbar to activate the Notepad++ window
Click the Print Now button on the toolbar to print a hard copy of the HTML code
Chapter 5: Creating an Image Map

27. Printing an HTML File
Chapter 5: Creating an Image Map

28. Creating an External Style Sheet
Chapter 5: Creating an Image Map

29. Saving and Printing the CSS File
With a USB drive plugged into your computer, click File on the menu bar and then click Save As. Type stylesch5.css in the File name text box
Navigate to the location to save the file. Click the Save button in the Save As dialog box.
Click File on the menu bar and then click Print Now toolbar
Chapter 5: Creating an Image Map

30. Saving and Printing the CSS File
Chapter 5: Creating an Image Map

31. Viewing the Web Page Click the Internet Explorer button on the taskbar
Click the Skiing area on the navigation bar image map to display the Skiing Web page
Chapter 5: Creating an Image Map

32. Viewing the Web Page
Chapter 5: Creating an Image Map

33. Testing and Printing the Web Page
Click the Home link (either text or from the image map) on the Skiing Web page
Click the Print button on the Command bar to print the Web page. If the Command bar is not visible, right-click the toolbar and click Command bar on the shortcut menu
Test the links, both those in the image map and those in the text navigation bar. If any of the links do not work correctly, return to Notepad++ to modify the HTML code, save the changes, and then retest the links in the browser
Chapter 5: Creating an Image Map

34. Quitting Notepad++ and a Browser
In Notepad++, click the File menu, then Close All
Click the Close button on the Notepad++ title bar
Click the Close button on the browser title bar. If necessary, click the Close all tabs button
Chapter 5: Creating an Image Map

35. Chapter Summary Define terms relating to image mapping
List the differences between server-side and client-side image maps
Name the two components of an image map and describe the steps to implement an image map
Distinguish between appropriate and inappropriate images for mapping
Sketch hotspots on an image
Chapter 5: Creating an Image Map

36. Chapter Summary
Describe how the x- and y-coordinates relate to vertical and horizontal alignment
Open an image in Paint and use Paint to locate the image map coordinates
Create a home page
Create a navigation bar of text links
Insert an image onto a Web page that is used as an image map and use the usemap attribute to define an image map
Chapter 5: Creating an Image Map

37. Chapter Summary Insert special characters into a Web page
Use the <map> </map> tags to start and end a map
Use the <area> tag to indicate the shape, coordinates, and URL for a mapped area
Create an external style sheet for styles used across the Web site
Chapter 5: Creating an Image Map

38. HTML 7th Edition
Chapter 5 Complete