Question

I am trying to change the class of an element using javascript. So far I’m doing :

var link = document.getElementById('play_link'); link.className = 'play_button'; 

edit: here is the actual code that replace the classname

In the HTML :

<a href='#play_link_<%=i%>' id='play_link_<%=i%>'onclick='changeCurrentTo(<%=i%>);return false;' class='play_button'></a> 

In the Javascript function changeCurrentTo(id){ activatePlayButton(current_track); current_track = id; inactivatePlayButton(current_track); }

function inactivatePlayButton(id){     document.getElementById('recording_'+id).style.backgroundColor='#F7F2D1';     var link = document.getElementById('play_link_'+id);     link.className='stop_button';     link.onclick = function(){stopPlaying();return false;}; }  function activatePlayButton(id){     document.getElementById('recording_'+id).style.backgroundColor='';     var link = document.getElementById('play_link_'+id);     link.className = 'play_button';     var temp = id;     link.onclick = function(){changeCurrentTo(temp);return false;}; } 

with

.play_button{     background:url(/images/small_play_button.png) no-repeat;     width:25px;     height:24px;     display:block; } 

the old class is

.stop_button{     background:url(/images/small_stop_button.png) no-repeat;     width:25px;     height:24px;     display:block; } 

The context is a music player. When you click the play button (triangle) it turns into a stop button (square) and replace the function that is called.

The problem is that the class get changed, but in IE6 and 7 the new background (here /images/small_play_button.png) does not display right away. Sometime it doesn’t even display at all. Sometime it doesn’t display but if I shake the mouse a bit then it displays.

It works perfectly in FF, Chrome, Opera and Safari, so it’s an IE bug. I know it’s hard to tell right away from only these information, but if I could get some pointers and directions that would be helpful.

Thanks-

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>