HTML Alan Etiketi

Tanım

bu <area> etiketi, bir görüntü haritası içinde önceden tanımlanmış tıklanabilir alanları tanımlar. Bu, bir görüntüdeki alanların bir bağlantıyla ilişkilendirilmesine izin verir.

Örnek

<img src="https://res.cloudinary.com/thewebmaster/image/upload/f_auto,q_auto,w_600/image/moon-earth.png"
width="600"
height="337.5"
alt="Area Tag Demo."
usemap="#workmap"></img>

<map name="workmap">
  <area shape="circle" coords="178,171,133" alt="Earth" href="https://en.wikipedia.org/wiki/Earth" target="_blank">
  <area shape="circle" coords="455,130,80" alt="Moon" href="https://en.wikipedia.org/wiki/Moon" target="_blank">
</map>

Kendin dene

kullanım

• <area> etiketler yalnızca içinde kullanılabilir <map> eleman.
• bu usemap öznitelik img etiketi şuna karşılık gelir: name öznitelik map etiketler. Bunlar, ikisi arasında bir ilişki oluşturmak için eşleşmelidir.
• Kullanmak coords özelliği, bir dikdörtgen, daire, çokgen veya tüm bölgeyi kullanarak bir görüntü haritası oluşturabilirsiniz. Bkz. coords Daha fazla ayrıntı ve örnek için aşağıdaki öznitelik.
• Görüntü haritaları, AMP sayfalarıyla çalışmaz.

Öznitellikler

Alan etiketi Global Nitelikleri destekler, Etkinlik Niteliklerive aşağıdakiler:

• alt

  bu alt niteliği, resimleri göstermeyen tarayıcılarda kullanılacak alternatif metni belirtir.

  bu alt öznitelik gereklidir, eğer href niteliği kullanılır ve köprünün metnini temsil etmek için kullanılır.

• coords

  bu coords öznitelik, ilgili koordinatların koordinatlarını detaylandırır. shape bağlanmak.

  • rect değerleri alır x1,y1,x2,y2 dikdörtgenin sol üst ve sağ alt köşesinin koordinatlarını belirtir.

    <area shape="rect" coords="20,20,80,80" href="#" target="_blank" alt="Rectangle">

  • circle değerleri alır x,y,radius daire merkezinin ve yarıçapın koordinatlarını belirtir.

    <area shape="circle" coords="150,180,50" href="#" target="_blank" alt="Circle">

  • poly değerleri alır x1,y1,x2,y2,..,xn,yn ve çokgenin her noktasının koordinatlarını belirtir. Çokgeni kapatmak için ilk ve son koordinatlar aynı olmalıdır.

    <area shape="polygon" coords="10,10,25,30,89,78,20,80,10,10" href="#" target="_blank" alt="Polygon">

  • default hiçbir değer almaz ve tüm görüntüyü tanımlar.

• download

  bu download nitelik, hedefin takip edilmek yerine indirileceğini belirtir. Bkz. <a> Daha fazla ayrıntı için etiketleyin.

• href

  bu href özelliği tarafından hedeflenen alan için bağlantı hedefini belirtir. <area>. Bu özellik isteğe bağlıdır.

  <area shape="circle" coords="178,171,133" alt="Earth" href="https://en.wikipedia.org/wiki/Earth" target="_blank">

• hreflang

  bu hreflang niteliği, bağlantılı belgenin dilini belirtir ancak tamamen tavsiye niteliğindedir. Şunlar eşlik etmelidir: href bağlanmak.

• ping

  bu ping öznitelik, ayırıcı olarak tek bir boşlukla bir URL dizisi alabilir. Link tıklandığında mesaj gönderecektir. POST gövdeli URL’lere istek ping. Bu takip için kullanılabilir.

• referrerpolicy

  bu referrerpolicy niteliği, bağlantıyla birlikte göndermek istediğiniz yönlendiren bilgilerini belirtir.

  Değerler şunları içerebilir:

  • yönlendirmeyen
  • not-referrer-ne zaman-düşürme
  • Menşei
  • köken-zaman-çapraz-menşei
  • aynı kökenli
  • not-referrer-ne zaman-düşürme
  • katı-menşe-ne zaman-çapraz-menşei
  • güvenli olmayan url

• rel

  bu rel nitelik, iki belge arasındaki ilişkiyi belirtir.

  Değerler şunları içerebilir:

  • alternatif
  • yazar
  • yer imi
  • harici
  • Yardım Edin
  • lisans
  • sonraki
  • takip etme
  • noreferrer
  • açamayan
  • önceki
  • arama
  • etiket
  • sponsorlu
  • ugc

• shape

  bu shape öznitelik, sıcak nokta alanlarının şeklini ayrıntılı olarak açıklar. Görmek coords ayrıntılar ve örnekler için öznitelik.

• target

  bu target niteliği, bağlantılı belgenin nasıl açılacağını belirtir.

  Değerler şunları içerebilir:

• type

  bu type öznitelik, hedef belgenin MIME türüne ilişkin ipuçları verir ve tamamen tavsiye niteliğindedir.

En İyi Uygulamalar

• Her görüntü haritasını yalnızca bir kez kullanın. Aynı harita ile birden çok resim kullanmak isterseniz, haritayı çoğaltmalı ve farklı harita adları ve kimlikleri kullanmalısınız.
• yerleştirin <map> öğenin doğrudan kardeşi olarak <img> eleman.
• Anlamlı kullanın alt görüntü için metin ve ayrıca <areas>.
• Navigasyon için asla görüntü haritaları kullanmayın.
• AMP sayfaları için görüntü haritaları kullanmayın.
• Görüntü haritalarını yalnızca bilgilerin daha iyi sunulması için gerekirse kullanın. Bir örnek, bir konum haritasıdır.

Görüntü Koordinatları Nasıl Elde Edilir?

Bir görüntüdeki çeşitli noktaların koordinatlarını belirlemenin en kolay yollarından biri, görüntüyü basit bir boyama programına yüklemektir. Windows’ta “Paint” mükemmel çalışıyor.

Yüklendikten sonra cetveli ve kılavuz çizgilerini ekleyin. Herhangi bir noktanın üzerine gelip x ve y eksenini okuyabilirsiniz. Alternatif olarak, koordinatlar sol alt köşede görüntülenecektir.

Alternatif olarak, Google’da arama yaparak birçok resim haritası oluşturma aracı bulabilirsiniz. Bu iyi görünüyor.

Şartname

Tarayıcı Desteği

Masaüstü

mobil