İstemcideki ImageMap

(Client Side Maps)

ImageMap (resim dönüstürme - imap), fare bir resmin üzerinde iken ya da resme tıklandığında istenen bir olayı meydana getirir. ImageMap ile meydana getirilecek olay, başka bir sayfaya link yapılması, resmin değişmesi, bir müzik parçasının çalınması gibi bir web sayfasında yapılabilecek her şey olabilir.

Örneğin, bir müzedeki resimlerin herbiri için birer küçük clip hazırlanıp web sayfasına yerlestirilebilir. Kullanıcı bu cliplere bakarak ilgilendiği resme tıkladığında, sayfayı dolduran büyük resim açılabilir. Aksi halde, kullanıcının büyük resimlerden seçim yapması, özellikle yavaş ağlarda çok zaman alıcıdır.

Benzer olarak, resimler ya da grafikler kullanılarak çekici menüler hazırlanabilir. Menüdeki resimlere tıklandığında ilgili sayfalara bağlantı (link) gerçekleşir.

ImageMap eylemi için, dikdörtgen, daire ya da çokgen bir bölge seçilir. Bu bölgenin ekrandaki konumu aşağıda açıklanan verilerle belirlenir. Fare bu bölge üzerine geldiğinde istenen olayı gerçekleştirecek kodlar yazılır. Bunun nasıl olduğunu örneklerle anlatacağız.

Örnek 1:

Head Body Tables Forms Menu

Yandaki imagemap aşağıdaki kodlar tarafından yaratılıyor

      <map id="imgMenu" name="imgMenu">
        <area href="../frames/index.html" shape="rect" coords="0,0,100,25" alt="Head" />
        <area href="../list/index.html" shape="rect" coords="0,26,100,50" alt="Body" />
        <area href="../tables/index.html" shape="rect" coords="0,51,100,75" alt="Tables" />
        <area href="../forms/index.html" shape="rect" coords="0,76,100,100" alt="Forms" />
      </map>
    
   <img src="menu.jpg" height="100" width="100"> usemap="#imgMenu" alt="Menu"/>

Şimdi burada geçen takıları ve nitelemeleri açıklayalım:

En alttaki 
   <img src="menu.jpg" height="100" width="100"> usemap="#imgMenu" alt="Menu"/>
takısı, map tarafından kullanılan görüntüdür. Bu resim, yalnızca istemciye görsel bir kılavuzdur. Aslında, bu resim olmadan da imageMap üstüne düşeni yapacaktır. Çünkü, onun bilmesi gereken şey, ekranda hangi bölgeye nasıl tepki vereceğidir. Bunu yapan kodlar, <area ... /> elemanları içine yazılanlardır.
map
map öğesi, tarayıcıya bir imagemap eylemi olacağını bildirir. <map> takısı bir teknedir (container), dolayısıyla, </map> ile kapatılmalıdır.
area
Grafiğin seçilen alt bölgeleri <area ... /> öğeleri ile belirtilir. Dolayısıyla, her <map> teknesi enaz bir tane <area ... /> öğesi içermelidir. Bu öğe bir tekne değildir. <area ... /> nın aşağıda listelenen nitelemeleri, hangi alt bölgeyi hangi olaya bağlayacağını belirler.
name
<map> takısına name nitelemesi (attribute) ile bir ad verilir. Bu ad <img> takısı içindeki usemap nitelemesi tarafından kullanılır. Böylece <img> teknesinin neyi içereceği belirlenmiş olur.
area takısının nitelemeleri
  • href = url
  • shape = rect | circle | poly
  • coords = bölgenin koordinatları
href
href - nitelemesinin değeri bir URL dir; belirlenen alt bölgeye tıklandığında nereye link olacağını belirtir.
shape
shape - nitelemesi alt bölgenin biçimini belirtir. rect (rectangle - dikdörtgen), circle (circle-daire) ya da poly (poloygon-çokgen) değerlerinden birisini alabilir.
rectangle
Dikdörtgenlerin ekrandaki konumu coords = x1,y1,x2,y2 gibi dört sayı ile belirtilir. Burada (x1,y1) dikdörtgenin sol üst köşesinin koordinatlarıdır. (x2,y2) ise sağ alt köşesinin koordinatlarıdır.
circle
Daireyi belirtmek için merkez ve yarıçap yeterlidir. Merkez (x,y) ile yarıçap r ile gösterilirse, coords = x,y,r değeri çemberi belirtecektir.
poly
Çokgeni belirlemek için köşelerinin koordinatlarını yazmak yeterlidir. Örneğin bir üçgensel bölgenin köşelerinin koordinatları (x1,y1) , (x2,y2), (x3,y3) ise, bunu coords = x1,y1, x2,y2, x3,y3 biçiminde yazarız.
ismap
Bazı tarayıcılar imagemap eylemi olacağını doğrudan algılamaz. O tarayıcıları uyarmak için yazılır. imagemap eylemini doğrudan algılayan tarayıcılarda bir işlevi yoktur. Ama bunu yazmaya alışmakta yarar vardır.
usemap
<img /> teknesinin hangi map eylemini içerdiğini belirtir.