IE6/7 И className (JS/HTML)

Question

Я пытаюсь изменить класс элемента с помощью javascript.Пока что я делаю :

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

Редактировать:вот фактический код, который заменяет classname

В HTML :

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

В Javascript функция changeCurrentTo(id){ activatePlayButton(current_track);current_track = идентификатор;Деактивируемая кнопка воспроизведения(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;};
}

с

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

старый класс - это

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

Контекст - это музыкальный проигрыватель.Когда вы нажимаете кнопку воспроизведения (треугольник), она превращается в кнопку остановки (квадрат) и заменяет вызываемую функцию.

Проблема в том, что класс меняется, но в IE6 и 7 новый фон (здесь /images/small_play_button.png) отображается не сразу.Иногда это вообще не отображается.Иногда он не отображается, но если я немного встряхну мышь, то он отобразится.

Это отлично работает в FF, Chrome, Opera и Safari, так что это ошибка IE.Я знаю, что трудно сразу определить, основываясь только на этой информации, но если бы я мог получить некоторые указания, которые были бы полезны.

Спасибо-

Answer 1

Вы должны создать один изображение шириной в 50px и высотой в 24px где у вас есть как часть воспроизведения, так и часть остановки.Затем вы просто настраиваете фоновое положение следующим образом:

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

Затем вы загружаете "оба изображения" одновременно, и никакой задержки не произойдет, когда вы измените, какая часть изображения будет отображаться.

Обратите внимание, что я создал новый класс CSS, так что вам не нужно повторять ваш CSS для разных кнопок.Теперь вам нужно применить два класса к вашему элементу.Пример:

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

Answer 2

Вам нужно использовать setAttribute в ваших двух функциях.Попробуйте это:
link.setAttribute((document.all ? "className" : "class"), "play_button");
link.setAttribute((document.all ? "className" : "class"), "stop_button");

Answer 3

Не видя точной разметки, трудно сказать, но проблема с исчезновением фонового изображения в IE, вероятно, решается добавлением position: relative; заявление в .button классу и /или его родительскому div.