内容をスキップ
area.addEventListener("mouseenter", () => {
const img = document.querySelector("img[usemap]");
const rect = img.getBoundingClientRect();
const coords = b.coords.split(",").map(Number);
// ★ 画像の縮小率を計算
const scaleX = rect.width / img.naturalWidth;
const scaleY = rect.height / img.naturalHeight;
let x, y;
if (b.shape === "rect") {
x = ((coords[0] + coords[2]) / 2) * scaleX;
y = ((coords[1] + coords[3]) / 2) * scaleY;
} else if (b.shape === "circle") {
x = coords[0] * scaleX;
y = coords[1] * scaleY;
} else {
let xs = [], ys = [];
for (let i = 0; i < coords.length; i += 2) {
xs.push(coords[i] * scaleX);
ys.push(coords[i + 1] * scaleY);
}
x = xs.reduce((a,b)=>a+b) / xs.length;
y = ys.reduce((a,b)=>a+b) / ys.length;
}
hoverRing.style.width = b.ringSize + "px";
hoverRing.style.height = b.ringSize + "px";
hoverRing.style.left = rect.left + x + "px";
hoverRing.style.top = rect.top + y + "px";
hoverRing.style.display = "block";
});
