IE6/7 And ClassName (JS/HTML)

Answer 1

You should create one image with a width of 50px and a height of 24px where you have both the play part and the stop part. Then you just ajust the background position like this:

.button
{
    background-image: url(/images/small_buttons.png);
    bacground-repeat: no-repeat;
    width: 25px;
    height: 24px;
    display: block;
}

.play_button
{
    background-position: left top;
}

.stop_button
{
    background-position: right top;
}

Then you load "both images" at the same time, and no delay will happen when you change which part of the image gets displayed.

Note that I have made a new CSS class so that you dont need to repeat your CSS for different buttons. You now need to apply two classes on your element. Example:

<div class="button play_button"></div>

Answer 2

Hey Marc G,

You need to use setAttribute in your two funcitons. Try this out:
link.setAttribute((document.all ? "className" : "class"), "play_button");
link.setAttribute((document.all ? "className" : "class"), "stop_button");

Answer 3

Without seeing the exact markup, it's difficult to say, but the disappearing background image issue in IE is probably solved by adding a position: relative; declaration to the .button class and/or to its parent div.