We help IT Professionals succeed at work.

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

colonelblue
colonelblue asked
on
217 Views
Last Modified: 2014-08-18
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,
Comment
Watch Question

CERTIFIED EXPERT
Expert of the Year 2014
Top Expert 2014

Commented:
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

Author

Commented:
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.

Author

Commented:
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!
CERTIFIED EXPERT
Expert of the Year 2014
Top Expert 2014

Commented:
<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

CERTIFIED EXPERT
Expert of the Year 2014
Top Expert 2014
Commented:
This problem has been solved!
(Unlock this solution with a 7-day Free Trial)
UNLOCK SOLUTION

Author

Commented:
Hail Gary! :)
Thank you Gary. VERY elegant and makes sense to me now. Learning from it slowly but surely.
Thanks again Gary!!!
CERTIFIED EXPERT
Expert of the Year 2014
Top Expert 2014

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

Author

Commented:
Ah if all "Gods" would be as kind, generous,  helpful and patient. It'd be Utopia. But we're thankful for the the very we have.  :)

Thank you Gary.
RobOwner (Aidellio)
CERTIFIED EXPERT
Most Valuable Expert 2015

Commented:
I'm going to post this after the close as I think a CSS only solution is useful: http://jsbin.com/fizon/1/edit