Java Script Mousovers

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 a开发者_如何学运维nd 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.

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

I did some more research and this is what I found. You can preload the images by using a div which is set to style="display:none" and within that div include the images.

As long as the next time you refer to the image, you use the same path it will be preloaded.