1. Creating an Image Map

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

3. Introduction

4. Image Map Example

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

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

7. Image Map Uses
image map
button bar

8. Image Map Uses
image map

9. Image Map Uses
Image map
Linked Web page

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

11. Image Map Uses
image map

12. Image Map Uses
image map

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

14. Selecting Images Appropriate images
Obvious visual selections with divisions

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

16. Sketching the Borders of Clickable Areas

17. Sketching the Borders of Clickable Areas

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

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

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

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

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

23. Mapping Image Coordinates
rectangle
single point
circle
polygon

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

25. Mapping Image Coordinates