Rumah >hujung hadapan web >tutorial css >Coords (atribut HTML)

Coords (atribut HTML)

Lisa Kudrow
Lisa Kudrowasal
2025-02-26 09:40:09356semak imbas

atribut coords, yang digunakan dalam <a></a> unsur-unsur bersarang di dalam elemen <object></object>, membolehkan anda membuat peta imej sisi klien. Ini menyediakan kawasan yang boleh diklik dalam imej, sama seperti menggunakan unsur -unsur <area> dengan <map></map>. Mari kita meneroka perbezaan dan cara menggunakan coords.

Contoh peta imej:

Pertimbangkan imej ini:

coords (HTML attribute)

Kaedah 1: Menggunakan unsur (peta imej tradisional): <area>

Pendekatan ini menggunakan unsur -unsur

dalam <area> untuk menentukan kawasan yang boleh diklik: <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>

kaedah 2: Menggunakan unsur -unsur dalam <a></a> (pendekatan alternatif): <object></object>

Kaedah ini membenamkan imej menggunakan

dan tempat pautan (<object></object>) di dalam, menggunakan <a></a> dan coords: shape

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

menyediakan kandungan sandaran untuk penyemak imbas yang tidak mempunyai sokongan <ul></ul> yang betul. <object></object>

Nilai atribut: coords

nilai atribut

bergantung pada atribut coords: shape

  • (segi empat tepat): rect (top-left x, top-left y, bawah kanan x, koordinat bawah kanan). x1,y1,x2,y2
  • (Circle): circ (pusat x, pusat y, radius). x,y,r
  • (polygon): poly (satu siri x, y koordinat yang menentukan simpul poligon). x1,y1,x2,y2,x3,y3,...

Soalan Lazim (Soalan Lazim):

Seksyen FAQ yang disediakan sudah komprehensif dan tepat menerangkan penggunaan dan batasan atribut

. Tiada perubahan diperlukan. coords

Atas ialah kandungan terperinci Coords (atribut HTML). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn