在 HTML 中使用 <map> 標籤和 <area> 標籤時，coords 屬性的值用於定義影像對映中的可點選區域。coords 的值取決於 shape 屬性的設定，以下是幾種常見形狀的精確定位方法：
-
shape="rect"(矩形):coords值由四個數字組成，分別代表矩形左上角的 x 座標、y 座標，以及右下角的 x 座標和 y 座標。 格式為x1,y1,x2,y2。 -
shape="circle"(圓形):coords值由三個數字組成，分別代表圓心的 x 座標、y 座標，以及圓的半徑。 格式為x,y,radius。 -
shape="poly"(多邊形):coords值由一系列 x, y 座標對組成，每個座標對代表多邊形的一個頂點。座標對之間用逗號分隔，格式為x1,y1,x2,y2,x3,y3,...。 必須至少指定三個座標對 (也就是至少三個頂點)。 -
shape="default":coords值不需要設定。它代表整個影像區域都是可點選的。
如何精確定位 coords 值?
-
使用影像編輯軟體: 例如 Photoshop, GIMP 等，可以開啟影像並檢視畫素座標。將滑鼠懸停在影像上，通常會在狀態列或資訊皮膚中顯示當前滑鼠位置的 x 和 y 座標。 這可以幫助你精確地確定需要使用的座標值。
-
瀏覽器開發者工具: 現代瀏覽器都帶有開發者工具，可以幫助你檢查 HTML 元素和定位座標。 你可以使用以下步驟：
- 開啟開發者工具 (通常按 F12)。
- 選擇 "Elements" 或 "Inspector" 標籤頁。
- 在 HTML 程式碼中找到
<img>和<map>元素。 - 選中
<area>元素，開發者工具會高亮顯示影像上對應的區域。 - 透過調整
coords值，可以實時檢視區域的變化，直到達到你想要的效果。 有些瀏覽器甚至允許你直接在影像上拖動區域的邊界來修改coords值。
-
線上影像對映生成器: 有一些線上工具可以幫助你建立影像對映，並自動生成
coords值。你只需要上傳影像，然後在影像上繪製你想要的區域，工具就會自動生成相應的 HTML 程式碼。
示例:
<img src="image.jpg" usemap="#mymap" width="300" height="200">
<map name="mymap">
<area shape="rect" coords="0,0,100,100" href="link1.html" alt="Link 1">
<area shape="circle" coords="200,100,50" href="link2.html" alt="Link 2">
<area shape="poly" coords="150,0,250,0,200,100" href="link3.html" alt="Link 3">
</map>
一些額外的建議:
- 使用有意義的
alt文字，以便在影像無法顯示時提供描述。 - 對於複雜的形狀，
poly是最靈活的選擇，但可能需要更多的時間來調整座標。 - 儘量保持影像對映的簡潔性，過多的區域可能會讓使用者感到困惑。
透過結合以上方法，你可以精確定位 coords 值，建立有效的影像對映。 記住，實踐是關鍵，多嘗試不同的方法和工具，找到最適合你的工作流程。