Transcript Chapter 5

HTML
Concepts and Techniques
Fifth Edition
Chapter 5
Creating an
Image Map
Chapter 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 and
describe the steps to implement an image map
• Distinguish between appropriate and
inappropriate images for mapping
• Sketch hotspots on an image
Chapter 5: Creating an Image Map
2
Chapter Objectives
• Describe how the x- and y-coordinates relate to
vertical and horizontal alignment
• Open an image in Paint and use Paint to map the
coordinates
• Create the home page and additional Web pages
• Create a table, insert an image into a table, and
use the usemap attribute to define an image map
Chapter 5: Creating an Image Map
3
Chapter Objectives
• Add text to a table cell and create a horizontal
menu bar with text links
• Use the <map> </map> tags to start and end a
map
• Use the <area> tag to indicate the shape,
coordinates, and URL for a mapped area
• Change link colors
Chapter 5: Creating an Image Map
4
Creating an Image Map
• Image map – 2 components
1. Image
2. Map definition
a. Hotspots
b. URLs to which they link
• Selecting Images
–
Not all images appropriate for image mapping
•
Good choice – image with visual sections
– Example USA map
Chapter 5: Creating an Image Map
5
Creating an Image Map
• Sketching the Borders of Hotspots
– Clickable areas within the image
• Good choice – image with visual sections
– Example USA map
• Mapping Image Coordinates
– After determining how to divide image into areas,
must determine the x and y coordinates for those
sections
• x-axis – runs horizontally along base of image
• y-axis – runs vertically along the left of image
• Point(0,0) – top left corner of image
– First number of coordinate pair is x-coordinate
Chapter 5: Creating an Image Map
6
Creating an Image Map
• Software for Image Mapping
– Simple or sophisticated image editing or paint program
can be used to determine the x and y coordinates for
various image points
• Paint program – used in this chapter’s project
– Example USA map
• 3 shapes for mapping areas (see next slide)
1. Rectangle – coordinates top-left and bottom-right corners
2. Circle – use center point and radius as coordinates
3. Polygon – use each corner point coordinate
Note: to define map area of image, must determine the x and y coordinates for
that shape, then insert the coordinates for the various map shapes into the
HTML code
Chapter 5: Creating an Image Map
7
Creating an Image Map
determine the x and y coordinates for various image points
Chapter 5: Creating an Image Map
8
Creating an Image Map
• Coding the Map
– Final step in an image map is writing HTML
code for the map
• Client-side image map - tags <map></map>
and <area> used
– <area> tag defines specific areas of the map
and the links and anchors those areas.
• X and y coordinates for each map area inserted into
<area> tag with coords attribute with quotation
marks separated by commas
Chapter 5: Creating an Image Map
9
Starting Paint
Color box
(might appear
at bottom)
toolbox
drawing area
Chapter 5: Creating an Image Map
10
Opening an Image File in Paint
southwest.jpg
image open in
Paint window
Pencil button
selected by
default
Chapter 5: Creating an Image Map
11
Locating X- and Y- Coordinates
of an Image
Point used for
Nevada link
Mouse
pointer
Pencil
button
Pencil tool at x- and
y-coordinates (234,177)
Point used for
California link
x- and y-coordinates
(234,177) on status bar
Chapter 5: Creating an Image Map
12
Starting Notepad and Entering Initial
HTML Tags
HTML Template.html
Chapter 5: Creating an Image Map
13
Creating a Table
<table> tag
align content at
top vertically
Chapter 5: Creating an Image Map
14
Inserting an Image to Use as an
Image Map
hspace attribute
adds horizontal
space around image
usemap attribute tells
browser what image
map to use
<img> tag with
source, width, and
height attributes
Chapter 5: Creating an Image Map
15
Adding a Header and Text to a Table
Cell
Name of file for
Southwest header
Paragraphs
of text
Chapter 5: Creating an Image Map
16
Creating a Horizontal Menu Bar with
Text Links
HTML code shown in Table 5–6
Chapter 5: Creating an Image Map
17
Creating a Horizontal Menu Bar with
Text Links
Horizontal menu bar with text
links to three Web pages that
correspond to three hotspots
on image map
Chapter 5: Creating an Image Map
18
Creating an Image Map
• HTML code shown in Table 5–8
Chapter 5: Creating an Image Map
19
Creating an Image Map
name and id attributes
correspond with map
name used in <img>
tag on line 16
Three <area> tags
that map three
states in
southwest.jpg
map
all three hotspots are
polygon shaped
Chapter 5: Creating an Image Map
X- and y- coordinates are pairs
of numbers that correspond to
points on the map polygons;
5 pairs for Arizona and Nevada
7 pairs for California
20
Validating, Viewing, and Printing a
Web Page
Paragraphs
of text
image map
E-mail link
Horizontal
menu bar
Chapter 5: Creating an Image Map
21
Creating a Second Web Page
header
image
AZ flag
image
Horizontal menu
bar with links to all
other Web pages
Image relevant
to Arizona
Two-column table
of facts about AZ
Chapter 5: Creating an Image Map
22
Adding a Heading
HTML code shown in Table 5–9
Image of AZ flag
for top, left side
of Web page
Image of AZ
header for center,
top of Web page
Chapter 5: Creating an Image Map
23
Adding a Horizontal Menu Bar
• HTML code shown in Table 5–10, pressing the
Horizontal menu
bar same as that on
home page; provides
easy acces to all Web
pages on Web site
Chapter 5: Creating an Image Map
24
Adding Information and an Image
HTML code shown in Table 5–11
Image of cactus
on Arizona
Web page
Table of facts
about state of
Arizona
Chapter 5: Creating an Image Map
25
Adding Information and an Image
Image of cactus
on Arizona
Web page
Table of facts
about state of
Arizona
Chapter 5: Creating an Image Map
26
Adding Additional Information
Remainder of
AZ facts put
in a table
Chapter 5: Creating an Image Map
27
Validating, Viewing, and Printing the
Web Page
AZ header
image
Horizontal menu
bar with links to all
other Web pages
Image of
cactus
Table of facts
about Arizona
Chapter 5: Creating an Image Map
28
Testing the Links
California
Web page
Chapter 5: Creating an Image Map
29
Chapter Summary
• 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 and
describe the steps to implement an image map
• Distinguish between appropriate and
inappropriate images for mapping
• Sketch hotspots on an image
Chapter 5: Creating an Image Map
30
Chapter Summary
• Describe how the x- and y-coordinates relate to
vertical and horizontal alignment
• Open an image in Paint and use Paint to map the
coordinates
• Create the home page and additional Web pages
• Create a table, insert an image into a table, and
use the usemap attribute to define a map
Chapter 5: Creating an Image Map
31
Chapter Summary
• Add text to a table cell and create a horizontal
menu bar with text links
• Use the <map> </map> tags to start and end a
map
• Use the <area> tag to indicate the shape,
coordinates, and URL for a mapped area
• Change link colors
Chapter 5: Creating an Image Map
32
Homework # 9
• In the Lab 1 page HTML 251-252
• Creating a Donation Analysis Page
• See INF 186 Computer Assignment 9 Web page
for details, hints, and requirements for the
assignment
Project 4: Creating Tables in a Web Site
33
HTML
Concepts and Techniques
Fifth Edition
Chapter 5 Complete
Creating an
Image Map