Bir resmin üzerine görsel haritası ekleme

Burada bir görsel haritasının nasıl oluşturulacağını ve ilk önce göz önünde bulundurulması gereken bazı olumsuzlukları gözden geçireceğiz.

Bu makalede yalnızca istemci tarafı görsel eşlemeleri anlatılmaktadır. Kullanıcının bir fareye ile öğenin üzerine gelmesini gerektiren sunucu tarafı görsel haritalarını kullanmayın.

Görsel haritaları ve dezavantajları

<a> öğesi içine bir görsel yerleştirdiğinizde görselin tamamı tek bir web sayfasına bağlantı verir. Öte yandan bir görsel haritası ile aynı resim üzerinde her biri farklı bir kaynağa bağlanan birkaç aktif bölge (“sıcak noktalar” -hotspots– olarak adlandırılır) oluşturabiliriz.

Eskiden görsel haritaları oldukça popülerdi. Ancak bu öğelerin performans ve erişilebilirlikleri üzerine etraflıca düşünmek önemli olabilir.

Metin bağlantıları (belki de CSS ile biçimlendirilmiş) çeşitli nedenlerle görüntü haritalarına tercih edilir: metin bağlantıları hafiftir, bakımı kolayca yapılabilir, genellikle daha SEO dostudur ve erişilebilirlik ihtiyaçlarını destekler (örn. ekran okuyucular, salt metin tarayıcılar, çeviri hizmetleri).

Görsel haritası düzgün bir şekilde nasıl eklenir

1. Adım: Görsel seçimi

Her görsel kullanılabilir değildir.

• Görsel, insanlar üzerine tıkladığında ne olacağını net bir şekilde ifade etmeli. alt metin vererek bunu tabiki yapabiliriz, ancak birçok insan bu metinleri görmez.
• Görsel, etkin noktaların nerede başlayıp nerede bittiğini açıkça belirtmeli.
• Hotspot’lar, herhangi bir ekranda rahatça dokunmak için yeterince büyük olmalıdır. Yeterince büyük ne kadar büyük? 72 × 72 CSS pikseli iyi bir minimumdur. Bunun yanında dokunma öğeleri arasında ek boşluklar da bırakılması gerekir. 50languages.com sitesi bu kısmı mükemmel bir şekilde özetler (yazma tarihi itibariyle). Örneğin Rusya veya Kuzey Amerika’ya dokunmak, Arnavutluk veya Estonya’ya dokunmaktan çok daha kolaydır.

Görselinizi her zaman olduğu gibi bir <img> öğesi ve alt metinle eklersiniz.

Özel bir usemap niteliğine ihtiyacınız olacak. Resim haritanız için boşluk içermeyen benzersiz bir ad bulun. Ardından, usemap öznitelik değeri olarak bu adı (öncesinde bir hashtag kullanın) atayın:

<img
  src="image-map.png"
  alt=""
  usemap="#example-map-1" />

2. Adım: Sıcak noktalarınızı etkinleştirin

Bu adımda, tüm kodunuzu bir <map> öğesinin içine koyun. <map> yalnızca bir name özniteliğine ihtiyaç duyar. Yukarıdaki img öğesinde kullandığınız usemap niteliğine verdiğimiz değeri veriyoruz.

<map name="example-map-1">

</map>

<map> elementi içinde <area> elementlere ihtiyacımız var. Bir <area> öğesi, tek bir etkin noktaya karşılık gelir. Klavyede gezinmeyi de kolaylaştırmak için <area> öğelerin sırasının etkin noktalara karşılık geldiğinden emin olun.

<area> öğeleri boş öğelerdir, ancak dört öznitelik gerektirir:

shape ve coords

shape dört değerden birini alır: circle, rect, poly, ve default. (default, tanımladığınız diğer sıcak noktalar hariç tüm görüntüyü kaplar.) Seçtiğiniz şekil, coords içinde sağlamanız gereken koordinat bilgilerini belirler.

• Bir circle (daire) için, merkezin x ve y koordinatlarını ve ardından da yarıçapın uzunluğunu sağlayın.
• Bir rect (dikdörtgen) için sol üst ve sağ alt köşelerin x/y koordinatlarını sağlayın.
• Bir poly (çokgen) için, her köşenin x/y koordinatlarını sağlamayın (yani, en az altı değer).

Koordinatlar CSS piksel olarak verilir.

Çakışma durumunda önce tanımlanan geçerli olur.

href

href bildiğiniz gibi bağlanacağınız kaynağın URL’sidir. Eğer isterseniz bu niteliği boş bırakabilirsiniz.

alt

İnsanlara bağlantının nereye gittiğini veya ne yaptığını söyleyen zorunlu bir niteliktir. alt metin yalnızca resim mevcut olmadığında görüntülenir. Lütfen erişilebilir bağlantı metni yazmak için yönergelerimize bakın.

Tüm görsel için bir alt niteliğiniz varsa ve href niteliği boşsa alt="" yazabilirsiniz.

<map name="example-map-1">
  <area shape="circle" coords="200,250,25"
    href="page-2.html" alt="circle example" />

  <area shape="rect" coords="10, 5, 20, 15"
    href="page-3.html" alt="rectangle example" />

</map>

3. Adım: Herkes için çalıştığından emin olun

Görsel haritalarını birçok tarayıcıda ve cihazda titizlikle test edene kadar işiniz bitmiş sayılmaz. Bağlantıları yalnızca klavyenizle takip etmeyi deneyin. Görselleri kapatmayı deneyin.

Görsel haritanız yaklaşık 240 pikselden daha genişse, web sitenizi duyarlı hale getirmek için daha fazla ayarlama yapmanız gerekecektir. Küçük ekranlar için görüntüyü yeniden boyutlandırmak yeterli değildir, çünkü bu şekilde koordinatlar aynı kalır ve artık görüntüyle eşleşmez.

Görüntü haritalarını kullanmanız gerekiyorsa Matt Stow’un jQuery eklentisine bakmak isteyebilirsiniz. Alternatif olarak, Dudley Storey de bir yol gösterir: görsel haritası efekti için SVG kullanın.