ResponsiveImageMap GitHub'dan alınan bir jQuery eklentisidir ve görüntü haritalarının boyut değişikliklerine yanıt vermesini sağlar.
Resim haritası, farklı sayfalara bağlı farklı bölgeleri içeren bir resimdir. Fandom'da <imagemap> etiketleri kullanılarak resim haritaları oluşturulabilir. Resim haritası oluşturmayla ilgili talimatlar için Topluluk Merkezi'nde Yardıdm:ImageMap sayfasına bakın.
Resim haritaları, yalnızca Fandom'da değil, genel olarak yerel olarak duyarlı değildir, yani resim boyutunu CSS ile değiştirmek, bağlantılı koordinatların yanlış hizalanmasına neden olur.
Fandom'da resim, orijinal boyutundan farklı bir boyuta yeniden boyutlandırılabilir, ancak bu boyut kaynak kodunda görünmelidir ve mevcut alana sığması için CSS tarafından kolayca değiştirilemez. Ne olursa olsun CSS tarafından değiştirilirse, bağlantılı bölgeler yukarıda açıklandığı gibi yanlış hizalanır.
Bu eklenti, sayfa yüklendiğinde ve tarayıcı penceresi yeniden boyutlandırıldığında haritanın koordinatlarını yeniden hesaplayarak boyut değişikliklerini işler. Betiğinin Fandom Developers Wiki sitesindeki sürümü, Fandom'da görüntü haritalarının oluşturulma ve kullanılma şekliyle uyumlu olacak şekilde değiştirildi.
(Bu eklenti ile veya eklenti olmadan) resim haritasının orijinal koordinatlarının, resminin değiştirilmiş boyutuna değil, orijinal boyutuna atıfta bulunması gerektiğini unutmayın.
Installation
1. adım: Betiği içe aktarma:
2. adım: CSS ekleme:
Usage
Sayfa kaynak kodunda, duyarlı olmasını istediğiniz görüntü haritalarını responsive-imagemap sınıfına sahip bir öge ile sarın. Örneğin:
<div class="responsive-imagemap">
<imagemap>
File:Foo.jpg|200px|picture of a foo
poly 131 45 213 41 210 110 127 109 [[Monitor]]
poly 104 126 105 171 269 162 267 124 [[Keyboard]]
rect 15 95 94 176 [[Human|Girl]]
# A comment, this line is ignored
circle 57 57 20 [[Copyright]]
desc bottom-left
</imagemap>
</div>
(Resim eşleme kodu örneği, yukarıda belirtilen yardım sayfasından kopyalanmıştır)
Ardından, resmini CSS ile yeniden boyutlandırabilirsiniz ve bağlantılı alanlar aynı hizada kalacaktır. Bundan yararlanmanın basit yolu, resminin mevcut tüm genişliği kaplamasını sağlamaktır. Bu, aşağıdaki CSS ile elde edilebilir:
.responsive-imagemap img {
width: 100%;
height: auto;
}
Bu kod, vikinin CSS sayfasına, genellikle MediaWiki:Common.css yerleştirilmelidir.