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

colonelblue
colonelblue used Ask the Experts™
on
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

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
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!
Should you be charging more for IT Services?

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

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

Expert of the Year 2014
Top Expert 2014
Commented:
Amended to preload the images

<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"))
	$(this).css("background-image","url("+$(this).data("hover")+")")
    })
    $(".image_class").hover(function () {
        $(this).attr("src", $(this).data("hover"))
    }, function () {
        $(this).attr("src", $(this).data("original"))
    })
})

Open in new window

Author

Commented:
Hail Gary! :)
Thank you Gary. VERY elegant and makes sense to me now. Learning from it slowly but surely.
Thanks again Gary!!!
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)
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

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial