NAVIGATION STRATEGIES - HTML5 - page 164

margin - left : 10px ;
}
h5 {
margin - right : 40px ;
}
</ style >
< meta http - equiv = ”Content-Type” content = ”text/html; charset=UTF-8” >
< title > Iframe Navigation </ title >
</ head >
< body >
<! DOCTYPE HTML >
< html >
< body >
< article >
< header >
< h1 > Portrait Studio </ h1 >
</ header >
< aside >
< iframe name = ”fullSize” width = ”250” , height = ”312” seamless src = ”portraits/man.
jpg” ></ iframe >
</ aside >
< section >
< nav > < a href = ”portraits/man.jpg” target = ”fullSize” >< img src = ”thumbs/thumbMan.
jpg” ></ a > < a href = ”portraits/woman.png” target = ”fullSize” >< img src = ”thumbs/thumb-
Woman.png” ></ a > < a href = ”portraits/boy.jpg” target = ”fullSize” >< img src = ”thumbs/
thumbBoy.jpg” ></ a > < a href = ”portraits/girl.png” target = ”fullSize” >< img src = ”thumbs/
thumbGirl.png” ></ a >
< h4 > Select portrait </ h4 >
</ nav >
</ section >
< section >
< h5 > All of the creations are by a little - known artist , < b > Mo Digli Anni </ b >,
from Spunky Puddle , Ohio . By clicking on the thumbnail buttons , you can send the
image to the larger viewing window . </ h5 >
</ section >
</ article >
</ body >
</ html >

168

When you test the example, you'll see the man's portrait and then the four thumbnails of the
man, woman, boy, and girl beneath the image inside the iframe. Figure 8-10 shows the page
on a computer monitor screen.

As you can see in Figure 8-10, users are instructed to click on the thumbnail buttons to view
the dif erent “portraits.” h e interface is fairly intuitive and users know what to expect when
they click on one of the graphic buttons. h e best part is that only the graphic for the selected
portrait is loaded into the iframe instead of loading a new page with all the graphic buttons
and other page materials.