1. Project 4
Creating an Image Map

2. 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
Describe the steps to implement an image map
Distinguish between appropriate and inappropriate images for mapping

3. Objectives Sketch hotspots on an image
Describe how x- and y- coordinates relate to vertical and horizontal alignment
Open an image in Paint
Use Paint to map the coordinates of an image
Use the <MAP></MAP> tags to begin and end a map

4. Objectives
Insert an image into a table and use the USEMAP attribute to define a map
Use the <AREA> tag to indicate the shape, coordinates, and URL for a mapped area
Change link colors
Create a link list
Insert a chart into a table on a Web page

5. Introduction
Image maps allow developers to create multiple links on a single image
Images can be divided into multiple clickable areas, or hotspots
We will use Microsoft Paint to determine the coordinates for creating hotspots on image maps
You will enter coordinates within the <AREA> tag to create hotspots

6. Introduction

7. Image Map Example

8. Image Map Caution Image downloading increases Web page loading time
Users sometimes turn off images because of this issue
To remedy this problem, all Web pages should have text links to the URLs reflected in the image map

9. Image Map Uses
You can use one image (instead of multiple) to link to more than one Web site
You can depict links in graphical format
Create an image map button bar
Divide a geographical map into hotspots

10. Image Map Uses
image map
button bar

11. Image Map Uses
image map

12. Image Map Uses
Image map
Linked Web page

13. Image Map Uses
Filter link
Coffee pot link
Base unit link

14. Image Map Uses
image map

15. Image Map Uses
image map

16. Server-Side versus Client-Side Image Maps
Server-side image map
The image is displayed by the browser (client) and implemented by a program running on the Web server
Client-side image map
The browser interprets the coordinates the user clicks and sends the user to the appropriate site

17. Image Map Components Image maps consist of two components:
Map Definition
Four steps to creating an image map:
Select an image
Sketch in the hotspots
Map the image coordinates for each hotspot
Code the image map

18. Selecting Images Appropriate images
Obvious visual selections with divisions

19. Selecting Images Inappropriate images
Does not have obvious visual selections

20. Sketching the Borders of Clickable Areas

21. Sketching the Borders of Clickable Areas

22. Sketching the Borders of Clickable Areas
Link to Maui Web page
Link to Huntington Beach Web page
Link to Ft. Lauderdale Web page

23. Mapping Coordinates
Find the x- and y- coordinates for the images, relative to the x-axis and y-axis
In a coordinate pair, the first number is the x-coordinate and the second number is the y-coordinate
Microsoft Paint may be used to find the coordinate pairs of images

24. x- and y- coordinates on the Status Bar
Mapping Coordinates
coordinate point (0,0)
x- and y- coordinates on the Status Bar

25. Coding the Map Mapping tags <MAP> and </MAP>
Creates a client-side image map
<AREA> and </AREA>
COORDS attribute

26. Mapping Image Coordinates
Four shapes of map areas
Rectangle
Single Point
Circle
Polygon

27. Mapping Image Coordinates
rectangle
single point
circle
polygon

28. Mapping Image Coordinates
Rectangles
Retrieve coordinates of top-left and bottom-right corners
Circles
Retrieve coordinates of the center point and the radius in pixels
Single Point
Retrieve the coordinates of the point
Polygon
Retrieve the coordinates for each corner of the shape

29. Mapping Image Coordinates

30. Starting Paint Click the Start button on the taskbar
Point to Programs on the Start menu, Point to Accessories on the Programs submenu, and then point to Paint on the Accessories submenu

31. Click Paint. Maximize the window, if necessary

32. The Paint Window Drawing Area Toolbox Menu bar Status bar
Where the image displays
Toolbox
Displays tools you can use to edit or draw your image
Menu bar
Shows the Paint menu names
Status bar
Displays the coordinates of the center of the mouse pointer at its current position on the image

33. menu bar
drawing area
toolbox
status bar

34. Opening an Image
Insert the HTML Data Disk into drive A. In Paint, click File on the menu bar and then click Open. If necessary, click the Look In box arrow and then click 3½ Floppy (A:). If necessary, click the Files of type box arrow and select GIF files (*.gif). Click surfmap.gif on the list of files displayed.
Click the Open button in the Open dialog box

36. Locating the X- and Y- Coordinates
X- and y- coordinates begin with (0,0) in the top-left corner of the image
We will first be finding the top-left corner of each rectangular clickable area, as well as the bottom-right corner

37. Locating the X- and Y- Coordinates
top-left corners
bottom-right corners

38. Locating the X- and Y- Coordinates

39. Coding the Image Map Using Tags and Attributes
The <MAP> and </MAP> tags start and end each image map
In the <AREA> tag, you insert the shape, coordinates, alternate text, and the URL for the link
<AREA SHAPE=“ “ ALT=“ “ COORDS=“ “ HREF=“ “>

40. Image Map Tag Attributes

41. Start Notepad

42. Enter Initial HTML Tags

43. Creating the Home Page

44. Creating a Table Table attributes Two rows and two columns No border
Left-aligned
Change the vertical alignment of the contents of all cells in the table to be at the top of the cell

45. Creating a Table

46. Inserting an Image Use the surfmap.gif image on the HTML Data Disk
The BORDER=0 attribute will display a borderless image
The HSPACE=10 attribute will add 10 pixels of space between the text and image
The USEMAP attribute of the image tag will indicate the URL of a client-side image map

47. Inserting an Image

48. Inserting a Heading
font size
font face
font color
heading

49. Inserting a Paragraph
The table on the Surf’s Up home page contains three paragraphs in the right-hand column of the first row
Always include an address on the home page for visitor contact

50. Inserting a Paragraph
Enter the following HTML starting on line 14

51. Inserting a Paragraph
paragraphs of text
URL

52. Creating Text Links
Enter the following HTML starting on line 26

53. Creating Text Links
text links

54. Creating an Image Map
The <AREA> tag has three attributes – SHAPE, COORDS, and HREF
SHAPE attribute
RECT, CIRCLE, POINT, POLY
COORDS attribute
Coordinates of points that define image map
HREF attribute
The URL of the hotspot’s linked page

55. Creating an Image Map
Enter the following HTML starting on line 34

56. Creating an Image Map map start target name coordinates and links
map end

57. Changing Link Colors
Text link colors vary as the status of the link changes
LINK
ALINK
VLINK
Colors of the links should match the color of the heading
Change the link attributes in the <BODY> tag

58. Changing Link Colors
link color changes

59. Save and Print the HTML File
Insert the HTML Data Disk into drive A
Select Save As from the File menu
Type surfhome.htm in the File name text box, then click the Save button
Select Print from the File menu

60. Save and Print the HTML File

61. Viewing the Web Page Start your browser
Type a:\surfhome.htm in the Address text box and press the ENTER key

62. Viewing the Web Page
images

63. Printing the Web Page
Click the Print button on the Standard Buttons toolbar

64. Creating a Second Web Page
This section shows you how to create the Huntington Beach Web site

65. Copying a Table to a New File
Click the Surf’s Up Home Page button on the taskbar to minimize the browser
Click immediately to the left of the < in the <HTML> tag on line 1. Drag through the end of the <BODY> tag on line 5
Press CTRL+C to copy the selected lines
Select New from the File menu
Press CTRL+V to paste the contents from the Clipboard into a new file

66. Copying a Table to a New File
pasted tags and text

67. Changing the Title
Highlight the words, Home Page, between the <TITLE> and </TITLE> tags on line 3. Type Huntington Beach as the text
Click immediately to the right of the </TABLE> tag on line 5. Press the ENTER key twice
Type the closing </BODY> and </HTML> tags

68. Changing the Title
change to title

69. Inserting an Image Create a table with two rows and two columns
Insert the image in the first column of the first row
This image is stored on the HTML Data Disk

70. Inserting an Image
Enter the following HTML starting on line 7

71. Inserting an Image
table and image tags

72. Inserting the Heading and Paragraph
Enter the following HTML starting on line 14

73. Inserting the Heading and Paragraph
heading and paragraph code

74. Creating a Link List
It is important to include text links on every page with an image map for users who have images turned off
Create this link list in the left hand column of the second row

75. Creating a Link List
Enter the following HTML starting on line 26

76. Creating a Link List
link list

77. Inserting a Chart
Charts provide an excellent way to display sales information
Insert this chart in the second column of the second row
The chart is stored on the HTML Data Disk

78. Inserting a Chart
Enter the following HTML starting on line 34

79. HTML to display chart image
Inserting a Chart
HTML to display chart image

80. Creating an E-Mail Link
Enter the following HTML starting on line 40 to display the link

81. Creating an E-Mail Link

82. Save and Print the HTML File
Insert the HTML Data Disk into drive A
Select Save As from the File menu
Type hnbch.htm in the File name text box, then click the Save button
Select Print from the File menu

83. Save and Print the HTML File

84. Close Notepad
Click the Close button on the right-hand side of the title bar

85. Viewing the Web Page
Click the Surf’s Up Home Page button on the taskbar to maximize your browser
Click the Huntington Beach link from the image map on the Surf’s Up home page

86. Viewing the Web Page
images

87. Printing the Web Page
Click the Print button on the Standard Buttons toolbar

88. Testing the Links Click the Home link on the Huntington Beach Web page
Click the Ft. Lauderdale link on the home page
Click the Huntington Beach link on the Ft. Lauderdale Web page
Click the Maui link on the Huntington Beach Web page
If the links fail, edit the HTML code and retest the links

89. Close your Browser
Click the Close button on the right-hand side of the title bar

90. Image Mapping Software
Several image mapping software tools generate the x- and y- coordinates based on the clickable areas that you select on the image

91. 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
Describe the steps to implement an image map
Distinguish between appropriate and inappropriate images for mapping

92. Summary Sketch hotspots on an image
Describe how x- and y- coordinates relate to vertical and horizontal alignment
Open an image in Paint
Use Paint to map the coordinates of an image
Use the <MAP></MAP> tags to begin and end a map

93. Summary
Insert an image into a table and use the USEMAP attribute to define a map
Use the <AREA> tag to indicate the shape, coordinates, and URL for a mapped area
Change link colors
Create a link list
Insert a chart into a table on a Web page

94. What You Should Know

95. Project 4 Complete