CODEWITHSUNDEEP
javascriptmouseover
rubixibuc
rubixibuc

Reputation: 7397

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 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.

Upvotes: 1

Views: 73

Answers (2)

Shad
Shad

Reputation: 15451

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

Upvotes: 1

rubixibuc
rubixibuc

Reputation: 7397

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.

Upvotes: 0

Related Questions