2. 4. Students will analyze and create unique
features in HTML by:
• Inserting iframes into a website by using its
elements and attributes
• Creating at least one type of image map on a
website
• Writing coding for at least one type of image map
on a website using its elements and attributes
• Using Microsoft Paint to determine coordinates for
at least one type of image map shape
• Defining key terms used in the chapter.
4. • <iframe></iframe
• Paired element
• Attribute: src
• URL of website
<iframe src=“http:google.com” width=“600”
hieght=“600” frameborder=“3”
frame></iframe>
(see example on next page with banners…
5.
6. Image Maps (Hot Spots)
One image
with multiple
“clickable
areas”
7. Image Maps (Hot Spots)
• Need two objects:
1. An image with distinct areas to
click on
2. Markup to map the different
regions to the urls
8. Image Maps elements
• <map></map>: holds the map
information
• <area />: links specific parts of
map to URLs
• <img />: sets the picture
9. Map Attributes
• name: identifies the map
• value of name should match value
of usemap in <img /> element
10. Area Attributes
• shape: specifies the shape of
region (rect, circle, poly [triange or
polygon])
• coords: defines the region’s
coordinates
11. Break down of Coords:
• Rect: left, right, top & bottom
points
• Circle: x and y point on circle as
well as radius
• Poly: x and y coordinates for every
vertex in the polygon
12. Area Attributes
• href: specifies the URL
• alt: must be used to identify image
• title: provides a screen tip
14. Determining Coords in Paint
Place your
cursor on the
spot on the
picture:
• X1—190
• Y1—(60)
15. Determining Coords in Paint
To determine the
bottom X2 & Y2,
move your cursor
straight down
from the picture to
the bottom line.
These will be your
coords for:
• X2—199
• Y2—198
