坐標（HTML屬性）

coords屬性，用於嵌套在元素內的<a></a>元素中，允許您創建客戶端圖像映射。 這提供了圖像中可單擊的區域，類似於使用<object></object>> <area>的<map></map>元素。 讓我們探索差異以及如何使用coords。

>圖像地圖示例：

考慮此圖像：

方法1：使用 elements（傳統圖像映射）：<area>> 此方法在

>內使用

元素來定義可單擊區域：<area> <map></map>

<code class="language-html"><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174053401375600.png" class="lazy" alt="coords (HTML attribute) ">
<map name="Map">
  <area shape="rect" coords="132,117,270,185" href="https://www.php.cn/link/cf57d08a994170907f4f367c647e075e" alt="Monday's mustache - 'The Hero'">
  <area shape="poly" coords="136,238,137,301,3,306,3,242" href="https://www.php.cn/link/206f6a7ada917912e9389da75d80be3b" alt="Thursday's mustache - 'The Weasel'">
</map></code>

方法2：使用

>中的元素（替代方法）： <a></a> <object></object>此方法使用嵌入圖像，並使用

> and

：<object></object>> <a></a> coordsshape為缺乏適當支持的瀏覽器提供後備內容。

<code class="language-html"><object data="mustaches.png" type="image/png" width="276" height="375" usemap="#Map2">
  <map name="Map2">
    <ul>
      <li><a href="https://www.php.cn/link/cf57d08a994170907f4f367c647e075e" shape="rect" coords="132,117,270,185">Monday's mustache - 'The Hero'</a></li>
      <li><a href="https://www.php.cn/link/206f6a7ada917912e9389da75d80be3b" shape="poly" coords="136,238,137,301,3,306,3,242">Thursday's mustache - 'The Weasel'</a></li>
    </ul>
  </map>
</object></code>

<ul></ul>屬性值：

屬性值取決於屬性：coords>

coords>（矩形）：shape

（上左x，上左上y，右下角x，右下y坐標）。
• rect>（circle）：x1,y1,x2,y2（中心x，中心y，radius）。
• circ>（polygon）：x,y,r>（一系列x，y坐標定義多邊形的頂點）。
• >經常詢問問題（FAQ）：poly> 提供的FAQ部分已經全面，並且準確地描述了屬性的用法和限制。 不需要更改。 x1,y1,x2,y2,x3,y3,...

以上是坐標（HTML屬性）的詳細內容。更多資訊請關注PHP中文網其他相關文章！