Think of a Web site as a loading zone.
Whenever, you click a link, you load another page — graphics and all.
Sometimes, all you want to do is load just one thing. That saves the
user from having to wait for all the other stuff to load or reload. If
you know a bit of JavaScript and Ajax, you can do that, but what about
with just HTML5? The answer is yes!
This section examines how to link to graphics and
change the graphic in an iframe. When creating applications designed
specifically for mobile devices, you want to use as little bandwidth as
possible. By changing just one thing on a Web page, the mobile device
just has to load or reload a single item, so the response time is less.
Linking to a graphic
Generally, when we think of adding graphics to a page, we think of the <img> tag. After all, that tag is what we use to place graphics on a Web page. However, you also can use the <a href> tag to load a graphic. Instead of assigning a Web page path to the href assignment, assign a graphic. For example, the following line of code loads a blank page with a graphic:
<a href=”myGraphic.jpg”>My Graphic</a>
When users click on the link text, the current page disappears, and the graphic appears in the upper-left corner of a new page.
Placing a graphic in an iframe element
works just like placing a Web page in an iframe . The
link is to the target within the iframe and instead another Web page.
That means that the current Web page stays in place, and the graphic
opens in the iframe.
The following script uses graphic icons for the
navigation. However, instead of navigating to another page, the
navigation places a different graphic in the main viewing area — an
iframe. By making miniature versions of the graphic to be displayed
(called thumbnails), users see their selection first in the navigation
design. That is, the thumbnails guide users to the full-size view.
Making and using thumbnail icons
To prepare for the application, first create
full-size versions and thumbnails of all the graphics. The 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. Thumbnails 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.
<!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 {
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/thumbWoman.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>
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 1 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 different “portraits.”
The interface is fairly intuitive and users know what to expect when
they click on one of the graphic buttons. The 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.
Figure 1: Images used for navigation.
Using iframes on mobile devices
In testing the application on a mobile device, the
results depended on the HTML5 mobile browser in use. Figure 8-11 shows
the Opera Mini browser on the left; as you can see, the text beneath
the images is formatted to be readable. However, at the time of
testing, the Opera Mini seemed to reload the entire page as each button
was selected.
The image on the right in Figure 2 is from the
Safari mobile browser. The text at the bottom didn’t follow the CSS3
formatting and ran off to the right side of the screen. However, the
images in the iframe worked perfectly, and as each thumbnail button was clicked, the full-size image loaded without reloading the entire page.
Figure 2: Different mobile browsers handle text differently.
Several different kinds of businesses and social
networking sites use similar applications. For example, professional
photographers use thumbnails of their photographs that users click to
view the full-size images. Likewise, social networking sites can use
similar pages to display and load pictures of each users’ friends
without having to leave the page.
Because mobile devices have such small
display areas, using iframes in navigation designs is quite helpful.
Trying to click small text links can be difficult, but as you can see
in both mobile browsers in Figure 8-11, the graphic buttons are easy to
see and tap for loading the full-size image or other materials into the
iframe space.
