IE6 / 7 und Klassenname (JS / HTML)

Question

Ich versuche, die Klasse eines Elements mit Hilfe von JavaScript zu ändern. Bisher habe ich so mache:

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

Bearbeiten : hier ist der eigentliche Code, der Klassenname

ersetzen

Im HTML:

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

In der Javascript     Funktion 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;};
}

mit

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

die alte Klasse

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

Der Kontext ist ein Musik-Player. Wenn Sie auf die Play-Taste klicken (Dreieck) verwandelt es sich in eine Stopp-Taste (Quadrat) und ersetzen Sie die Funktion, die aufgerufen wird.

Das Problem ist, dass die Klasse geändert, aber in IE6 und 7 den neuen Hintergrund (hier /images/small_play_button.png) sofort nicht angezeigt wird. Irgendwann ist es gar nicht überhaupt angezeigt werden soll. Irgendwann ist es nicht angezeigt, aber wenn ich die Maus ein wenig schütteln, dann zeigt es an.

Es funktioniert perfekt in FF, Chrome, Opera und Safari, also ist es ein IE-Bug. Ich weiß, dass es schwer ist, sofort zu sagen, nur von diesen Informationen, aber wenn ich könnte einige Hinweise und Anweisungen erhalten, die hilfreich sein würde.

Danke -

Answer 1

Sie sollten erstellen ein Bild mit einer Breite von 50px und einer Höhe von 24px wo Sie sowohl das Spielteil und das Anschlagteil haben. Dann ajust Sie nur die Hintergrundposition wie folgt aus:

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

Dann laden Sie „beiden Bilder“ zur gleichen Zeit, und keine Verzögerung wird passieren, wenn Sie einen Teil des Bildes ändern, das angezeigt wird.

Beachten Sie, dass ich eine neue CSS-Klasse gemacht haben, so dass Sie nicht brauchen, Ihre CSS für verschiedene Tasten zu wiederholen. Sie müssen nun zwei Klassen auf Ihrem Element anzuwenden. Beispiel:

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

Answer 2

Sie müssen setAttribute in Ihren beiden Funktionen nutzen. Probieren Sie dies aus:
link.setAttribute((document.all ? "className" : "class"), "play_button");
link.setAttribute((document.all ? "className" : "class"), "stop_button");

Answer 3

Ohne die genaue Markup zu sehen, es ist schwer zu sagen, aber das verschwinden Hintergrundbild Problem in IE wahrscheinlich durch Hinzufügen einer position: relative; Erklärung der .button Klasse und / oder an ihrer Mutter div gelöst wird.