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,
colonelblueAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

GaryCommented:
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
0
colonelblueAuthor 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.
0
colonelblueAuthor 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!
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

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

0
GaryCommented:
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

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
colonelblueAuthor Commented:
Hail Gary! :)
Thank you Gary. VERY elegant and makes sense to me now. Learning from it slowly but surely.
Thanks again Gary!!!
0
GaryCommented:
You're starting to give me a God complex ;o)
0
colonelblueAuthor 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.
0
RobOwner (Aidellio)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
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.