jQuery: change img when hover

Question

Im using jQuery background stretcher where the background is set as image with id="bg" right after body. But then I wanted to change the background image when someone hover a div with class=selector and alt=pathToImage. I know that alt isn't the best to use in a div, but I needed to find a "container" to store the path in.

The background-stretcher is exactly as it should, but when I hover something, it sets the background image to display="none". I really hope someone can help me.

The code is:

$(window).load(function(){
$('.selector').hover(function() {
    var img = document.createElement('img');
    img.src = $(this).attr('alt');
    img.onload = function() {
        $('#bg').fadeOut(function() {
            $(this).setAttribute('src', img.src).fadeIn();
        }); }; return false; }); });

Thank you in advance :)

EDIT! Sorry for taking so long, but made the html less painful to read: http://jsfiddle.net/gaFfD/ And for some odd reason, the hover-effect doesn't work in jsfiddle.

*"I know that alt isn't the best to use in a div, but I needed to find a "container" to store the path in."* That's what [data-* attributes](http://www.w3.org/TR/html5/global-attributes.html#embedding-custom-non-visible-data-with-the-data-attributes) are for. — T.J. Crowder, Jun 06 '12 at 07:36
Note that your code has a race condition in it. Set `onload` **before** setting `src`, otherwise if the image is in cache, the event may fire (and, finding no handlers, do nothing) between the line setting `src` and the line setting `onload`. (Yes, really; *JavaScript* on browsers is single-threaded unless you use web workers, but the browser itself is not. When an event fires, it queues up handlers it finds to run when the JavaScript thread is next free, but if it doesn't find any, it doesn't queue them.) — T.J. Crowder, Jun 06 '12 at 07:37

score 0 · Accepted Answer · edited May 23 '17 at 12:21

0

UPDATE

Try this fiddle: http://jsfiddle.net/gaFfD/14/

Should be

$(this).attr('src', img.src).fadeIn()

instead of

$(this).setAttribute('src', img.src).fadeIn();

And I used

jQuery(document).ready(function () {

instead of

$(window).load(function() {

Difference between document ready and window load: window.onload vs $(document).ready()

edited May 23 '17 at 12:21

Community

1
1

answered Jun 06 '12 at 08:11

iappwebdev

5,880
1
30
47

Wow. That made it work, but not the way it should. It should fadein() when starting to hover, not fadeout(), and then stay there. But instead it sets display:none when done fading. Do you have a quick fix for that? – user1379221 Jun 06 '12 at 08:54
Updated my fiddle, see link in my answer. I changed the event from hover to mouseover as you dont't need any mouseout-Event. I also prevented the image to change if it is already in use as background. – iappwebdev Jun 06 '12 at 09:14
Looks really great. But what is wrong with loading the background from the 1st picture? It just pops up where the others seem more smooth. But thank you. You're the man! – user1379221 Jun 06 '12 at 09:22
I don't have this effect. What browser are you using? – iappwebdev Jun 06 '12 at 09:33
Google Chrome. I've just tested in IE and it works great. Looks like it takes it easy on fadeout but bursts through fadein. But that doesn't matter. If it works perfectly in FF and IE, and partly in Chrome, then im more than happy ^^ – user1379221 Jun 06 '12 at 09:36
I have not really a clue why this is happening. The first picture is the biggest, I guess that it takes longer to load this image. Have a look at this fiddle http://jsfiddle.net/gaFfD/23/, I changed fadeIn-Time to 800ms, it looks a bit smoother now. – iappwebdev Jun 06 '12 at 09:51
Perfect! Thank you very much. You've been a big help. – user1379221 Jun 06 '12 at 09:59

jQuery: change img when hover

1 Answers1