[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

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

Posted on 2014-08-15
9
Medium Priority
?
201 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,
0
Comment
Question by:colonelblue
  • 4
  • 4
9 Comments
 
LVL 58

Expert Comment

by:Gary
ID: 40263587
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
 

Author Comment

by:colonelblue
ID: 40264137
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
 

Author Comment

by:colonelblue
ID: 40265493
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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
LVL 58

Expert Comment

by:Gary
ID: 40266162
<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
 
LVL 58

Accepted Solution

by:
Gary earned 2000 total points
ID: 40266180
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
 

Author Closing Comment

by:colonelblue
ID: 40266569
Hail Gary! :)
Thank you Gary. VERY elegant and makes sense to me now. Learning from it slowly but surely.
Thanks again Gary!!!
0
 
LVL 58

Expert Comment

by:Gary
ID: 40266595
You're starting to give me a God complex ;o)
0
 

Author Comment

by:colonelblue
ID: 40266655
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
 
LVL 43

Expert Comment

by:Rob
ID: 40267416
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

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses
Course of the Month19 days, 22 hours left to enroll

872 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question