1. HTML
Concepts and Techniques
Fifth Edition
Chapter 5
Creating an
Image Map

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. 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. 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. 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. 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. 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. 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. 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. 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. Figure 5-14: Coordinate of map areas
Chapter 5: Creating an Image Map 11

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. Chapter 5: Creating an Image Map 13
Starting Paint

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. 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. Chapter 5: Creating an Image Map 16
Opening an Image File in Paint

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. Chapter 5: Creating an Image Map 18
Locating X- and Y- Coordinates of an Image

19. Starting Notepad and Entering Initial HTML
Tags
Chapter 5: Creating an Image Map 19

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. Chapter 5: Creating an Image Map 21
Creating a Table

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. Inserting an Image to Use as an Image Map
Chapter 5: Creating an Image Map 23

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. Adding a Header and Text to a Table Cell
Chapter 5: Creating an Image Map 25

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. Creating a Horizontal Menu Bar with Text
Links
Chapter 5: Creating an Image Map 27

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. Ending the Table
Chapter 5: Creating an Image Map 29

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. Creating an Image Map
Chapter 5: Creating an Image Map 31

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. Saving and Printing the HTML File
Chapter 5: Creating an Image Map 33

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. 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. 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. Validating, Viewing, and Printing a Web Page
Chapter 5: Creating an Image Map 37

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. Copying and Pasting HTML Code to a
New File
Chapter 5: Creating an Image Map 39

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. Changing the Web Page Title
Chapter 5: Creating an Image Map 41

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. Adding a Heading
Chapter 5: Creating an Image Map 43

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. Adding a Horizontal Menu Bar
Chapter 5: Creating an Image Map 45

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. Adding Information and an Image
Chapter 5: Creating an Image Map 47

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. Adding Additional Information
Chapter 5: Creating an Image Map 49

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. Saving and Printing the HTML File
Chapter 5: Creating an Image Map 51

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. Validating, Viewing, and Printing the Web
Page
Chapter 5: Creating an Image Map 53

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. Chapter 5: Creating an Image Map 55
Testing the Links

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. 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. 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. 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. HTML
Concepts and Techniques
Fifth Edition
Chapter 5 Complete
Creating an
Image Map