Resimlerde ‘MAP’ kullanmak

Map’ler bir resmin değişik yerlerine tıklandığında değişik bağların yüklenmesi veya değişik bir cgi-bin işinin yapılması olarak tanımlanır.

Burada kullanacağımız resmin ‘.gif’ biçiminde olması gereklidir. Sayfanın içinde bu resmi tanımladığımız ‘<img …’ belirtecinin içine bir kaç unsur daha ekleyerek ve bir de ‘map’ (harita) alanının kısımlarını şekilleriyle birlikte tanımlayarak işimizi bitiririz.

Resmin betimi: <img src=”/filanca.gif” ISMAP usemap=”#falanca” width=160 height=100>

ISMAP, resmin bir harita olduğunu.

usemap=”…” hangi usemap html kodu tanımını kullanması gerektiğini, www gösterici programına söylüyor.

Usemap tanımı:

<map name=”falanca”>

<area shape=”rect” coords”1,1,159,50 href=”dikdortgen.html“>

<area shape=”circle coords=”80,100,40 href=”daire.html“>

<area shape=”polyg” coords=”10,110,150,110,80,190,9,110 href=”ucgen.html>

<area shape=”default” nohref>

</map>

name ile belirttiğimiz isim ‘<img ..’ içinde usemap=”#…” ile kullandığımızın aynısı.

shape belirteci ile dikdortgen, daire, ya da poligon tanımlayabiliyoruz. Dikdörtgenin koordinatlarını: X-sol_ust,Y-sol_ust,X-sag_alt,Y-sag_alt biçiminde ‘coords=”…” ‘ kısmında belirtiyoruz. ‘href=”…” ‘ bölümü ise bu dikdortgen alana tıklanıldığında neyin yüklenmesi gerektiğini söylüyor.

web sitesi alanında bir çember için X-merkez,Y-merkez,R-yarıçap biçiminde koordinat tanımlıyoruz.

www sayfası poligonu tanımlarken sırayla her bir köşenin X,Y biçiminde koordinatlarını html kodları içine giriyoruz. Dikkat etmemiz gereken husus, poligonun noktalarını saat-yönünde tanımlamamız gerektiğidir. Ayrıca poligonu kapamaya da tarayıcı programlar arasında uyumsuzluk nedeniyle dikkat etmeliyiz. Yukarıdaki üçgen örneğini incelemek aslında poligon tanımı yapabilmek için yeterli. Üçgen için dört nokta kullandık (dördüncü ilkinin dibinde). Aynı zamanda bu üçgenin X,Y betimlemeleri de saat-yönünde girilmiş (noktaları kağıt üzerinde yaklaşık olarak işaretlerseniz bu ‘saat-yönü’ kavramını daha iyi anlayabilirsiniz).

son olarak da ‘<area shape=”default” nohref>’ ile resmin diger bölgelerine tıklanıldığında hiç bir sey yapılmaması gerektiğini söylüyoruz.