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

5. Creating an Image Map Image map – 2 components Selecting Images Image
Map definition
Hotspots
URLs to which they link
Selecting Images
Not all images appropriate for image mapping
Good choice – image with visual sections
Example USA map
Chapter 5: Creating an Image Map

6. Creating an Image Map Sketching the Borders of Hotspots
Clickable areas within the image
Good choice – image with visual sections
Example USA map
Mapping Image Coordinates
After determining how to divide image into areas, must determine the x and y coordinates for those sections
x-axis – runs horizontally along base of image
y-axis – runs vertically along the left of image
Point(0,0) – top left corner of image
First number of coordinate pair is x-coordinate
Chapter 5: Creating an Image Map

7. Creating an Image Map Software for Image Mapping
Simple or sophisticated image editing or paint program can be used to determine the x and y coordinates for various image points
Paint program – used in this chapter’s project
Example USA map
3 shapes for mapping areas (see next slide)
Rectangle – coordinates top-left and bottom-right corners
Circle – use center point and radius as coordinates
Polygon – use each corner point coordinate
Note: to define map area of image, must determine the x and y coordinates for that shape, then insert the coordinates for the various map shapes into the HTML code
Chapter 5: Creating an Image Map

8. determine the x and y coordinates for various image points
Creating an Image Map
determine the x and y coordinates for various image points
Chapter 5: Creating an Image Map 8 8

9. Creating an Image Map Coding the Map
Final step in an image map is writing HTML code for the map
Client-side image map - tags <map></map> and <area> used
<area> tag defines specific areas of the map and the links and anchors those areas.
X and y coordinates for each map area inserted into <area> tag with coords attribute with quotation marks separated by commas
Chapter 5: Creating an Image Map 9 9

10. Color box (might appear at bottom)
Starting Paint
Color box (might appear at bottom)
toolbox
drawing area
Chapter 5: Creating an Image Map

11. Opening an Image File in Paint
southwest.jpg image open in Paint window
Pencil button selected by default
Chapter 5: Creating an Image Map

12. Locating X- and Y- Coordinates of an Image
Point used for Nevada link
Mouse pointer
Pencil button
Pencil tool at x- and y-coordinates (234,177)
Point used for California link
x- and y-coordinates (234,177) on status bar
Chapter 5: Creating an Image Map

13. Starting Notepad and Entering Initial HTML Tags
HTML Template.html
Chapter 5: Creating an Image Map

14. <table> tag align content at top vertically
Creating a Table
<table> tag align content at top vertically
Chapter 5: Creating an Image Map

15. Inserting an Image to Use as an Image Map
hspace attribute adds horizontal space around image
usemap attribute tells browser what image map to use
<img> tag with source, width, and height attributes
Chapter 5: Creating an Image Map

16. Adding a Header and Text to a Table Cell
Name of file for Southwest header
Paragraphs of text
Chapter 5: Creating an Image Map

17. Creating a Horizontal Menu Bar with Text Links
HTML code shown in Table 5–6
Chapter 5: Creating an Image Map

18. Creating a Horizontal Menu Bar with Text Links
Horizontal menu bar with text links to three Web pages that correspond to three hotspots on image map
Chapter 5: Creating an Image Map

19. Creating an Image Map HTML code shown in Table 5–8
Chapter 5: Creating an Image Map

20. Creating an Image Map Chapter 5: Creating an Image Map
name and id attributes correspond with map name used in <img>
tag on line 16
Three <area> tags that map three states in southwest.jpg map
X- and y- coordinates are pairs of numbers that correspond to points on the map polygons; 5 pairs for Arizona and Nevada 7 pairs for California
all three hotspots are polygon shaped
Chapter 5: Creating an Image Map

21. Validating, Viewing, and Printing a Web Page
Paragraphs of text
image map
link
Horizontal menu bar
Chapter 5: Creating an Image Map

22. Creating a Second Web Page
header image
AZ flag image
Horizontal menu bar with links to all other Web pages
Image relevant to Arizona
Two-column table of facts about AZ
Chapter 5: Creating an Image Map 22 22

23. Adding a Heading HTML code shown in Table 5–9
Image of AZ flag for top, left side of Web page
Image of AZ header for center, top of Web page
Chapter 5: Creating an Image Map

24. Adding a Horizontal Menu Bar
HTML code shown in Table 5–10, pressing the
Horizontal menu bar same as that on home page; provides easy acces to all Web pages on Web site
Chapter 5: Creating an Image Map

25. Adding Information and an Image
HTML code shown in Table 5–11
Image of cactus on Arizona Web page
Table of facts about state of Arizona
Chapter 5: Creating an Image Map

26. Adding Information and an Image
Image of cactus on Arizona Web page
Table of facts about state of Arizona
Chapter 5: Creating an Image Map

27. Adding Additional Information
Remainder of AZ facts put in a table
Chapter 5: Creating an Image Map

28. Validating, Viewing, and Printing the Web Page
AZ header image
Horizontal menu bar with links to all other Web pages
Image of cactus
Table of facts about Arizona
Chapter 5: Creating an Image Map

29. Testing the Links
California Web page
Chapter 5: Creating an Image Map

30. 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

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

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

33. Homework # 9 In the Lab 1 page HTML 251-252
Creating a Donation Analysis Page
See INF 186 Computer Assignment 9 Web page for details, hints, and requirements for the assignment
Project 4: Creating Tables in a Web Site 33 33

34. Chapter 5 Complete
Creating an Image Map