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>

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ü

Krom Kenar Firefox IE Opera Safari
Evet Evet Evet Evet Evet Evet

mobil

Android Web Görünümü Chrome Android Firefox Android opera android iOS Safari Samsung İnternet
Evet Evet Evet Evet Evet Evet