HTML <area> coords 属性
Definisi dan penggunaan
Property coords
Property yang menentukan koordinat kawasan dalam peta gambar klien.
Property coords
Dengan property Property shape Dipakai bersama-sama untuk menentukan ukuran, bentuk dan lokasi kawasan.
Petunjuk:Koordinat kiri atas kawasan adalah 0,0.
Perhatian:Jika koordinat di dalam tanda <area> bertabrakan dengan kawasan lain, tanda <area> yang muncul pertama akan digunakan. Peramban akan mengabaikan koordinat yang berada di luar batas gambar.
Contoh
Gunakan property coords untuk menentukan koordinat setiap kawasan dalam peta gambar klien:
<map name="planetmap"> <area shape="rect" coords="0,0,114,576" href="sun.htm" alt="Sun"> <area shape="circle" coords="190,230,5" href="mercur.htm" alt="Mercury"> <area shape="circle" coords="228,230,5" href="venus.htm" alt="Venus"> </map>
Syarat
<area coords="value">
Nilai property
Nilai | Deskripsi |
---|---|
x1,y1,x2,y2 | Tentukan koordinat kiri atas dan kanan bawah segi persegi (shape="rect"). |
x,y,radius | Tentukan koordinat pusat dan jari-jari lingkaran (shape="circle"). |
x1,y1,x2,y2,...,xn,yn |
Tentukan koordinat sisi segi panjang. Jika pasangan koordinat pertama dan terakhir tidak sama, peramban akan menambahkan pasangan koordinat terakhir untuk menutup segi panjang (shape="poly"). |
Penjelasan detil:
Property coords tanda <area> mendefinikan koordinat kawasan yang sensitif ke tetikus dalam peta gambar klien. Angka koordinat dan makna mereka tergantung dari bentuk kawasan yang ditentukan oleh property shape.
Berikut adalah nilai yang sesuai untuk setiap bentuk:
Lingkaran: shape="circle", coords="x,y,z"
Di sini x dan y mendefinikan lokasi pusat lingkaran (koordinat '0,0' adalah koordinat kiri atas gambar), r adalah jari-jari lingkaran dalam piksel.
Segi panjang: shape="polygon", coords="x1,y1,x2,y2,x3,y3,..."
Setiap pasangan koordinat 'x,y' mendefinikan titik ujung satu segi panjang (koordinat '0,0' adalah koordinat kiri atas gambar). Mengdefinikan segi empat minimal memerlukan tiga pasangan koordinat; segi panjang tinggi memerlukan lebih banyak titik ujung.
多边形会自动封闭,因此在列表的结尾不需要重复第一个坐标来闭合整个区域。
矩形:shape="rectangle",coords="x1,y1,x2,y2"
第一个坐标是矩形的一个角的顶点坐标,另一对坐标是对角的顶点坐标,"0,0" 是图像左上角的坐标。请注意,定义矩形实际上是定义带有四个顶点的多边形的一种简化方法。
例如,下面的 XHTML 片段在一个 100x100 像素图像的右下方四分之一处,定义了一个对鼠标敏感的区域,并在图像的正中间定义了一个圆形区域。
<map name="map"> <area shape="rect" coords="75,75,99,99" nohref="nohref"> <area shape="circ" coords="50,50,25" nohref="nohref"> </map>
浏览器支持
Chrome | Edge | Firefox | Safari | Opera |
---|---|---|---|---|
Chrome | Edge | Firefox | Safari | Opera |
支持 | 支持 | 支持 | 支持 | 支持 |