HTML <area> Etiketi

HTML <area> etiketi, görüntü haritası içerisindeki köprülerle ilişkilendirilen tıklanabilir veya etkin alanlar tanımlar. Bu alanlara tıklarsanız resim veya bir URL açılır. Bu etiket her zaman <map> öğesiyle birlikte kullanılır.

Bir resim haritası içerisinde, tek bir <map> kullanılarak birden fazla <area> öğesi tanımlanabilir. Bu <area> ögeleri faklı konumlara köprülenebilir.

HTML <area> elemanı şekil ve kodlarla tanımlanır . Shape özelliği, dikdörtgen , daire , kare ve çokgen gibi bir alan belirtir. Coords niteliği görüntünün içindeki alanların koordinatlarını belirtir.

Görüntü haritası, aktif alanlara sahip grafiksel bir görüntüdür Bir görüntü haritası tanımlamak için aşağıdakileri gerektirir:

Geçerli bir harita adı tanımlayan usemap özelliğine sahip bir HTML <img> öğesi gerekir.
HTML değeri <map> öğesi , değeri usemap ile aynı olması gereken name niteliğine sahip olması gerekir.
Bir resim haritasında tıklanabilir alanlar oluşturan <map> öğesinin içindeki bir veya daha fazla <area> ögesi olmalıdır.

Söz dizimi:

<area shape="" coords="" href="">

Özellikleri:

Görüntüleme	Etiketi Başlat/ Etiketi Bitir	Kullanımı
Blok	Başlangıç ve Bitiş	Görüntü Haritası

Örnek:

<!DOCTYPE html>
<html>
 <head>
<title>HTML Area Kullanımı</title>
<style>
  body{
  margin-left: 250px;}
</style>
  </head>
 <body>
 <h2>HTML area kullanım örneği</h2>
<img src="" usemap="#web">
<map name="web">
<area shape="rect" coords="66,117,131,168" href="">
<area shape="poly" coords="199,36,277,85" href="">
<area shape="circle" coords="330,107,406,159" href="">
<area shape="rect" coords="199,185,267,236" href="">
 </map>
 </body>
</html>

Özel Kullanımlar:

Özellik

Değer

Açıklama

Alternatif Metin(alt)

Metin(Text)

Görüntülenemezse tarayıcıda alternatif bir metin oluşturur.

Coords

x1, x2,y1,y2

x,y,radius

x1,x2,x3,y1,y2,y3

Dikdörtgene sağ alt ve sol üst köşe tanımlar.

Çember koordinatlarını tanımlar.

Çokgen köşelerini tanımlar.

Href

href

Aktif alan için bir köprü oluşturur.

Hedef(target)

Bağlantıların açılacağı pencereleri tanımlar.

Şekil(shape)

default

rect

circle

poly

Varsayılan alanı tanımlar.(Dikdörtgen)

Dikdörtgen alan tanımlar.

Dairesel bir alan tanımlar.

Çokgen tanımlar.

İndirme(download)

dosya adı

Kaynağı indirmek için kullanılan köprüyü tanımlar.

rel

yazar,tag vb.

Bağlantılı belgeler arasındaki ilişkiyi tanımlar.

hreflang

dil kodu

Bağlı kaynağın dilini belirtir.

tip(type)

Ortam Türü

Bağlı kaynağın MIME türünü belirtir. HTML 5’te desteklenmez.

Tarayıcı Desteği:

Kimler Neler Demiş?