HTML 圖片熱區映射：單張圖片不同區域顯示不同 title 提示文本

需求

一張圖片包含多個郵箱圖標，鼠標懸停不同圖標時，顯示對應郵箱名稱的提示框。

方案一：<map> + <area> 圖片熱區（原生 HTML，無需 JS，最推薦）

<img src="email-icons.png" usemap="#emailMap" alt="郵箱圖標" style="border: none;">

<map name="emailMap">
    <!-- 矩形區域：左上 (x1,y1) 右下 (x2,y2) -->
    <area shape="rect" coords="10,10,50,50" title="QQ郵箱" href="javascript:;" alt="QQ郵箱">
    <area shape="rect" coords="60,10,100,50" title="163郵箱" href="javascript:;" alt="163郵箱">
    <area shape="rect" coords="110,10,150,50" title="Gmail" href="javascript:;" alt="Gmail">
    < 
    <area shape="circle" coords="200,30,20" title="Outlook" href="javascript:;" alt="Outlook">
    <!-- 多邊形區域：頂點坐標序列 -->
    <area shape="poly" coords="250,10,290,30,250,50" title="自定義形狀" href="javascript:;" alt="自定義">
</map>

shape & coords 參數詳解

獲取坐標工具

• 瀏覽器開發者工具：元素選擇器懸停圖片查看坐標
• 在線工具：Image-Maps.com 上傳圖片可視化繪製熱區
• PS/畫圖工具：查看像素坐標

方案二：多個 <a> + <img> 絕對定位（舊回答方案，不推薦）

<div style="position: relative; width: 300px; height: 100px;">
    <img src="email-icons.png" style="width: 100%; height: 100%;">
    
    <a href="javascript:;" title="QQ郵箱" 
       style="position: absolute; left: 10px; top: 10px; width: 40px; height: 40px; z-index: 1;"></a>
    <a href="javascript:;" title="163郵箱" 
       style="position: absolute; left: 60px; top: 10px; width: 40px; height: 40px; z-index: 1;"></a>
    <a href="javascript:;" title="Gmail" 
       style="position: absolute; left: 110px; top: 10px; width: 40px; height: 40px; z-index: 1;"></a>
</div>

❌ 缺點：需手動計算絕對位置、響應式適配困難、語義不如 map/area 清晰。

方案三：CSS + JS 動態 tooltip（靈活、美觀可控）

<div class="hotspot-container">
    <img src="email-icons.png" usemap="#emailMap">
    <map name="emailMap">
        <area shape="rect" coords="10,10,50,50" data-title="QQ郵箱">
        <area shape="rect" coords="60,10,100,50" data-title="163郵箱">
    </map>
</div>

<style>
.tooltip {
    position: absolute;
    background: #333;
    color: white;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 12px;
    pointer-events: none;
    z-index: 9999;
    white-space: nowrap;
}
</style>

<script>
document.querySelectorAll('area[data-title]').forEach(area => {
    let tooltip;
    area.addEventListener('mouseenter', (e) => {
        tooltip = document.createElement('div');
        tooltip.className = 'tooltip';
        tooltip.textContent = area.dataset.title;
        document.body.appendChild(tooltip);
        // 定位到滑鼠位置
        tooltip.style.left = (e.clientX + 10) + 'px';
        tooltip.style.top = (e.clientY + 10) + 'px';
    });
    area.addEventListener('mousemove', (e) => {
        if (tooltip) {
            tooltip.style.left = (e.clientX + 10) + 'px';
            tooltip.style.top = (e.clientY + 10) + 'px';
        }
    });
    area.addEventListener('mouseleave', () => {
        if (tooltip) tooltip.remove();
    });
});
</script>

無障礙訪問 (a11y) 注意

• area 必須有 alt 屬性（屏幕閱讀器讀取）
• title 為鼠標懸停提示，alt 為無障礙文本，**兩者兼備**
• href="javascript:;" 使 area 可聚焦鍵盤訪問

總結

**最佳實踐**：基礎功能用 <map><area>，需求複雜（富文本、動畫、跟隨鼠標）再疊加 JS Tooltip 增強。