У меня есть кнопка, которая изменяет источник изображений через jquery. Все шло хорошо, пока я не попытался изменить состояние отображения изображений. Здесь код для одного изображения:
<td colspan="2" rowspan="3" align="left" valign="top">
<a href="url">
<img src="images/cplus.gif" width="89" height="29" id="cplusa" alt="C++" onmouseover="mouseOverImage()" onmouseout="mouseOutImage()" />
</a>
</td>
Вот код кнопки:
<td colspan="3" align="left" valign="top">
<img id="softbutton" src="images/softbuttonpng" width="132" height="33" alt="">
Это код jquery, когда нажата кнопка, которая меняет изображение src:
$('#softbutton').click(function() {
$(this).attr("src","images/softbuttona.png");
$("#cplusa").fadeTo(1000,0.30, function() {
$("#cplusa").attr("src","images/cplusb.png");
}).fadeTo(500,1);
)};
И вот проблема - Операторы наведения:
function mouseOverImage() {
document.getElementById("cplusa").src = "images/cplushover.png";
}
function mouseOutImage() {
if (document.getElementById("softbutton").src == "images/softbuttona.png")
document.getElementById("cplusa").src = "cplusb.png";
else {
document.getElemebtById("cplusa").src="cplus";
}
}
То, что я пытаюсь сделать здесь, - восстановить изображение до его состояния по умолчанию (которое зависит от кнопки, потому что оно меняет изображение src при нажатии). Самое длинное, что я ушел, это вернуть кнопку в ее первое состояние (как если бы кнопка не была нажата), но я не могу восстановить ее обратно во второе состояние (когда нажимается кнопка). С кодом javascript, который я разместил здесь, изображение просто застревает в состоянии зависания после мыши.
Предоставляете ли вы правильные атрибуты src
вашей кнопке в вашей функции mouseOutImage()
? Кроме того, рассмотрите возможность использования функций jQuery для извлечения ваших элементов, для простоты и надежности... возможно, что-то вроде:
function mouseOutImage() {
if ($("#softbutton").attr('src') == "images/softbuttona.png")
$("#cplusa").attr('src', 'images/cplusb.png'); // fixed source...
else
$("#cplusa").attr('src', 'images/cplus.gif'); // fixed source...
}
Я попытался интерпретировать ваши источники изображений на основе предыдущего кода, который вы предоставили, но я надеюсь, что это поможет вам правильно ответить!