<img> 没有使用图像映射

Question

我的图像拒绝使用我声明的图像映射。即使我删除了js函数调用。

<div id="content" class="position-absolute">
    <img src="img/label.png" alt="img/label2.png" usemap="#label1" id="label">
</div>

<!-- map -->
<map name="label1">
    <area shape="rect" coords="414,10,474,46" onClick="swapSrcAlt(label);">
</map>

我的JS供参考。

function swapSrcAlt(z) {
    if (typeof z === 'string') {
        var x = document.getElementById(z);
    } else {
        var x = z;
    }
    var src = x.src;
    var alt = x.alt;
    x.src = alt;
    x.alt = src;
}

这是我的 CSS 给我一个关于我的区域实际位置的参考点，我只是将鼠标悬停在它上面。

area {
    cursor:pointer;
}

以上几行，同样的方法似乎工作得很好。

<img src="img/thing.PNG" usemap="#thing-map" class="position-absolute">

    <map name="thing-map">
        <area shape="rect" coords="98,328,141,374" onClick="hideShow('homescreen','settings')">
    </map>

Answer 1

这是缩放问题，我的图像是 498x54 但被缩小到 310x34 因为我的容器宽度只有 310 像素。

这导致区域标签中的坐标错误。

<img> 没有使用图像映射

<img> not using imagemap

html

imagemap