我有一个通过 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="">
这是单击更改图像 src 的按钮时的 jquery 代码:
$('#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 代码,图像在鼠标悬停后会卡在悬停状态。