Search code examples
htmlimagemap

<img> not using imagemap

My image refuses to use the imagemap I declared. Even if I remove the js function call.

<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>

My JS for reference.

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;
}

Here's my CSS to give me a reference point as to where my area actually is, I just hover over it.

area {
    cursor:pointer;
}

A few lines above, the same approach seems to work just fine.

<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>
Solution

  • It was the scaling, my image was 498x54 but got scaled down to 310x34 because my container was only 310px in width.

    This resulted in wrong coordinates in the area-tag.