JQuery 和 Javascript 条件图像更改

Question

我有一个按钮，可以通过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 代码，图像在鼠标悬停后会卡在悬停状态。

Answer 1

您是否在

mouseOutImage()函数中为按钮提供了正确的src属性？另外，考虑使用 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...
}

我试图根据您之前提供的代码解释您的图像源，但我希望这有助于引导您找到正确的答案！