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

Coords (atribut HTML)

Lisa Kudrow
Lepaskan: 2025-02-26 09:40:09
asal
353 orang telah melayarinya

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>

<img src="/static/imghw/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>
Salin selepas log masuk

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

Kaedah ini membenamkan imej menggunakan

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

<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>
Salin selepas log masuk

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 Laman Web ini
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
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan