JQuery和Javascript條件圖像變化

我有一個按鈕，通過jQuery改變圖像的來源。一切都很順利，直到我試圖改變圖像的懸停狀態。下面是一個圖像的代碼：JQuery和Javascript條件圖像變化

<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代碼，圖像在鼠標懸停後會陷入懸停狀態。

來源

2013-09-23 Hristo Georgiev

您是否在控制檯中發現任何錯誤？另外，如果你已經使用了jQuery，你可以通過改變'document.getElementById（「cplusa」）。src;'到'$（「＃cplusa」）。attr（「src」）;'' （獲取）和'$（「＃cplusa」）。attr（「src」，「new value」）;'（設置）。 –

另外，請記住，只有具有該ID的一個元素時，使用ID纔是適當的。這是這種情況嗎？ –

謝謝！我用jquery值重寫了代碼，它的工作方式像魔術一樣！ –

您是否在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... 
}

我試圖根據您提供的以前的代碼來解釋你的圖像來源，但我希望這有助於鉛你到正確的答案！

來源

2013-09-23 23:07:14

謝謝！有效！ –

JQuery和Javascript條件圖像變化

回答

相關問題