Chapter 24. HTML Tips and Tricks


  • Preloading Images

  • Stretching Title Bars

  • Controlling Text Breaks in Table Cells

  • Simulating Newspaper Columns

  • Including Image Size for Fast Display

  • Protecting E-mail Addresses

  • Automating Forms

  • Modifying the User Agent Environment

Throughout this book, you have read about the ins and outs of the various HTML tags and entities. This chapter covers a few tips and tricks you can use to supplement your HTML knowledge to achieve real-world results.

Preloading Images

One of the things that can really slow down the display of Web pages is an abundance of images, each of which can contain the equivalent of 17,000 to 20,000 characters.

A trick that was developed to help overcome the delays experienced while image-rich documents load is image preloading. Through the use of JavaScript, image files are loaded into image objects. The net result is that the graphics are not displayed but are loaded into the browser's cache for later use. When it is time for the browser to actually display the image(s), they are taken from the local cache instead of having to make the trip across the Internet.

The script embedded in the following document is an example of an image preload script:

   <title>Preloading Images</title>
   <script type="text/JavaScript">
   // Assign path of images to be preloaded to
   //   array, one image per index
 var imagenames = []; imagenames[0] = "images/header.gif"; ...

Get HTML, XHTML, and CSS Bible, Fifth Edition now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.