Image swap in firefox

I'm trying to change the background image of a button when the mouse is hovered.

with the statement

function testIn ()
{
elem.style.backgroundImage = 'url("image_name_in.png")';
}
function testOut ()
{
elem.style.backgroundImage = 'url("image_name_out.png")';
}

i'm doing this with onMouseOver=testIn() and onMouseOut=testOut().

Here the problem is that, when i hover the mouse. I'm seeing the progress bar (bottom right side) is shown in firefox as if some page is 开发者_开发百科getting loaded

Use :hover pseudo-class and CSS Sprites instead.

You need a few changes in order to pass your object reference:

onMouseOver="testIn(this)"


function testIn (elem)
{
elem.style.backgroundImage = 'url("image_name_in.png")';
}

BTW - convention now uses "onmouseover" (no caps)

You're getting activity in the progress bar because your onmouseover image does NOT load until you call the function.

You could use a sprite combined with :hover CSS for the effect - like @Tomasz mentions.

If you don't want to combine your default and hover image states into a sprite, you may try adding an additional container for the hover image (setting it's default CSS to display:none;) then use JS, or jQuery to swap the display states of the default and hover images on mouseover or hover.

$('myDefaultImage').hover(function() {
   $(this).hide();
   $('myHoverImage').show();
}, function () {
...the inverse, etc.
});

This will eliminate the progress bar issue because all of your images will be loaded together.

At the same time, this is going to bloat your page size unnecessarily.

I'd really try to go with the :hover CSS and sprite, or reevaluate the importance of what you're trying to accomplish with the image swap (is it really the best solution for your overall project?).