Note: HTML4 not HTML5
In HTML4, the values are numbers of pixels or percentages, if a percent sign (%) is appended; in HTML5, the values are numbers of CSS pixels.
Chrome and Firefox auto-adapt coordinates to image size.
Workaround is to update coords positions or use link in SVG
const areaCoords = new WeakMap();
for (let img of document.getElementByTagName("img")){
let ratioX = this.offsetWidth / this.naturalWidth;
let ratioY = this.offsetHeight / this.naturalHeight;
// If Infinity (when natural sizes are unknown, equal to 0)
if(!isFinite(ratioX) || !isFinite(ratioY)){
continue;
}
for (let area of document.querySelectorAll(`map[name=${img.useMap.slice(1)}] area[coords]`)){
let coords = areaCoords[area];
if(!coords){
coords = areaCoords[area] = this.coords.split(",").map(parseFloat);
}
area.coords = coords.map((coord, index) => coord * (index % 2 ? ratioY : ratioX)).join(",");
});
});
- Not Chrome (parse values as px)
- Not Firefox
- ui
- image map