HTML
Concepts and Techniques
Fifth Edition
Chapter 5
Creating an
Image Map
Chapter 5: Creating an Image Map 2
Chapter Objectives
• Define terms relating to image mapping
• List the differences betw...
Chapter 5: Creating an Image Map 3
Chapter Objectives
• Describe how the x- and y-coordinates relate to
vertical and horiz...
Chapter 5: Creating an Image Map 4
Chapter Objectives
• Add text to a table cell and create a horizontal menu
bar with tex...
Chapter 5: Creating an Image Map 5
General Project Guidelines – Plan Ahead
• Plan the Web site.
• Analyze the need what co...
Chapter 5: Creating an Image Map 6
Introduction to Image Maps
• Use an image map to create 3 clickable areas within a sing...
Chapter 5: Creating an Image Map 7
Using Image Maps
• There are many risks in using image map:
– Image does not load and a...
Chapter 5: Creating an Image Map 8
Usage of Image Maps
• Image maps can enhance the functionality and appeal
of Web pages ...
Chapter 5: Creating an Image Map 9
Server-Side vs. Client-Side Image Maps
• Two types of image maps exist: server-side and...
Chapter 5: Creating an Image Map 10
Creating an Image Maps
• An image map consists of two components: an image and a
map d...
Figure 5-14: Coordinate of map areas
Chapter 5: Creating an Image Map 11
Chapter 5: Creating an Image Map 12
Starting Paint
• Click the Start button on the taskbar
• Point to All Programs on the ...
Chapter 5: Creating an Image Map 13
Starting Paint
Chapter 5: Creating an Image Map 14
Opening an Image File in Paint
• With a USB drive plugged into your computer, click Fi...
Chapter 5: Creating an Image Map 15
Opening an Image File in Paint
• If necessary, scroll until UDISK 2.0 (G:) appears in ...
Chapter 5: Creating an Image Map 16
Opening an Image File in Paint
Chapter 5: Creating an Image Map 17
Locating X- and Y- Coordinates of an Image
• If necessary, click the Pencil button in ...
Chapter 5: Creating an Image Map 18
Locating X- and Y- Coordinates of an Image
Starting Notepad and Entering Initial HTML
Tags
Chapter 5: Creating an Image Map 19
Chapter 5: Creating an Image Map 20
Creating a Table
• With the insertion point on line 12, type <table
width=”75%”> and t...
Chapter 5: Creating an Image Map 21
Creating a Table
Inserting an Image to Use as an Image Map
• If necessary, click line 15
• Type <td> and then press the ENTER key
• Type <i...
Inserting an Image to Use as an Image Map
Chapter 5: Creating an Image Map 23
Adding a Header and Text to a Table Cell
• If necessary, click line 19
• Enter the HTML code shown in Table 5–5 on page
HT...
Adding a Header and Text to a Table Cell
Chapter 5: Creating an Image Map 25
Creating a Horizontal Menu Bar with Text
Links
• If necessary, click line 31
• Enter the HTML code shown in Table 5–6 and ...
Creating a Horizontal Menu Bar with Text
Links
Chapter 5: Creating an Image Map 27
Ending the Table
• If necessary, click line 37
• Type </tr> and then press the ENTER key
• Type </table> and then press th...
Ending the Table
Chapter 5: Creating an Image Map 29
Creating an Image Map
• If necessary, click line 40
• Enter the HTML code shown in Table 5–8
Chapter 5: Creating an Image ...
Creating an Image Map
Chapter 5: Creating an Image Map 31
Saving and Printing the HTML File
• With a USB drive plugged into your computer, click File on the
Notepad menu bar and th...
Saving and Printing the HTML File
Chapter 5: Creating an Image Map 33
Validating, Viewing, and Printing a Web Page
• Open your browser and browse to the
validator.w3.org link
• Click the Valid...
Validating, Viewing, and Printing a Web Page
• Click the Open button in the File Upload dialog box and
the file name will ...
Validating, Viewing, and Printing a Web Page
• Type g:Chapter05ChapterFiles
southwest.html to display the new URL on the
A...
Validating, Viewing, and Printing a Web Page
Chapter 5: Creating an Image Map 37
Copying and Pasting HTML Code to a
New File
• Click the southwest - Notepad button on the taskbar
• When the southwest.htm...
Copying and Pasting HTML Code to a
New File
Chapter 5: Creating an Image Map 39
Changing the Web Page Title
• Highlight the words Southwest States between the
<title> and </title> tags on line 8. Type A...
Changing the Web Page Title
Chapter 5: Creating an Image Map 41
Adding a Heading
• If necessary, click line 12
• Enter the HTML code shown in Table 5–9, pressing the
ENTER key twice afte...
Adding a Heading
Chapter 5: Creating an Image Map 43
Adding a Horizontal Menu Bar
• If necessary, click line 18
• Enter the HTML code shown in Table 5–10, pressing the
ENTER k...
Adding a Horizontal Menu Bar
Chapter 5: Creating an Image Map 45
Adding Information and an Image
• If necessary, click line 28
• Enter the HTML code shown in Table 5–11, pressing the
ENTE...
Adding Information and an Image
Chapter 5: Creating an Image Map 47
Adding Additional Information
• If necessary, click line 55
• Enter the HTML code shown in Table 5–12 on HTML
241
Chapter ...
Adding Additional Information
Chapter 5: Creating an Image Map 49
Saving and Printing the HTML File
• With a USB drive plugged into your computer, click
File on the menu bar and then click...
Saving and Printing the HTML File
Chapter 5: Creating an Image Map 51
Validating, Viewing, and Printing the Web
Page
• Click the Internet Explorer button on the taskbar
• Validate the Arizona ...
Validating, Viewing, and Printing the Web
Page
Chapter 5: Creating an Image Map 53
Chapter 5: Creating an Image Map 54
Testing the Links
• Click the Home link on the Arizona Web page
• Click the Nevada are...
Chapter 5: Creating an Image Map 55
Testing the Links
Chapter 5: Creating an Image Map 56
Quitting Notepad and a Browser
• Click the Close button on the browser title bar
• Cli...
Chapter 5: Creating an Image Map 57
Chapter Summary
• Define terms relating to image mapping
• List the differences betwee...
Chapter 5: Creating an Image Map 58
Chapter Summary
• Describe how the x- and y-coordinates relate to
vertical and horizon...
Chapter 5: Creating an Image Map 59
Chapter Summary
• Add text to a table cell and create a horizontal menu
bar with text ...
HTML
Concepts and Techniques
Fifth Edition
Chapter 5 Complete
Creating an
Image Map
Upcoming SlideShare
Loading in …5
×

Ddpz2613 topic5 image

236 views
167 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
236
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Ddpz2613 topic5 image

  1. 1. HTML Concepts and Techniques Fifth Edition Chapter 5 Creating an Image Map
  2. 2. 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
  3. 3. 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 map the coordinates • Create the home page and additional Web pages • Create a table, insert an image into a table, and use the usemap attribute to define an image map
  4. 4. Chapter 5: Creating an Image Map 4 Chapter Objectives • Add text to a table cell and create a horizontal menu bar with text links • 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 • Change link colors
  5. 5. Chapter 5: Creating an Image Map 5 General Project Guidelines – Plan Ahead • Plan the Web site. • Analyze the need what content to include an image map. • 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
  6. 6. Chapter 5: Creating an Image Map 6 Introduction to Image Maps • Use an image map to create 3 clickable areas within a single image, each with a link to a different Web page. • All three of the clickable areas have a polygon shape. • The borders of 3 clickable areas encloses a specific area of the map. • These outlines or border are not visible on the Web page. • A Web page visitor clicking anywhere within one of the polygonal shaped clickable areas will link to the associated Web page. • Any area outside those clickable areas is not linked to another Web page.
  7. 7. Chapter 5: Creating an Image Map 7 Using Image Maps • There are many risks in using image map: – Image does not load and a user will not have ability to navigate to other linked Web page. – Using a large image for an image map can increase the amount of time required for pages to download. • To avoid such performance issues: – Some people turn off the viewing of images when they browse Web page – Using text links in conjunction with the image map ensures that if the image does not download or a Web page visitor has images turned off, a user still can navigate to other Web page using a text links.
  8. 8. Chapter 5: Creating an Image Map 8 Usage of Image Maps • Image maps can enhance the functionality and appeal of Web pages in many way: – An image map can be used as an image map button bar, which is a menu bar that uses graphical images. – Image maps are also utilized to divide a geographical map into hotspots – Image maps can be used in the travel industry. The levels on a cruise ship be used to link to the floor plan of a particular deck. – Organizations also use image maps to create hotspots that link different functional area within a business. – A company with several products or services can also use of image map as a creative way to provide links to more specific information about those products or services.
  9. 9. Chapter 5: Creating an Image Map 9 Server-Side vs. Client-Side Image Maps • Two types of image maps exist: server-side and client-side. • In a server-side image map: – The image is display by the client (browser) and implemented by a program that runs on the Web server. – When a Web page visitor clicks a link in a server-side image maps, the browser sends the x- and y-coordinates to Web server – Web server interprets coordinates and link the visitor to the correct Web page. • In a client-side image map: – The browser does all the work. – Most Web developers prefer to work with client-side image maps – The browser process the data without interaction with the Web server
  10. 10. Chapter 5: Creating an Image Map 10 Creating an Image Maps • An image map consists of two components: an image and a map definition that defines the hotspots and the URLs to which they links. • Map areas can use one of three shapes: rectangle, circle or polygon. • Understand the image map process: 1. Select an image to use as an image map 2. Sketch in the hotspots on the image 3. Map the image coordinates (x- and y- coordinates) for each hotspot. 4. Create the HTML code for the image map. The map start tag <map> and map end tag </map>.
  11. 11. Figure 5-14: Coordinate of map areas Chapter 5: Creating an Image Map 11
  12. 12. Chapter 5: Creating an Image Map 12 Starting Paint • Click the Start button on the taskbar • Point to 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
  13. 13. Chapter 5: Creating an Image Map 13 Starting Paint
  14. 14. Chapter 5: Creating an Image Map 14 Opening an Image File in Paint • With a USB drive plugged into your computer, click File on the Paint menu bar and then click Open on the File menu • If Computer is not displayed in the Favorite Links section, drag the top or bottom edge of the Open dialog box until Computer is displayed • Click Computer in the Favorite Links section to display a list of available drives
  15. 15. Chapter 5: Creating an Image Map 15 Opening an Image File in Paint • If necessary, scroll until UDISK 2.0 (G:) appears in the list of available drives • If necessary, click the Look in box arrow, and then double-click USB drive (G:). Double-click the Chapter05 folder, and then double-click the ChapterFiles folder in the list of available folders • Click the southwest.jpg image, then click the Open button in the Open dialog box to display the image that will be used for image mapping in this chapter
  16. 16. Chapter 5: Creating an Image Map 16 Opening an Image File in Paint
  17. 17. Chapter 5: Creating an Image Map 17 Locating X- and Y- Coordinates of an Image • If necessary, click the Pencil button in the toolbox • Move the mouse pointer near the top-left corner of Arizona and note the x- and y-coordinates for that point as indicated in the status bar. Move the mouse until the coordinates read (157,162) (Do not click the mouse button) • Move the mouse pointer near the top-right corner of Arizona. The coordinates should read (234,177) (your coordinates may differ slightly) as indicated on the status bar (Do not click the mouse button) • Move the mouse pointer to other points in the Arizona, California and Nevada hotspots by following the x- and y-coordinates in Table 5–1 on page HTML 219 • 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
  18. 18. Chapter 5: Creating an Image Map 18 Locating X- and Y- Coordinates of an Image
  19. 19. Starting Notepad and Entering Initial HTML Tags Chapter 5: Creating an Image Map 19
  20. 20. Chapter 5: Creating an Image Map 20 Creating a Table • With the insertion point on line 12, type <table width=”75%”> and then press the ENTER key • Type <tr valign=”top”> and then press the ENTER key twice
  21. 21. Chapter 5: Creating an Image Map 21 Creating a Table
  22. 22. Inserting an Image to Use as an Image Map • If necessary, click line 15 • Type <td> and then press the ENTER key • Type <img src=”southwest.jpg” width=”374” height=”300” border=”0” alt=”Southwest states” hspace=”20” usemap=”#states” /> and then press the ENTER key • Type </td> and then press the ENTER key twice Chapter 5: Creating an Image Map 22
  23. 23. Inserting an Image to Use as an Image Map Chapter 5: Creating an Image Map 23
  24. 24. Adding a Header and Text to a Table Cell • If necessary, click line 19 • Enter the HTML code shown in Table 5–5 on page HTML 227 and then press the ENTER key twice Chapter 5: Creating an Image Map 24
  25. 25. Adding a Header and Text to a Table Cell Chapter 5: Creating an Image Map 25
  26. 26. Creating a Horizontal Menu Bar with Text Links • If necessary, click line 31 • Enter the HTML code shown in Table 5–6 and then press the ENTER key twice Chapter 5: Creating an Image Map 26
  27. 27. Creating a Horizontal Menu Bar with Text Links Chapter 5: Creating an Image Map 27
  28. 28. Ending the Table • If necessary, click line 37 • Type </tr> and then press the ENTER key • Type </table> and then press the ENTER key twice Chapter 5: Creating an Image Map 28
  29. 29. Ending the Table Chapter 5: Creating an Image Map 29
  30. 30. Creating an Image Map • If necessary, click line 40 • Enter the HTML code shown in Table 5–8 Chapter 5: Creating an Image Map 30
  31. 31. Creating an Image Map Chapter 5: Creating an Image Map 31
  32. 32. Saving and Printing the HTML File • With a USB drive plugged into your computer, click File on the Notepad menu bar and then click Save As. Type southwest.html in the File name text box (do not press ENTER) • If Computer is not displayed in the Favorite Links section, drag the top or bottom edge of the Save As dialog box until Computer is displayed • Click Computer in the Favorite Links section to display a list of available drives • If necessary, scroll until UDISK 2.0 (G:) appears in the list of available drives • If necessary, open the Chapter05 ChapterFiles folder • Click the Save button in the Save As dialog box to save the file on the USB flash drive with the name southwest.html • Click File on the menu bar, and then click Print on the File menu Chapter 5: Creating an Image Map 32
  33. 33. Saving and Printing the HTML File Chapter 5: Creating an Image Map 33
  34. 34. Validating, Viewing, and Printing a Web Page • Open your browser and browse to the validator.w3.org link • Click the Validate by File Upload tab • Click the Browse button • Locate the southwest.html file on your storage device and click the file name Chapter 5: Creating an Image Map 34
  35. 35. Validating, Viewing, and Printing a Web Page • Click the Open button in the File Upload dialog box and the file name will be inserted into the File box • Click the Check button. The resulting validation should display • In Internet Explorer, click the Address bar to select the URL on the Address bar Chapter 5: Creating an Image Map 35
  36. 36. Validating, Viewing, and Printing a Web Page • Type g:Chapter05ChapterFiles southwest.html to display the new URL on the Address bar and then press the ENTER key • Click the e-mail link to verify that it works correctly. Next, test the links to the California and Nevada pages by clicking the corresponding Mapped areas of the image and the text links at the bottom of the page • Click the Print button on the Standard Buttons toolbar to print the Web page Chapter 5: Creating an Image Map 36
  37. 37. Validating, Viewing, and Printing a Web Page Chapter 5: Creating an Image Map 37
  38. 38. Copying and Pasting HTML Code to a New File • Click the southwest - Notepad button on the taskbar • When the southwest.html file is displayed in the Notepad window, click immediately to the left of the < in the <!DOCTYPE html tag on line 1. Drag through the <body> tag on line 10 to highlight lines 1 through 10 • Press CTRL+C to copy the selected lines to the Clipboard • Click File on the menu bar and then click New • Press CTRL+V to paste the contents of the Clipboard into the new file Chapter 5: Creating an Image Map 38
  39. 39. Copying and Pasting HTML Code to a New File Chapter 5: Creating an Image Map 39
  40. 40. Changing the Web Page Title • Highlight the words Southwest States between the <title> and </title> tags on line 8. Type Arizona as the title to replace the words Southwest States • Click immediately to the right of the <body> tag on line 10 and then press the ENTER key three times • Type </body> and then press the ENTER key • Type </html> • Return the insertion point to line 12 Chapter 5: Creating an Image Map 40
  41. 41. Changing the Web Page Title Chapter 5: Creating an Image Map 41
  42. 42. Adding a Heading • If necessary, click line 12 • Enter the HTML code shown in Table 5–9, pressing the ENTER key twice after the last line Chapter 5: Creating an Image Map 42
  43. 43. Adding a Heading Chapter 5: Creating an Image Map 43
  44. 44. Adding a Horizontal Menu Bar • If necessary, click line 18 • Enter the HTML code shown in Table 5–10, pressing the ENTER key twice after the last line Chapter 5: Creating an Image Map 44
  45. 45. Adding a Horizontal Menu Bar Chapter 5: Creating an Image Map 45
  46. 46. Adding Information and an Image • If necessary, click line 28 • Enter the HTML code shown in Table 5–11, pressing the ENTER key twice after the last line Chapter 5: Creating an Image Map 46
  47. 47. Adding Information and an Image Chapter 5: Creating an Image Map 47
  48. 48. Adding Additional Information • If necessary, click line 55 • Enter the HTML code shown in Table 5–12 on HTML 241 Chapter 5: Creating an Image Map 48
  49. 49. Adding Additional Information Chapter 5: Creating an Image Map 49
  50. 50. Saving and Printing the HTML File • With a USB drive plugged into your computer, click File on the menu bar and then click Save As. Type arizona.html in the File name text box • If necessary, click UDISK (G:) in the Save in list. Click the Chapter05 folder and then double-click the ChapterFiles folder in the list of available folders • Click the Save button in the Save As dialog box • Click File on the menu bar and then click Print on the File menu Chapter 5: Creating an Image Map 50
  51. 51. Saving and Printing the HTML File Chapter 5: Creating an Image Map 51
  52. 52. Validating, Viewing, and Printing the Web Page • Click the Internet Explorer button on the taskbar • Validate the Arizona Web page using the W3C validation service • Click the Arizona area on the Southwest states image map to display the Web page • Click the Print button on the Standard Buttons toolbar to print the Web page Chapter 5: Creating an Image Map 52
  53. 53. Validating, Viewing, and Printing the Web Page Chapter 5: Creating an Image Map 53
  54. 54. Chapter 5: Creating an Image Map 54 Testing the Links • Click the Home link on the Arizona Web page • Click the Nevada area on the image map on the home page • Click the California link on the Nevada Web page • Click the Home link on the California Web page • 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
  55. 55. Chapter 5: Creating an Image Map 55 Testing the Links
  56. 56. Chapter 5: Creating an Image Map 56 Quitting Notepad and a Browser • Click the Close button on the browser title bar • Click the Close button on the Notepad window title bar
  57. 57. Chapter 5: Creating an Image Map 57 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
  58. 58. Chapter 5: Creating an Image Map 58 Chapter Summary • Describe how the x- and y-coordinates relate to vertical and horizontal alignment • Open an image in Paint and use Paint to map the coordinates • Create the home page and additional Web pages • Create a table, insert an image into a table, and use the usemap attribute to define a map
  59. 59. Chapter 5: Creating an Image Map 59 Chapter Summary • Add text to a table cell and create a horizontal menu bar with text links • 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 • Change link colors
  60. 60. HTML Concepts and Techniques Fifth Edition Chapter 5 Complete Creating an Image Map

×