A Simple Image Zoom Script
 |
This is a rather simplistic image zoomer script on a PageBuilder webpage that uses nested "setTimeout()" methods to toggle the visibility of five (5) stacked images in a continous loop.
In this script, I only use CSS z-index and visibility properties. The images stack exactly above each other even thought no other CSS positioning properties are used. I use a table cell container, instead of a division, with align="center" and valign="middle" to position the images. View the source code of this webpage with the Thunderstone WebTV Source Code Viewer below.
The "zoomit()" function is called by an "onload" event handler in the image tag when the last image is loaded. The image zoom loops continously by calling the function in the last setTimeout(). Each setTimeout() has two (2) statements, separated by semi-colons, which hides the smaller images before calling the visible larger image while zooming-out; and vice-versa when zooming-in. The timers are named, not only as standard practice, but so you could start and stop the zoom with clearTimeout().
However, be aware that this script has a limited number of times the zoom size can be changed with multiple images, depending on the number of available timers in the browser javascript registers.
OK, this isn't anything as complex as all the image zoomer scripts you see online, from fellow MSN-TV scripters; but, it is only meant to be a simple, basic introduction to using timers and toggling image size and visibility!
Admittedly, this script is not much of a challenge for the advanced scripters in the HTML and JavaScript NG's; but, it may be of interest to beginning scripters who need to learn the basics of timers and visibility before they can apply these methods to advanced DHTML scripts!
JaxRed