asked on

Simple way to image rollover swap with jquery and have pictures preloaded.

I scoured the web and found a handful, but they were either broken or had some bug in it - odd.
I would be very grateful to find a solution.

I had found one that just had lines of jquery that looked for images and with the premise of the rollover have an extension of _over and then simply applying a class to a image ..sounded too good to be true and did not work,

Thank you in advance,

Gary

Simple solution is to create image tags for each image and set them to display:none - then they will be loaded at page load and ready to use in the cache.
No need to get messy with js

colonelblue

ASKER

Hello Gary. Sounds good. :)
But how about the rollover effect? I can't seem to find a decent one that works correctly.
Been trying to find one that works on ipad as well.

colonelblue

ASKER

Gary, do you think you could recommend a simple script for jquery rollovers where I can just apply them to an image as as a class? I have found a few but somehow there seems to be something amiss to their scripts that don't make them work.
Thanks again Gary!

Gary

<img class="image_class" data-hover="rollover_image.jpg" src="start_image.jpg">

jQuery
$(function(){
    $(".image_class").each(function(){
        $(this).data("original",$(this).attr("src"))
    })
    $(".image_class").hover(function () {
        $(this).attr("src", $(this).data("hover"))
    }, function () {
        $(this).attr("src", $(this).data("original"))
    })
})

Open in new window

ASKER CERTIFIED SOLUTION

Gary

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

colonelblue

ASKER

Hail Gary! :)
Thank you Gary. VERY elegant and makes sense to me now. Learning from it slowly but surely.
Thanks again Gary!!!

Gary

You're starting to give me a God complex ;o)