HTML Görsel Haritaları

Picture öğesi görsel dosyaları arasından seçer. Bir görsel haritası (image map) tek bir görseli tutar ve onun bölgelerini tıklanabilir yapar — kat planındaki hotspot’lar, bir diyagram veya basit bir grafik menü. usemap taşıyan bir img öğesini, <area> bağlantılarıyla dolu bir <map> ile eşleştirirsiniz.

Görsel haritası nedir

Görsel haritası ayrı bir görsel formatı değildir. HTML olarak şunu söyler: «resimdeki bu dikdörtgen (veya daire, veya çokgen) bir bağlantı gibi davranmalı.» Gören kullanıcılar bölgeye tıklar; yardımcı teknolojiler her area üzerinde net bir alt ister, çünkü hotspot’un yanında görünür metin olmayabilir.

Doğrudan yanıt

1. img üzerine usemap="#mapname" ekleyin.
2. Bir veya daha fazla <area> öğesiyle <map name="mapname"> ekleyin.
3. Her area için shape, coords, href ve kendi alt değeri gerekir.
   usemap üzerindeki #, haritanın name değeriyle eşleşmelidir (ikinci bir yazım uydurmayın).

shape değerlerine hızlı bakış

Basit bir dikdörtgen harita

Bir masa düzeninde iki hotspot, kablolamayı öğrenmek için yeterlidir: usemap, eşleşen name ve dürüst alt metinli area dikdörtgenleri.

Örneği okumak

• Görseldeki usemap="#deskmap", deskmap adlı haritaya işaret eder
• Her area bir bağlantıdır: href hedef, alt hotspot’un adıdır
• rect için coords değerleri görselin piksel ızgarasında left, top, right, bottom’dur
• Görselin kendi alt metni («Desk layout») tüm grafiği tanımlar; area alt değerleri bölgeleri adlandırır

Koordinatlar nasıl çalışır

Koordinatlar, harita için yerleştirilmiş görselin CSS piksellerinde ölçülür. img üzerinde width ve height ayarlarsanız, öğrenirken coords’ları bu görüntü boyutuyla tutarlı tutun. Yanlış sayılar, çizilen nesneleri ıskalayan hotspot’lar üretir — yaygın ve sessiz bir hatadır.

Erişilebilirlik alışkanlıkları

Her tıklanabilir area anlamlı bir alt ister. Hotspot’ları isimsiz bırakmayın. Her bölgenin amacının açık olduğu haritaları tercih edin. Tasarım karmaşık duyarlı davranış gerektiriyorsa, birçok ekip kırılgan piksel haritaları yerine bağlantılı SVG veya ayrı düğmelere geçer.

Haritalar ne zaman yardımcı olur — ve ne zaman olmaz

Haritalar, birkaç kararlı bölgeli tek bir diyagram için yardımcı olur. Görsel birçok kırılma noktasında serbestçe ölçeklendiğinde zorlaşırlar; çünkü klasik coords kendiliğinden yeniden yazılmaz. Modern duyarlı arayüzler için ayrı bağlantılı görseller, CSS düzeni veya SVG düşünün. Yine de görsel haritalarını bilmek, eski sayfalar veya basit öğretim demoları devraldığınızda işe yarar.

circle ve poly (kısa not)

circle merkez ve yarıçap kullanır. poly, serbest bir şeklin etrafındaki x,y nokta çiftlerini listeler. usemap / name eşleşmesi doğal gelene kadar rect ile başlayın; sonra bir alıştırma grafiğinde diğer şekilleri deneyin.

Editörünüzde alıştırma

1. İki belirgin bölgeli basit, geniş bir görsel kullanın.
2. İki küçük alıştırma sayfasına giden iki rect alanı olan bir map oluşturun.
3. usemap="#name" değerini map name="name" ile dikkatle eşleştirin (# dahil).
4. Her bölgeye tıklayın ve gezinmeyi doğrulayın.
5. İsim eşleşmesini bir kez bozun, ölü hotspot’ları gözlemleyin, sonra düzeltin.
6. alt değeri yalnızca «link» diyen her areayı iyileştirin.

Kolay hatalar

• Uyumsuz usemap / name (usemap üzerinde # unutmak veya yalnızca bir tarafı yeniden adlandırmak)
• Her area üzerinde eksik alt
• Gerçek görsel boyutuyla veya nesne konumlarıyla uyuşmayan coords
• Plansız biçimde yüksek akışkan duyarlı düzenler için görsel haritalarına güvenmek
• Tek açıklamayı yalnızca img üzerine koyup alanları etiketsiz bırakmak

Özet

• Görsel haritaları img + usemap + map + area bağlar
• Şekiller rect, circle ve poly içerir
• Her alana href, alt, shape ve coords gerekir
• İsimleri eşleşik, coords’ları dürüst tutun
• Karmaşık duyarlı UI’lar için modern alternatifleri düşünün — yine de miras ve basit diyagramlar için haritaları öğrenin