lifeacode yandex
HTML area Etiketi | HTML Etiketleri | Lifeacode

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

avatar
  Subscribe  
Bildir