Question

I am implementing a mouseover, which changes the background of a div onMouseDown, and onMouseUp, I am also trying to preload the images.

This is what I have so far;

if(document.images) {  
    buttonDown = new Image();  
    buttonDown.src = "buttonDown.png";  
}  

function down(affect) {  
    affect.style.backgroundColor="#333333";  
    affect.style.color="#ffffff";  
    affect.style.background = buttonDown;  
    return true;  
    }  

the div uses onMouseDown=”down(this);”

This doesn’t work. The only part that doesn’t work is — affect.style.background = buttonDown;
I left out the script tags, but they are all there and work as they should.

My question is how do I assign the background property to a preloaded image verses just using a string to assign the image by name.

Answer 1

First, I think you are accessing the wrong style attribute; If you are going to use backgroundColor, may as well go with the more specific backgroundImage.

Second, it requires a string, not an Image Object.

Try this:

affect.style.backgroundImage='url(' + buttonDown.src + ')';

All that said, I would look into image Sprites and HTML classes (CSS) =)