Web Design & Development

1. Chapter 4: iframes &
Image Maps
Web Design & Development

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.

3. Iframes
Used to
display a
website
within a
webpage

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…

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

13. <img src="Pics/park.jpg" width="300" height="200"
usemap="#park" border="0"/>
<map name="park" />
<area shape="rect" coords="190,67,197,195"
href="http://www.stillmanvalley.org"
title="SVSHS" alt="SwingSet Website"
target="_blank" />
<area shape="rect" coords="56,108,45,0"
href="http://www.google.com" title="Google"
alt="Horses" target="_blank" />
<area shape="rect" coords="258,136,256,4"
href="http://www.yahoo.com" title="Yahoo"
alt="Horses" target="_blank" />
</map>

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

16. Chapter 4: iframes &
Image Maps
Web Design & Development