1. HTML
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