Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Mar 2009
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Help rotating through images on mouseover

    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.

    Tim

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,084
    Thanks
    80
    Thanked 4,552 Times in 4,516 Posts
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •