Secrets and Tricks about Web Page Writing

The above Javascript animation consists of the following two pictures:

betty2f.gif 28.7 K bytes transparent 256-color picture	betty31f.jpg 21.5 K bytes 16-million-color normal opaque picture

The Javascript code and CSS (Cascading Style Sheet) code are as follows:

The above animation gives a false impression of a large 490-pixel-by-516 picture. Actually, the sky and sea is produced by a background image, which you can see at the right margin of the above coding-sheet box. It is a 18-pixel-by-1200 JPEG image (beachbg.jpg), but takes up only 1,785 bytes of disk space.

When you click the “START” button, the event handler (onClick) will invoke the Javascript function (placeBikini()), which displays Betty in bikini (betty31f.gif) on the screen, then sets up another Javascript function (restoreMypic()) so that it could run after nine seconds (specified as 9,000 milliseconds in the above code).

The function (restoreMypic()) simply replaces Betty in bikini with a bloated transparent dot (spacer.gif) so that the background image (betty2f.gif) could show through. Your browser doesn’t have to repaint. Thus it can speed up animation. It then sets up the function (placeBikini()) so that it could run again after nine seconds.

This process continues until you click the “STOP” button, which invokes this function—stopAnimation(). This function simply clears the timer (myTimerID). By so doing, it cancels the scheduled execution of either one of the functions, and then replaces the current picture with the bloated transparent GIF image (spacer.gif). Betty in a one-piece swimwear shows throught the spacer. Again, your browser doesn’t have to repaint her so that it can speed up animation.

Tricks

Two background images are used here:

1. The sky and beach is created by the background-image in the CSS code shown below:
   <div style="width:490px; background-color:aqua;
         background-image:url(../images/beachbg.jpg);
         text-align:left;">

   Note that this background stretches over the TABLE and FORM areas as shown below:

   <TABLE background="../images/betty2f.gif" width="228" height="516" border="0" cellpadding="0" cellspacing="0">
   <tr><td>
   
   
   </td></tr>
   </table>

   <FORM>
   <input type="button" value=" START "
       onClick="placeBikini()">
   <input type="button" value=" STOP "
       onClick="stopAnimation()">
   </form>

   </div>

    

   
   
   
2. Betty in a one-piece swimwear is created by the background for the above table like this:

   <table background="../images/betty2f.gif" width="228" height="516" border="0" cellpadding="0" cellspacing="0"> <tr><td> <img name="myPic" src="../images/spacer.gif" alt="spacer.gif 1x1-pixel transparent dot" width="228" height="516"> </td></tr> </table>

   The spacer.gif is a one-pixel-by-one transparent GIF image that is to be inflated to a 228-pixel-by-516 area so that it can cover Betty. So, if you click the button at above right, your browser can hide her properly.

   Do you notice a difference between those time lags after clicking each button? Although, once downloaded to your hard disk, these two pictures (cybertil.gif and spacer.gif) don’t have to be re-downloaded, your browser must still place them at the appropriate position in this page.

   Since spacer.gif takes up ONLY 67 bytes while cybertil.gif grabs 10,494 bytes, it takes much shorter for your browser to place spacer.gif over Betty. This is the reason why you can see her again so quickly.

   If your CPU runs so fast or you view this page offline, you will not probably notice the difference.

   The above two buttons are coded as follows:

   <form>
   <input type="button" value=" Hide her! "
     onClick="document.myPic.src='../images/cybertil.gif'">
   
   <input type="button" value="Show her again!"
     onClick="document.myPic.src='../images/spacer.gif'">
   </form>

   The cyber-blue tile (cybertil.gif) is shown at right. As you see, it is a 264-pixel-by-264 image.

   So, when it is coded as shown in the above, your browser automatically resizes it so that it fits the area where Betty stands.

   If you want to know more about the FORM tag, please visit this page: FORM Tag Made Easy!

References

If you don’t know anything about Javascript or CSS (Cascading Style Sheet), please visit the following pages:

• Javascript Table of Contents
• CSS (Cascading Style Sheet) Table of Contents
• SPAN Made Easy!
• Do you really know the difference between <SPAN> and <DIV>?

If you want to know more about event handlsers such as onClick, please visit the following pages:

• How to use an event handler.
• Dramatize Your Pictures with Event Handlers!
• Event Objects and their Properties (for Netscape Communicator).
• Event Objects and their Properties (for Internet Explorer).

For Javascript animation and graphics presentation, please visit the following pages:

• How To Handle Multiple GIF Animation Presentation .
• Pictures Around the Screen—How to set up a view screen with a ring of thumbnail pictures.
• Use Layers to Create an Animated Menu .

How about GIF animation?

Naturally, you wonder how large its GIF-animation picture would be, if the above two pictures were combined.
Well, I’ve created it. You can view it by clicking this link.

The above link is coded like this:

<a href="../images/bet230fx.gif" target="BETTY">clicking this link</a>

The picture will be displayed in a new window. To get back here, please close the window.

This 128-color animated picture (bet230fx.gif) takes up 61.5 K bytes whereas the 256-color version eats up 70 K bytes of disk space.

So, by using Javascript animation with some tricks, you can save roughly 20 K bytes. This is not so great a saving as you might’ve expected. However, if a GIF animation grows even larger, the saving can become significant and you can speed up page-loading dramatically.

The above GIF animation remains incomplete. I have to add a background image. Combined together, the new presentation will come up in this makeshift page:

The code for the above presentation is as follows:

Related Links