---

Menjalankan Imej Peta `Client-Side'

Peta Imej adalah gambar yang yang mengizinkan pengguna untuk membuat capaian kepada dokumen-dokumen yang berbeza dengan mengklik pada bahagian-bahagian tertentu gambar tersebut. Imej peta yang konvensional yang dipanggil Imej `server-side'. Prosesnya adalah seperti berikut:-

1. Apabila seseorang pelayar mengklik di atas imej, browser and menghantar satu permintaan kepada server, memohon alamat dokumen yang dikaitkan dengan daerah/kawasan yang diklik itu.

2. Server itu kemudiannya menghantar semula maklumat yang diminta itu.

3. Browser kemudian menghantar kepada server permintaan terhadap dokumen yang baru.

Dengan menggunakan peta imej `client-side', kesemua maklumat peta boleh ditentukan pada fail HTML yang mengandungi imej berkenaan. Terdapat beberapa kelebihan menggunakan cara ini.

• Bilangan masukan (hits) ke server dikurangkan, dan capaian disempurnakan dengan lebih cepat.

• Capaian-capaian destinasi boleh ditunjukkan sewaktu pelayar menggerakan kursor di atas peta.

• Peta-peta imej boleh dibuat dan diuji di komputer sendiri, tanpa memerlukan server. server.

• Peta-peta imej boleh dicapai menggunakan protokol-protokol selain dari HTTP; peta-peta imej yang konvensional hanya boleh bertindak dengan protokol HTTP.

• Peta-peta imej tidak bergantung kepada server, justeru itu menjadikannya mudah-alih.

Membina sebuah peta imej `client side'.

Sebagai satu contoh, langkah-langkah berikut akan menunjukkan bagaimana satu palang navigasi yang disinpan dengan nama imej.gif boleh digunakan sebagai peta imej `client-side'. Setiap butang akan dipetakan kepada beberapa dokumen yang berbeza.

Untuk membina imej peta `client-side':

1. Masukkan satu imej di dalam dokumen HTML anda.

   
   <IMG SRC="imej.gif">
   

2. Tambahkan parameter USEMAP kepada elemen IMG.

   Parameter USEMAP menetapkan nama bagi definasi peta yang dihubungkan dengan imej. Untuk contoh ini definasi peta dinamakan sebagai demo. Juster definasi peta adalah di dalam fail yang sama, nama fail tidaklah diperlukan lagi.

   <IMG SRC="imej.gif"  USEMAP="peta.html#demo"> 
   

3. Tuliskan kordinat pixel bagi setiap kawasan yang anda hendak definasikan.

   

   Kordinat pixel bermula dari 0,0 di atas sebelah kiri imej. Kebanyakan penyunting grafik contohnya, Paintshop Pro dan CorelPaint boleh digunakan untuk menunjukkan kedudukan kordinat pixel ini.

4. Membina definasi sesebuah peta.

   <MAP NAME="demo"> 
   <AREA SHAPE="RECT" COORDS= "24,18,143,41" HREF="homepage.html">
   <AREA SHAPE="RECT" COORDS= "168,18,287,41" HREF="tables.html"> 
   </MAP> 
   

   Cara tersebut akan memetakan butang sebelum ini kepada satu dokumen yang bernama homepage.html. Sementara butang selepas ini akan memetakan kepada dokumen yang bernama istilah.html.

5. Berikut ialah contoh yang lengkap:

   

   Sebaik saja penunjuk tetikus digerakkan ke atas kawasan peta, URL dokumen yang dihubungkan dengan kawasan tersebut akan tertera di palang status browser anda. Tindakbalas yang terlihat ini membolehkan para pelayar mengetahui kawasan manakah yang telah dipetakan dan dokumen apakah yang akan dihubungkan.

   Imej peta `server-side' tidak dapat menunjukkan maklumat ini kerana maklumat URLnya terletak di server dan tidak mungkin diketahu kecuali setelah imej itu diklikkan.

Mendefinasikan kawasan-kawasan yang bukan dalam bentuk segiempat tepat.

Di dalam elemen pemetaan, parameter-parameter SHAPE dan COORDS digunakan bersama untuk menentukan bentuk kawasan yang dipetakan. Kordinat pixel diperlukan oleh parameter COORDS bergantung kepada bentuk yang ditentukan oleh parameter SHAPE.

<MAP NAME="nama"> 
<AREA SHAPE="bentuk"  COORDS="kordinat pixel"  HREF="URL"> 
</MAP> 

<AREA SHAPE=CIRCLE COORDS = "center-x , center-y , radius-x" HREF = "URL" >

Menentukan kawasan bulat yang didefinasikan oleh kordinat pixel titik tengan bulatan tersebut dan diikuti dengan jejarinya dalam ukuran pixel.

<AREA SHAPE=POLY COORDS = "x1,y1 , x2,y2 , x3,y3 , ..." HREF = "URL" >

Satu kawasan yang tidak tertentu bentuknya didefinasikan dengan beberapa siri pasangan kordinat (x,y).

<AREA SHAPE=RECT COORDS = "left-x, top-y , right-x, bottom-y" HREF = "URL" >

Menentukan kawasan segiempat tepat didefinasikan oleh kordinat pixel bucu atas sebelah kiri dan bucu bawah sebelah kanan.

Mendefinasikan Kawasan Yang Bertindan

Di dalam grafik berikut, kawasan-kawasan biru dan hijau dipetakan kepada URL yang berbeza. Meskipun kawasannya bertindan/bertindih, setiap kawasan itu akan menghubungkan ke dokumen yang tertentu.

Jika dua atau lebih kawasan bertindan, kawasan yang didefinasikan lebih awal di dalam peta imej akan dihubungkan. Contohnya di dalam definasi grafik di atas kawasan hijau lebih awal didefinasikan daripada kawasan biru:

<MAP NAME="overlap"> 
<AREA SHAPE="RECT" COORDS="66,13,186,37"  HREF="magazin.html"> 
<AREA SHAPE="RECT" COORDS="195,43,245,46"  HREF="msia.html"> 
</MAP>