Image Map

Kod

<map name="harita">
 <area snape="rect" coords="11,22,174,65" href="hayvan_resimleri.html" />
 <area snape="rect" coords="20,50,180,80" href="bitki_resimleri.html" />
</map>

<img scr="map_resmi.jpg" usemap="#harita" />

<!-- map.html Sayfası -->
<map name="harita">
 <area snape="rect" coords="11,22,174,65" href="hayvan_resimleri.html" />
 <area snape="rect" coords="20,50,180,80" href="bitki_resimleri.html" />
</map>

<!-- index.html Sayfası -->
<img scr="map_resmi.jpg" usemap="map.html#harita" />

Açıklama

1. Bir resmin farklı bölgelerine tıklanıldığında farklı adreslere gidilmesi isteniyorsa resim için bir map oluşturulur. Oluşturulan mapte link verilmek istenen bölgelerin koordinatları bulunur ve o koordinatlara tıklanıldığında gidilecek adres belirtilir.
2. Yukarıdaki örneğimizde “harita” isimli bir map oluşturduk.
3. snape özelliği ile resmi hangi geometrik şekilde parçalara ayıracağımızı belirtiyoruz.
   rect değeri ile resmi dikdörtgen şekilde bölgelere/parçalara ayırtmak istediğimizi belirttik.
4. coords özelliğine resmin ilgili bölgesinin koordinatlarını giriyoruz.
5. href özelliğine koordinatları belirtilmiş olan bölgeye tıklanıldığında gidilecek adresi yazıyoruz.
6. Son olarak img etiketinin usemap özelliğine oluşturduğumuz Map’in adını girerek, map ile resmi ilişkilendirmiş oluyoruz.
   Kullanım 1: Map ile resim aynı html sayfası içerisinde yer alıyorsa, img etiketinin usemap özelliğine direk Map’in adı yazılır. (usemap=”#harita”)
   Kullanım 2: Map ve resim farklı html sayfalarında yer alıyorsa, img etiketinin usemap özelliğine önce Map’in bulunduğu sayfa sonrada Map’in adı yazılır. (usemap=”map.html#harita”)

Resmin Herhangi Bir Bölgesinin Koordinatlarını Bulma 

Aşağıdaki resim üzerinde yer alan “AUDI”,”BMW” ve “FORD” alanlarına link verebilmek için koordinatlarını bulmamız gerek. Koordinatlarını bulmak istediğimiz dikdörtgen şeklinde ki alanın ilk köşesine imleci getirip kırmızı ok ile gösterilen yerde ki yatay ve düşey değerlerini alıp sonra ilk köşenin çaprazında yer alan diğer köşenin da yatay ve düşey değerlerini alarak coords özelliğine yazılacak değeri bulabiliriz.