Creating an Image Map

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

Introduction

Image Map Example

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

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

Image Map Uses image map button bar

Image Map Uses image map

Image Map Uses Image map Linked Web page

Image Map Uses Filter link Coffee pot link Base unit link

Image Map Uses image map

Image Map Uses image map

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

Selecting Images Appropriate images Obvious visual selections with divisions

Selecting Images Inappropriate images Does not have obvious visual selections

Sketching the Borders of Clickable Areas

Sketching the Borders of Clickable Areas

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

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

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

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

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

Mapping Image Coordinates rectangle single point circle polygon

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

Mapping Image Coordinates