Embed Size (px)
Citation preview
Project 4Project 4
Creating anImage Map
HTMLHTML
2
ObjectivesObjectives
• 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
ObjectivesObjectives
• 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
ObjectivesObjectives
• 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
IntroductionIntroduction
• 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
IntroductionIntroduction
7
Image Map ExampleImage Map Example
8
Image Map CautionImage 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 UsesImage 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 UsesImage Map Uses
image mapbutton bar
11
Image Map UsesImage Map Uses
image map
12
Image Map UsesImage Map Uses
Image map Linked Web page
13
Image Map UsesImage Map Uses
Filter link
Coffee pot link
Base unitlink
14
Image Map UsesImage Map Uses
imagemap
15
Image Map UsesImage Map Uses
imagemap
16
Server-Side versus Client-Side Image Maps
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 ComponentsImage Map Components
• Image maps consist of two components: Image 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 ImagesSelecting Images
• Appropriate images Obvious visual selections with divisions
19
Selecting ImagesSelecting Images
• Inappropriate images Does not have obvious visual selections
20
Sketching the Borders of Clickable Areas
Sketching the Borders of Clickable Areas
clickableareas
21
Sketching the Borders of Clickable Areas
Sketching the Borders of Clickable Areas
clickableareas
22
Sketching the Borders of Clickable Areas
Sketching the Borders of Clickable Areas
Link toHuntington
Beach Web page
Link toMaui
Web page
Link toFt. Lauderdale
Web page
