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
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
bildiğiniz gibi bağlanacağınız kaynağın URL’sidir. Eğer isterseniz bu niteliği boş bırakabilirsiniz.
İ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.