coords özelliği, resim haritalama verisini tanımlayan AREA etiketinin shape özelliği ile belirtilen şeklin, konum, boyut ve/veya şekli oluşturan değerlerinin belirtilmesini sağlar.
HTML Sözdizimi
<area shape="rect" coords="sol1, ust1, sol2, ust2" />
<area shape="circle" coords="sol, ust, yaricap" />
<area shape="poly"
coords="sol1, ust1, sol2, ust2, ... [, solN, ustN]" />
JavaScript & DOM Sözdizimi
<script type="text/javascript">
area.shape = "rect"
area.coords = "sol1, ust1, sol2, ust2"
area.shape = "circle"
area.coords = "sol, ust, yaricap"
area.shape = "poly"
area.coords = "sol1, ust1, sol2, ust2, ... [, solN, ustN]"
konumlar = area.coords
</script>
shape = 'rect' parametreleri
| sol1 | Sol-Üst köşenin soldan uzaklığını belirtir. |
| ust1 | Sol-Üst köşenin üstten uzaklığını belirtir. |
| sol2 | Sağ-Alt köşenin soldan uzaklığını belirtir. |
| ust2 | Sağ-Alt köşenin üstten uzaklığını belirtir. |
shape = 'circle' parametreleri
| sol | Daire merkezinin soldan uzaklığını belirtir. |
| ust | Daire merkezinin üstten uzaklığını belirtir. |
| yaricap | Dairenin yarıçapını belirtir. |
shape = 'poly' parametreleri
| sol1 | Birinci köşenin soldan uzaklığını belirtir. |
| ust1 | Birinci köşenin üstten uzaklığını belirtir. |
| sol2 | İkinci köşenin soldan uzaklığını belirtir. |
| ust2 | İkinci köşenin üstten uzaklığını belirtir. |
| ... | ... |
| solN | Birinci köşenin soldan uzaklığı atanmalıdır. |
| ustN | Birinci köşenin üstten uzaklığı atanmalıdır. |
Çokgen (polygon) biçiminde bir bölge tanımlamak için çokgeni oluşturun her köşenin soldan ve üstten uzaklıklarının belirtilmesi gerekir. Çokgen bölge tanımlanırken herhangi bir miktar kısıtlaması olmaması ile birlikte belirtilen son noktanın mutlaka ilk noktayı işaret etmesi gerekir.
Dönüş Değeri
| konumlar | Şeklin koordinatlarını belirleyen virgül ile ayrılmış değerler döner. |
Örnek
Aşağıdaki örnek, bir resimde bulunan dörtgen, daire ve çokgen şekillerin coords özelliği ile belirtilerek resim haritalama uygulanmasını göstermektedir.
<map name="sekiller">
<area shape="rect" coords="10, 10, 83, 140"
href="javascript:alert('Dörtgen')" />
<area shape="circle" coords="135, 55, 45"
href="javascript:alert('Çember')" />
<area shape="poly" coords="241, 36, 282, 77, 262, 98, 219, 98, 199, 78, 241, 36"
href="javascript:alert('Çokgen')" />
</map>
<img src="coords.png" usemap="#sekiller" />
Test Edin
Elementler
coords özelliğinin kullanıldığı HTML etiketleri/elementleri
A | AREA