javascript - JQuery および Javascript の条件付き画像の変更

Question

jqueryを介して画像のソースを変更するボタンがあります。画像のホバー状態を変更しようとするまで、すべてがうまくいっていました。1 つの画像のコードは次のとおりです。

<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 が変更されるため、ボタンによって異なります)。私が行った最も遠いのは、ボタンを最初の状態に戻すことです (ボタンがクリックされていないかのように) が、2 番目の状態 (ボタンがクリックされたとき) に戻すことはできません。私がここに投稿した JavaScript コードを使用すると、マウスオーバー後に画像が単にホバー状態のままになります。