jQuery更改 <map> 單擊和/或將鼠標懸停在 <area> - 我究竟做錯了什么？

Question

我已經使用基本map和area標簽創建了一個圖像地圖。 我已經測試過地圖，並且所有區域都按預期運行，因此HTML絕對正確。

我現在正嘗試使用JQuery懸停和/或單擊它們時根據不同區域更改地圖（源）圖像。 這樣，我希望獲得一種“交互式”地圖，該地圖顯示地圖上不同地點之間的連接方式。
我定義的所有區域都有唯一的ID。

這是我用於點擊版本的腳本：

$(document).ready(function() {
    $('#area1').click(function() {
        $('#londonmap').css('src', 'area1map.png');
    });
});​

#area id名稱根據懸停的區域而變化，而#londonmap一個是用作地圖的圖像的ID，其來源需要根據懸停/單擊的區域而變化。

我不是JQuery專家，所以我需要問-我在做什么錯？

Answer 1

'src'不是css屬性，而是<img>標簽的屬性。

$(document).ready(function() {
    $('#area1').click(function() {
        $('#londonmap').attr('src', 'area1map.png');
    });
});​

Answer 2

您正在嘗試使用jQuery的$.css()方法更改圖像源。 圖像的來源不是使用CSS設置的，而是圖像本身的屬性。 因此，您應該使用$.attr()修改此值：

$("#londonmap").attr("src", "area1map.ong");