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.

Answer 1

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()