HTML IMAGE MAP KULLANIMI - USEMAP,MAP,AREA

HTML ile resimler (<img>) üzerinde <map> ve <area> etiketlerinden yararlanarak tıklanabilir alanlar oluşturabiliyoruz. Resim haritası (image map) olarak isimlendirilen bu yapı ile resmin farklı yerlerine linkler ekleyebiliriz. Bunun için;

map ile name parametresi ile isim verilmiş tıklanabilir alanlar bölümü oluşturacağız.
area etiketleri ile resim üzerinde tıklanacak bölgelerin koordinatlarını, linklerini ve bölge şekillerini belirleyeceğiz.
Img etiketi ile eklediğimiz resmi usemap parametresi ile bu haritaya bağlayacağız.

<map> ve <area> etiketleri içerisinde yazılanlar ekranda görünmez , sadece tıklanabilir alanlar için bir yapı oluşturur. Tek tek bakalım...

<map>

Resim haritasını oluşturur. Resimleri bu haritaya bağlayabilmek için name parametresi ile bir isim alır. İsibelirlenirken programlama dillerindeki değişken kurallarına uymak gerekir. Türkçe karakter kullanmamak gibi..

 <map name="turkiye">
    ....
    ....
    ...
     ...
    ...
</map>

<area>

<map> etiketi içerisinde tıklanabilir bölgeleri belirler. Bölgeler belirlenirken bazı parametreler alır.

 <map name="turkiye">
  <area shape="rect" coords="34,44,270,350" alt="İzmir" href="http://www.turkiye.gov.tr"> 
</map>

shape : Tıklanabilr bölgenin şeklini belirler

default : Tüm resmi tıklanabilir olarak belirler.
rect : dörtgen bir bölgeyi tıklanabilir olarak belirler.
circle : dairesel bir bölgeyi tıklanabilir olarak belirler.
poly : çokgen bir bölgeyi tıklanabilir olarak belirler.

coords : Bölgenin koordinatlarını belirler. Koordinatlar hesaplanırken X ekseni yatay , Y ekseni dikey noktaları belirler ve resmin sol üst köşesi X=0 , Y=0 olarak kabul edilir. Sağa gidildikçe X değeri , aşağı gidildikçe Y değeri artar.

Dörtgen (rect) bir bölgenin koordinatları belirlenirken sol üst ve sağ alt köşe X,Y koordinatları piksel cinsinden araya virgül konularak yazılır. 50,150,90,180 gibi 4 değerli bir koordinat oluşturulur.
Dairesel (circle) bir bölgenin koordinatları belirlenirken dairenin tam orta noktasının x,y koordinatları ve dairenin yarıçapı piksl cinsinden araya virgül konularak yazılır. 50,150,50 gibi 3 değerli bir koordinat oluşturulur.
Çokgen (poly) bir bölgenin koordinatları belirlenirken çokgenin tüm köşeleriniin x,y koordinatları araya virgül konularak yazılır. 50,150,50 ,50,150,50... gibi çok sayılı bir koordinat oluşturulur.

href : Bölge tıklandığında yönlendirilecek yer, sayfa, dosya vs belirlenir.

usemap

Img etiketinin haritaya bağlanmasını sağlayan parametresidir. usemap ile resmin bağlanacağı haritanın adı yazılır. Harita adının başına "#" işareti eklenir. # işareti sayfa içinde bir yer anlamına gelir.

<img src="resim/asansor.webp" alt="Türkiye" usemap="#turkiye">

Burada "turkiye" isimli map içerisinde belirtilen koordinatlara göre asansor.webp resmi üzerinde tıklanabilir linkler oluşur.

ÖRNEK ÇALIŞMA

Aşağıda Ege bölgesi haritası üzerinde İZMİR yazsına tıkladığımızda http://izmir.gov.tr/ sitesine yönlenebileceğimiz bir çalışma yapalım...

Bunun için öncelikle izmir'in harita üzerindek,i koordinatlarını bulmamız gerekir. İzmir yazısını bir dörtgen içerisinde düşünebiliriz. Sol üst köşe (A noktası) ve sağ alt köşenin (B noktası) koordinatlarna bakalım. Resim üzerindeki bir noktanın koordinatları için paint gibi bir programı kullanabilirsiniz.

SOL ÜST KÖŞE

X = 230, Y =140

SAĞ ALT KÖŞE

X = 290, Y = 170

Koordinatlarıbelirlediğimize göre koordinat şeklini dörtgen (rect) yaparak "ege" isminde haritayı oluşturup , usemap ile resmimze bağlayalım..

<map name="ege">
		<area shape="rect" coords="230,140,290,170" alt="İzmir" href="http://www.izmir.gov.tr" /> 
</map>

<img src="ege.png" alt="Ege Bölgesi" usemap="#ege">

Böylece artık harita üzerindeki İZMİR yazısına tıkladığımzda http://izmir.gov.tr/ adresine yönlenebiliriz. Aşağıdaki resim üzerinde deneyebilirsiniz.