在影像上新增熱點圖

當你在 <a> 內部巢狀影像時，整個影像連結到一個網頁。另一方面，影像地圖包含多個活動區域（稱為“熱點”），每個區域連結到不同的資源。

以前，影像地圖是一種流行的導航工具，但重要的是要徹底考慮它們的效能和無障礙性影響。

文字連結（可能用 CSS 樣式化）比影像地圖更可取，原因有幾個：文字連結更輕量級、更易於維護、通常更利於 SEO，並支援無障礙性需求（例如，螢幕閱讀器、純文字瀏覽器、翻譯服務）。

並非任何影像都可接受。

• 影像必須清楚地表明人們點選影像連結時會發生什麼。alt 文字是必須的，當然，但許多人從未看到過它。
• 影像必須清楚地指示熱點開始和結束的位置。
• 熱點必須足夠大，以便在任何視窗大小下都能舒適地點選。多大的尺寸才算足夠大？72 × 72 CSS 畫素是一個不錯的最小值，在觸控目標之間還有額外寬敞的間隙。位於 50languages.com 的世界地圖（截至撰寫本文時）完美地說明了這個問題。點選俄羅斯或北美比點選阿爾巴尼亞或愛沙尼亞要容易得多。

你像往常一樣插入你的影像 幾乎一樣（使用 <img> 元素和 alt 文字）。如果影像僅作為導航工具存在，你可以在 <area> 元素中提供適當的 alt 文字的情況下，寫 alt=""。

你需要一個特殊的 usemap 屬性。想出一個不包含空格的唯一名稱，用於你的影像地圖。然後將該名稱（前面加一個井號）分配為 usemap 屬性的值

<img src="image-map.png" alt="" usemap="#example-map-1" />

在此步驟中，將所有程式碼放在 <map> 元素內。<map> 只需要一個屬性，即與你在上面的 usemap 屬性中使用的相同地圖 name

<map name="example-map-1"> </map>

在 <map> 元素內部，我們需要 <area> 元素。一個 <area> 元素對應於一個熱點。為了保持鍵盤導航直觀，確保 <area> 元素的原始碼順序與熱點的視覺順序一致。

<area> 元素是 空元素，但需要四個屬性

shape

shape 屬性接受四個值之一：circle、rect、poly 和 default。shape 為 default 的 <area> 佔據整個影像，減去你定義的任何其他熱點。如果定義的區域之間存在重疊，則原始碼順序決定哪個區域優先。你選擇的形狀決定了你將在 coords 中需要提供的座標資訊。

coords

座標以 CSS 畫素給出，其值取決於選擇的 shape。

• 對於圓形，提供中心的 x 和 y 座標，然後是半徑的長度。
• 對於矩形，提供左上角和右下角的 x 和 y 座標。
• 對於多邊形，提供每個角的 x 和 y 座標（所以至少有六個值）。

href

你要連結到的資源的 URL。如果你不想讓當前區域連結到任何地方（比如，你正在建立一個空心圓），你可以將此屬性留空。

alt

一個必需屬性，告訴人們連結指向何處或它做什麼。alt 文字僅在影像不可用時顯示。請參考我們的 無障礙連結文字編寫指南。

如果你將 href 屬性留空並且整個影像已經有一個 alt 屬性，你就可以寫 alt=""。

<map name="example-map-1">
  <area
    shape="circle"
    coords="200,250,25"
    href="page-2.html"
    alt="circle example" />

  <area
    shape="rect"
    coords="10, 5, 20, 15"
    href="page-3.html"
    alt="rectangle example" />
</map>

在許多瀏覽器和裝置上嚴格測試影像地圖之前，你還沒有完成。嘗試僅使用鍵盤來點選連結。嘗試關閉影像。

如果你的影像地圖寬度超過大約 240px，則你需要進行進一步調整以使你的網站響應式。僅僅調整小螢幕的影像大小是不夠的，因為座標保持不變，不再與影像匹配。

• <img>
• <map>
• <area>
• 線上影像地圖編輯器