View Full Version : Help rotating through images on mouseover

03-18-2009, 08:00 PM
Hello, I have searched here and google and can not seem to find a script to do what I need. Any help is appreciated.

I need a script to:

1. Display a base image on a page, e.g. image0.jpg.
2. On mouseover that image, it begins cycling through other images while the mouse is over it - (image1.jpg, img2.jpg, img3.jpg, etc.) and continues to cycle through them over and over again while the mouse is over.
3. Onmouseout, it goes back to displaying the base image (image0.jpg).
4. Needs to support multiple instances on the same page.

This is for an index page for different galleries, so there will be like 20 images showing on the page, and when the visitor puts their mouse over any of the images, it will cycle through the preview images for that gallery.

Thanks for your help.


Old Pedant
03-19-2009, 12:57 AM
There *IS* a huge problem here...

It's called "total size of images." Normally, you would pre-load images for a rotation, but with 20 galleries each with what, 20?, images...ouch! Even if they are relatively small thumbnails, that's a *LOT* of bytes to shove across the wire from server to browser.

So if you opt to *NOT* pre-load images, then you have the problem that the first time the user mouses over one of your galleries, there will be a delay as all the images for the rotation are loaded.

NOW... If the rotation is not too fast, then maybe you could get away with preloading just the main image and then one other image. Then, as the code slides from image0 to image1, you can preload image2 in the background so that it's ready when image1 is done. Etc.

Complicates your code a bit, but probably is best compromise of initial load time versus run-time display.

The code to do the rotating is trivial, especially if the images are named/numbered in a consistent fashion. Example:
galleryA-0.jpg, galleryA-1.jpg, galleryA-2.jpg...
galleryB-0.jpg, ....
galleryZ-0.jpg ...

It's the preloading that will take a tad bit more thought and code.