Chapter 4: iframes & Image Maps

Web Design & Development

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.

Iframes

Used to display a website within a webpage

• <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…

Image Maps (Hot Spots)

One image with multiple “clickable areas”

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

Image Maps elements

• <map></map>: holds the map information

• <area />: links specific parts of map to URLs

• <img />: sets the picture

Map Attributes

• name: identifies the map• value of name should match value

of usemap in <img /> element

Area Attributes

• shape: specifies the shape of region (rect, circle, poly [triange or polygon])

• coords: defines the region’s coordinates

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

Area Attributes

• href: specifies the URL• alt: must be used to identify image• title: provides a screen tip

<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>

Determining Coords in Paint

Place your cursor on the spot on the

picture:

• X1—190• Y1—(60)

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

Chapter 4: iframes & Image Maps

Web Design & Development