NAVIGATION STRATEGIES - HTML5 - page 163

When users click on the link text, the current page disappears, and the graphic appears in the
upper-let corner of a new page.

Placing a graphic in an iframe element works just like placing a Web page in an iframe (see
Chapter 7). h e link is to the target within the iframe and instead another Web page. h at
means that the current Web page stays in place, and the graphic opens in the iframe.

h e following script uses graphic icons for the navigation. However, instead of navigating to
another page, the navigation places a dif erent graphic in the main viewing area — an iframe.
By making miniature versions of the graphic to be displayed (called thumbnails), users see
their selection i rst in the navigation design. h at is, the thumbnails guide users to the
full-size view.

MAKING AND USING THUMBNAIL ICONS
To prepare for the application, i rst create full-size versions and thumbnails of all the graphics.
h e full-size graphics and the thumbnails should all be the same size. In the following
example, the full-size graphics are set to 250 x 312 pixels, and the thumbnails are set to 63 x 79
pixels. h umbnails need to be small enough to serve as navigation buttons but large enough
for users to get an idea of what the larger graphics will look like. Notice that the iframe
dimensions are the same as the full-size graphics. Once the graphics are prepared, they're
placed in separate directories for the thumbnails and full-size graphics. (h e names, thumbs
and portraits are used in the following example [ IFrameNavigation.html in this
chapter's folder at www.wiley.com/go/smashinghtml5 ].)

167

<! DOCTYPE HTML >
< html >
< head >
< style type = ”text/css” >
/*F2CF8D,401E01,F2AA6B,8C3503,F28D52*/
body {
font - family : Verdana , Geneva , sans - serif ;
background - color : #F2CF8D;
color : #401E01;
font - size : 11px ;
}
h1 {
font - family : ”Harrington” , Arial , sans - serif ;
font - size : 36px ;
color : #8C3503;
margin - left : 10px ;
}
h4 {
font - family : ”Arial Black” , Gadget , sans - serif ;
color : #8C3503;
margin - left : 86px ;
}
aside {