jquery - jQuery改变一个 image source when clicking and/or hovering over an - what am I doing wrong?

Question

我已经使用基本map和area标签创建了一个图像映射。我已经测试了地图，所有区域的行为都符合预期，因此 HTML 绝对正确。

我现在正在尝试使用 JQuery 在悬停和/或单击它们时根据不同区域获取地图（源）的图像。通过这种方式，我希望获得一种“交互式”地图，显示地图上不同位置的连接方式。
我定义的所有区域都有一个唯一的 ID。

这是我用于点击版本的脚本：

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

#area id 名称根据悬停的区域而变化，而 #londonmap 是用作地图的图像的 ID，其来源需要根据悬停/单击的区域而变化。

我不是 JQuery 专家，所以我需要问一下——我做错了什么？

score 1 · Accepted Answer

'src' 不是 CSS 属性，而是<img>标签的属性。

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

score 0 · Accepted Answer

您正在尝试使用$.css()jQuery 的方法更改图像源。图像的来源不是用 CSS 设置的，它是图像本身的属性。因此，您应该使用$.attr()来修改此值：

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

2 回答 2