もっと見る

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"; });
上部へスクロール