Coords（HTML属性）

coords要素内でネストされた<a></a>要素内で使用される<object></object>属性により、クライアント側の画像マップを作成できます。 これにより、<area>を使用して<map></map>要素を使用するのと同様に、画像内のクリック可能な領域が提供されます。 違いと使用方法を調べてみましょうcoords。

画像マップの例：

この画像を考えてみてください：

メソッド1：要素の使用（従来の画像マップ）：<area> このアプローチでは、

要素を使用して、クリック可能な領域を定義します。 <area> <map></map>

メソッド2：

<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>

（代替アプローチ）内の

要素を使用：<a></a> このメソッドは、<object></object>および：

：

を使用して、<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><object></object>

属性値は属性に依存します：coords

coords（長方形）：shape

（左上x、左上y、下部右x、底右y座標）。

• （円）：rect（中央X、中央Y、半径）。x1,y1,x2,y2
• （ポリゴン）：circ（一連のx、y座標ポリゴンの頂点を定義する）。 x,y,r
• よくある質問（FAQ）： poly 提供されたFAQセクションはすでに包括的であり、x1,y1,x2,y2,x3,y3,...属性の使用法と制限を正確に説明しています。 変更は必要ありません。

以上がCoords（HTML属性）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。