Click-first objects
One of the challenges of writing a blog, or any type of website for that matter, is having the right balance of media and text so that you achieve the type of look you're striving for without subjecting your audience to a long wait while the page loads. Each piece of media extends the amount of time it takes for the web page to load. Some companies make a business out of handling content so that it is presented to the user efficiently. YouTube, for example, offers a video player that users can include in their blogs. This video player download the video immediately, it requires the reader to click on the object first. this allows the author to include multiple video players on their site without subjecting the readers to unnecessary downloads. Still, the player itself needs to load and, once it's loaded, it consumes memory. Also, the YouTube player isn't the only object someone might put on their site. These objects add up and some of them can take a long time in and of themselves to load on the client's machine.
One way around this problem is to load an image of the object on the page instead of the object itself. We can make the image a Hyper link that takes us to the object itself. This way, the user can choose which objects they wish to load. This can be very handy with objects that take considerable time to load (like the Impossible quiz) or with objects that require special user interaction (like a signed Java applet.
The code sample below demonstrates the use of an image to preface the loading of a object.
<p>
<a target="_blank"
href="http://www.notdoppler.com/files/theimpossiblequiz2.swf">
<img
border="0"
src="http://www.qicboy.com/files/2007/05/27/quizbig.jpg"/>
</a>
</p>
The problem with the previous code is that it sends the user to another page. The YouTube object, remember, doesn't send the user to another site, it merely starts the download of the video. To accomplish the same effect we can make use of the inline frame tag. The iframe allows us to include another web page within our web page.
The following code makes use of two additional pages. One page displays the image and a second with the object code. When they user clicks on the first page the second page is loaded in place of the first one containing the image. The rest of the page remains unchanged. The first portion is included in another, larger page. The second portion contains the source to sendmail0.html (the page included in the larger page). The second portion includes the source to sendmail1.html (the page linked to from the first page). I use a sort of screen shot with a play button overlay (save as) overlay to give the users an idea of what the object will look like. The result is a familiar look and feel.
<iframe noresize="noresize" style="border:0px" frameborder="0" scrolling="no" marginwidth="0" marginheight="0" width="425" height="350" frameborder="0" src="http://www.qicboy.com/files/2008/01/05/sendmail0.html"> </iframe>
<a href="http://www.qicboy.com/files/2008/01/05/sendmail1.html"> <img border="0" src="http://www.qicboy.com/files/2008/01/05/sendmail.jpg"/> </a>
<applet alt="Browser has Java disabled" name="sendmail" width="425" height="350" code="SendmailApplet" archive="http://www.qicboy.com/files/2008/01/05/sendmail.jar"> </applet>