PELAJARAN KE 9

Menjalankan Link
Gambar ‘Client-Side’

Link Gambar adalah gambar yang yang mengizinkan pengguna untuk membuat Link
kepada dokumen-dokumen yang berbeda dengan mengklik pada bagian-bagian
tertentu gambar tersebut. Gambar peta yang konvensional yang dipanggil Gambar
`server-side'. Prosesnya adalah seperti berikut:-

1. Apabila seseorang Netter mengklik di atas imej, browser and membawa satu
permintaan kepada server, memohon alamat dokumen yang dikaitkan dengan
daerah/kawasan yang diklik itu.
2. Server itu kemudiannya membawa isi yang diminta itu.
3. Browser kemudian membawa kepada server permintaan terhadap dokumen
yang baru.

Dengan menggunakan peta Gambar `client-side', kesemua Link peta boleh

ditentukan pada file HTML yang mengandung Gambar tersebut. Terdapat beberapa
kelebihan menggunakan cara ini.

 Bilangan masukan (hits) ke server dikurangkan, dan Link disempurnakan

dengan lebih cepat.
 Link-Link tujuan boleh ditunjukkan sewaktu Netter menggerakan kursor di
atas peta.
 Peta-peta Gambar boleh dibuat dan diuji di komputer sendiri, tanpa
memerlukan server.
 Peta-peta gambar boleh dibuat menggunakan protokol-protokol selain dari
HTTP; peta-peta gambar yang konvensional hanya boleh bertindak dengan
protokol HTTP.
 Peta-peta Gamabr tidak bergantung kepada server, justru itu menjadikannya
mudah-.

membuat sebuah peta Gambar `client side'.

Sebagai satu contoh, langkah-langkah berikut akan menunjukkan bagaimana satu

palang navigasi yang disimpan dengan nama imej.gif boleh digunakan sebagai peta
Gambar `client-side'. Setiap tombol akan dipetakan kepada beberapa dokumen yang
berbeda.

Untuk Membuat peta `client-side':

1. Masukkan satu Gambar di dalam dokumen HTML anda.

44
 <IMG SRC="imej.gif">
2. Tambahkan parameter USEMAP kepada elemen IMG.

Parameter USEMAP menetapkan nama bagi definisi peta yang dihubungkan

dengan gambar. Untuk contoh ini definisi peta dinamakan sebagai demo.
Juster definisi peta adalah di dalam file yang sama, nama file 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 gambar. Kebanyakan
penyunting grafik contohnya, Paintshop Pro dan CorelPaint boleh digunakan
untuk menunjukkan kedudukan kordinat pixel ini.

4. Membuat 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 tombol sebelum ini kepada satu dokumen
yang bernama homepage.html. Sementara butang selepas ini akan memetakan
kepada dokumen yang bernama istilah.html.

Berikut ialah contoh yang lengkap:

sedikit saja saja meouse digerakkan ke atas kawasan peta, URL dokumen
yang dihubungkan dengan kawasan tersebut akan tertera di status bar browser
anda. Tindaklanjut yang terlihat ini membolehkan para netter mengetahui
kawasan manakah yang telah dipetakan dan dokumen apakah yang akan
dihubungkan.

gambar peta `server-side' tidak dapat menunjukkan isi dari web kerana
URLnya terletak di server dan tidak mungkin diketahu kecuali setelah imej
itu diklickan.

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.

45
<MAP NAME="nama">
<AREA SHAPE="bentuk" COORDS="kordinat pixel" HREF="URL">
</MAP>
Syntaxnya:
<AREA SHAPE=CIRCLE COORDS = "center-x , center-y , radius-x" HREF =
"URL" >
Menentukan kawasan bulat yang didefinasikan oleh kordinat pixel titik tengah
bulatan tersebut dan diikuti dengan jari-jarinya dalam ukuran pixel.
<AREA SHAPE=POLY COORDS = "x1,y1 , x2,y2 , x3,y3 , ..." HREF = "URL"
>
Satu kawasan yang tidak tentu bentuknya didefinasikan dengan beberapa
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 sudut
atas sebelah kiri dan sudut bawah sebelah kanan.

Mendefinasikan Kawasan Yang Bertindah

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

Jika dua atau lebih kawasan bertumpuk, kawasan yang didefinasikan lebih awal di
dalam peta imej akan dihubungkan. Contohnya di dalam pembuatan grafik di atas
kawasan hijau lebih awal dibuat 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>

46