HTML – Peta Imej

HTML – Peta Imej

Peta imej adalah tag HTML <map> yang berfungsi menjadikan sebahagian kawasan daripada gambar sebagai pautan (link). Sebagai contoh, peta imej boleh digunakan di gambar peta, di mana apabila pengguna klik pada kawasan tertentu, pelayar (browser) akan memaparkan maklumat ataupun membawa ke alamat (address) yang lain.

Peta imej boleh dibahagikan kepada dua iaitu, sebelah klien (client side) dan sebelah pelayan (server side).

Peta Imej Sebelah Klien dan Sebelah Pelayan

Peta Imej Sebelah Pelayan

Peta imej sebelah pelayan membolehkan pelayar menghantar maklumat koordinat kepada pelayan apabila pengguna klik pada kawasan di gambar. Pelayar akan meminta (request) pada pautan yang diberi dan menambah kedudukan koordinat ‘?x,y’ di penghujung pautan. Sebagai contoh:

<a href=’about.html’><img src=’image.jpg’ ismap/></a>

Apabila pengguna klik pada gambar, koordinat x dan y akan ditambah di URL , ‘about.html?3,9’.

Peta Imej Sebelah Klien

Peta imej sebelah klien dilihat lebih popular berbanding di sebelah pelayan. Ianya memboleh anda menentukan senarai pautan untuk digunakan disesuatu kawasan gambar. Ini memberikan kelebihan kepada anda, untuk terus melihat kawasan yang mempunyai pautan. 

Sekarang, untuk melihat lebih jelas, mari kita lihat tutorial ringkas cara menggunakan peta imej sebelah klien.

Tutorial Ringkas Peta Imej Sebelah Klien

Secara amnya, peta imej sebelah klien terbahagi kepada dua iaitu :

1. Gambar asal, dengan menggunakan tag <img> bersama ciri (attribute) usemap.
2. Elemen <map> dan di dalamnya terdapat elemen <area> yang ditentukan sebagai kawasan boleh diklik. Ciri title boleh digunakan sebagai tooltip apabila anda menggerakkan anak panah tetikus ke kawasan boleh diklik. Selain itu, anda juga disarankan menyediakan alt. 

Di dalam elemen <area> terdapat 3 bentuk <shape> yang biasa digunakan iaitu:

• Rectangle: <shape=”rect”> , tentukan empat koordinat.
• Polygon: <shape=”poly”>, tentukan sebanyak mana koordinat yang anda mahu.
• Circle: <shape=”circle”>, tentukan satu koordinat dan radius.

Bagaimana hendak mendapatkan koordinat?

Anda boleh mendapatkan koordinat dengan menggunakan apa sahaja image editor, contoh yang paling mudah, menggunakan aplikasi Paint. Gerakkan penunjuk tetikus anda ke point bentuk yang anda pilih. Seperti contoh dibawah, penunjuk tetikus diletakkan di kedudukan kiri dan atas segi empat dan koordinatnya adalah 42,38. 

Untuk mendapatkan koordinat ‘Circle’ anda hendaklah, mendapatkant titik tengah bagi bulatan beserta radius. Sebagai contoh, koordinat bagi titik tengah bulatan pada gambar di bawah adalah, 390162 dan radiusnya 76.

Kod yang lengkap untuk tutorial ini adalah seperti contoh di bawah:

<img src="http://i.imgur.com/Aw4Nx25.jpg?1" alt="Website map" usemap="#mapname" /> <map name="mapname">   <area shape="rect" coords="42,38,252,152" href="#" alt="rectangle" title="this is rectangle" />   <area shape="poly" coords="123,198,219,219,265,255,222,300,130,312,56,279,55,230" href="#" alt="polygon" title="this is polygon" />   <area shape="circle" coords="390,162,76" href="#" alt="circle" title="this is circle" /> </map>

Apabila anda sudah memahami cara menggunakan tag peta imej dengan betul, seterusnya anda boleh menjimatkan masa anda dengan menggunakan perisian seperti Adobe Dreamweaver yang mampu menghasilkan terus peta imej ini tanpa perlu menggunakan cara manual mencari koordinat.

Sekiranya anda berminat untuk mempelajari mengenai HTML dengan lebih lanjut, pihak Two Sigma Technologies menyediakan kursus-kursus berkaitan HTML seperti Introduction To Development Using HTML5, CSS3 and JQuery. Anda boleh hubungi kami untuk mendapatkan kandungan kursus atau keterangan lebih lanjut di talian 03-61880601 ataupun menerusi email sales@2-sigma.com. Selain itu, anda juga boleh melawati http://www.training.2-sigma.com untuk mendapatkan tarikh-tarikh kursus terdekat.