Image Mapping

BY IN HTML Comments Off on Image Mapping

IT’S ALL ABOUT LINK!

Yang dimaksud dengan ImageMap atau Image Mapping adalah membagi sebuah image ke dalam satu atau beberapa region, yang biasanya region tersebut dapat dijadikan link untuk berpindah ke halaman ataupun situs tertentu.
Jika pada saat browsing, kita pernah melihat sebuah gambar yang besar dan sebagian region dari gambar tersebut bisa kita klik untuk berpindah ke halaman lainnya, maka situs tersebut menggunakan teknik Image Mapping untuk mengatur linknya.

Kelebihan Image Mapping:
* Posisi link tidak terbatas pada posisi koordinat tertentu, sedangkan untuk button ataupun link biasa, posisi link terbatas.
* Link dapat terintegrasi dengan Image sehingga akan kelihatan lebih menarik jika dibandingkan dengan link biasa.

Kekurangan Image Mapping:
* Jika gambar terlalu besar, maka membutuhkan proses download yang memakan waktu, sehingga user tidak akan bisa berpindah ataupun mengakses link sebelum semua gambar ditampilkan.
* Dalam beberapa kasus, user kesulitan untuk menemukan link karena link terintegrasi dengan gambar. Hal ini bisa diatasi dengan cara:
1. Memberikan highlight yang jelas terhadap gambar, bahwa bagian itu adalah link. Contoh: situs Harry Potter menggunakan Image Mapping untuk mengakses user yang akan ke Gryffindor, Hufflepuff, Ravenclaw ataupun Slytherin, digambarkan dengan lambang masing-masing House, sehingga user akan langsung tahu bahwa lambang tersebut sebenarnya adalah link.
2. Memberikan alternatif teks link, jika dalam keadaan image tidak bisa diload secara sempurna, sehingga user tetap bisa mengakses link.

Cari 2 buah website yang menggunakan teknik Image Mapping, lalu analisalah kelebihan dan kekurangannya! Dikumpulkan minggu depan dalam bentuk softcopy!
Isinya sebagai berikut:
* Screenshot dan URL dari website yang dianalisa
* Analisa masing-masing kelebihan dan kekurangannya

Membuat Image Mapping

Untuk membuat Image Map, pertama-tama kita akan sediakan gambarnya dulu, misalnya seperti ini:

Gambar ini nantinya yang akan kita bagi-bagi ke dalam beberapa region untuk menentukan link.

Langkah pertama:
Editlah tag IMG dengan menambahkan property UseMap sbb:
<img src=”images/imagemap.jpg” border=”0″ usemap=”#Map”>

Langkah kedua:
Di dalam tag BODY, kita definisikan Mapping areanya
<map name=”Map” id=”Map”>
<area shape=”rect” coords=”8,10,61,36″ href=”#”>
</map>

Perhatikan yang dicetak tebal, rect adalah singkatan dari rectangular yang artinya kita membuat region dalam bentuk segi empat, lalu urutan angka yang mengikutinya adalah posisi koordinat x1,y1,x2,y2 relatif terhadap image/gambar. Lalu href adalah properti yang dapat diisi dengan URL ataupun halaman dimana kita akan berpindah apabila kita mengklik region ini.

Region Map

Dalam Image Mapping dikenal 3 jenis region map, yaitu:
1. Rectangular
2. Circle
3. Polygon

Contoh penggunaannya:
<map name=”Map” id=”Map”>
<area shape=”rect” coords=”8,10,61,36″ href=”#”>
<area shape=”rect” coords=”108,10,169,36″ href=”#”>
<area shape=”circle” coords=”206,26,26″ href=”#”>
<area shape=”poly” coords=”317,33,353,29,351,13,310,9,283,14,284,29″ href=”#”>
</map>

LATIHAN:
Buatlah sebuah Image Mapping yang mempunyai minimal 4 region, yang masing-masing dilinkan ke situs yang sudah ada di internet, misal yahoo.com

by: Wahyu Kurniawan




Comments are closed.