HTML Project 4 Creating an Image Map

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

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

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

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

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

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