Image Replacement (rollover/slide-shows)

15 August, 2005 - Fixed to make slideshow work with Opera browser.

1. Rollovers

There are quite a few requests for image replacement (rollover) support. This simple plug-in allows you complete support for rollover processing - just include the JavaScript within your page, and follow these simple rules...

Each image must have at least two versions that are both the same size (for support in older browsers). There is an optional third version to show that an image was clicked on (which must also be the same size.)

The same JavaScript (one copy) supports any rollover images you have in your page.
The name of each image version must be exactly the same except for the ending digit between 1 and 3. For example...
- spec1.gif - base image
- spec2.gif - overlay image
- spec3.gif - clicked-on image (optional)
You may use any valid image type for each image duo/trio (.jpg, .jpeg, .gif, .png, etc.)
You must add 2 (or 3) event handlers to those images on which you wish to use this technique. Here is an example of attaching these event handlers to a normal PayPal button.
```
  <input type="image" src="view1.gif" name="submit" alt="PayPal"
    onmouseover="Over (this);"
    onmouseout="Out (this);"
    onclick="Click (this);" /> 
    
```
This technique may also be used on any <img... or <a... HTML tag. For version 4 browsers there is no onmouse support for either <input or <img tags - you must use the <a tag in this manner (one example included on this page)...
```
  <a href="javascript:void 0;"
     onmouseover="Over (document.images.x1);"
     onmouseout ="Out  (document.images.x1);">
    <img src="addcart1.jpg" alt="image" name="x1" /></a>
    
```
Do a right-click, and <view source> to see what I did on this page.

NOTE the inclusion of a special pre-cache routine. It is designed to cache those images that are off-images (not directly referenced) in the document. You may include any number of arguments you need. To make use of it, it must be called from the <body>, like is done in this page.

Normally, an image is not loaded until it is referenced directly. In the case of rollever images they would not be loaded until you moved your mouse over the base image, and then it may take several seconds to load the alternate image. Pre-cacheing puts the images into image cache (if it is turned on) so by the time the document loads the images should be there in cache and look like they "load" instantly.

Fake buttons just to demonstrate what happens to buttons.

Right-click on the following images to save them into your own space if you want to play with the code on your own. Notice that their names end with a number from 1 to 3.

view1.gif > Image: view1.gif
view2.gif > Image: view2.gif
view3.gif > Image: view3.gif
addcart1.jpg > Image: addcart1.jpg
addcart2.jpg > Image: addcart2.jpg

2. Slide-Shows

A slide-show is the rotational display of images on a web page. If you have 10 images, then they may be displayed one at a time, with a delay between each image, over and over again. I include a parameter to limit the number of cycles.

The images must all be the same size for compatibility with older browsers, and this will work as long as your browser has access to the "src" of the image location. What this code does is to continually reload the src value after a delay, until the counter runs out.

The same JavaScript function may be used for any number of slide-shows on your page. The slide-show is called from script within the main page of the HTML. Right-click (and then <view source>) on this page to see how I did it. Here is what you do in your HTML, after including the JavaScript to support it...

  <script type="text/javascript"
  <!-- hide from HTML validators
    Rotate ("imgn", "img1.gif", secs, nr, max);  // rotate these images
  -->
  </script>

    where - 
      imgn = the name of the image in the HTML.
      secs = seconds between changes.
      nr   = the number of images in the sequence.
      max  = number of changes before it stops.

The rules are that the first image must end in a "1" just prior to the "." in the name. The images will be cycled through sequentially until "nr" is reached, and then started over. It starts at x1.ext and goes to xnr.ext, where nr is the last image. The extension may be any valid image recognized by your browser. 999 images, max!

MOST important is that the JavaScript call to begin the slide show (Rotate) is located in the HTML after the image is defined. This requirement is absolute!

See how the images, below, rotate at different cycles (times). Also note that there are two different show initiators - Rotate (normal) and RotateF (uses special IE delay blending). Either works the same way on older/other browsers, but if your customer has an IE browser he will get a special fade/blend effect.

Contact me concerning this article at paypalhelper@aol.com. Mention "rollover" in your note.

Individual help starting at $25.00 for simple JS solutions.