Image-map, Clickable area

Pendahuluan

Tag image adalah tag pada HTML yang memfasilitasi tampilan image atau gambar pada halaman web. Berikut contohnya:

<img src="smiley.gif" alt="Smiley face" height="42" width="42">

src, alt, height, width disebut attribute, yaitu kata yang mewakili sifat gambar. Misalnya src mewakili alamat gambar, alt mewakili alternatif teks jika gambar tidak berhasil di-load, height dan width masing-masing tinggi dan lebar gambar dalam satuan pixel. Attribute yang akan saya jelaskan adalah usemap.

usemap="#mapname"

usemap adalah attribute pemetaan gambar dengan koordinat axis dan ordinal (x,y) serta radian (r). Berikut contohnya:

Penjelasan:
perhatikan bagian dengan bentuk umum <area coords="value">. Berikut penjelasan nilai/value coords:

• x1,y1,x2,y2 : Specifies the coordinates of the left, top, right, bottom corner of the rectangle (for shape="rect").
• x,y,radian : Specifies the coordinates of the circle center and the radius (for shape="circle").
• x1,y1,x2,y2,..,xn,yn : Specifies the coordinates of the edges of the polygon. If the first and last coordinate pairs are not the same, the browser will add the last coordinate pair to close the polygon (for shape="poly")

Sumber: http://www.w3schools.com/tags/att_area_coords.asp

Sejauh ini kita telah memahami attribute usemap beserta valuenya (x1,y1,x2,y2 untuk rect). Jika masih bingung jangan kawatir. Berikut ini penerapan attribute usemap yaitu membuat header pada situs layanan blog; https://www.blogger.com .

Membuat header blog lebih interaktif.

Freeware yang dibutuhkan: Handy Image Mapper. Handy Image Mapper digunakan untuk mengetahui koordinat gambar.

Header yang akan kita buat sama seperti header blog ini (lihat atas)*. Agar mempermudah kita gunakan gambar yang sama. Akan dibuat link halaman Facebook pada 3 area gambar yaitu area wajah 1, wajah 2, dan wajah 3 (boneka). Berikut langkah-langkahnya:

1. Download dan instal Handy Image Mapper. 

2. Sediakan gambar yang akan digunakan sebagai latar header. Misalnya : http://i.imgur.com/YXnoiyy.png

*Pastikan ukuran lebar dan panjang sesuai dengan halaman blog. Untuk contoh gambar digunakan lebar/width = 1010 px dan tinggi/height = 300 px.
*saya lebih suka menyimpan gambar di http://imgur.com/. Untuk memperoleh link pilih Direct Link.

3. Login Blogger. Klik Layout > Add A Gadget > HTML/JavaScript.

4. Masukkan code "dasar" berikut :

<image src="http://i.imgur.com/YXnoiyy.png" width="1010" heigth="300" alt="header" usemap="#headermap"> <map name="headermap"> <area shape="rect" coords="30,30,267,265" alt="ogi" href="https://www.facebook.com/ogiyoga" /> <area shape="rect" coords="298,38,533,268" alt="vivi" href="https://www.facebook.com/viviane.annisa" /> <area shape="rect" coords="559,34,787,268" alt="bayyi" href="https://www.facebook.com/bayyi.yippy" /> </map> </image>

yang akan diubah (disesuaikan dengan kebutuhan anda) adalah,

• Alamat atau source gambar pada src="http://i.imgur.com/YXnoiyy.png". Ganti http://i.imgur.com/YXnoiyy.png dengan alamat gambar anda. Pastikan anda mengetahui width dan height gambar tersebut.

• Nilai dari width dan heigth. Ganti 1010 dan 300 masing-masing dengan ukuran width dan height gambar anda (dalam pixel/px).

• coords="30,30,267,265". Koordinat gambar dapat diperoleh dengan menggunakan Handy Image Mapper. Berikut caranya:

• Tampilan awal Handy Image Mapper

• Klik icon Open untuk membuka gambar.
• Klik tombol seleksi kotak jika area yang ingin kita buat adalah rect (ingat! ada area circle dan rect. Lihat penjelasan di awal). Lakukan seleksi gambar seperti yang terlihat pada ilustrasi berikut.

Dari langkah ini kita memperoleh koordinat x2 dan y2 yaitu 271,273. Pada coords="30,30,267,265" x2 dan y2 adalah 267 dan 265. Nilai x1 dan y1 dapat diperoleh dengan mengarahkan kursor pada bagian pojok kiri atas bagian yang terseleksi.

Lihat nilainya pada koordinat bawah aplikasi (pada ilustrasi 28,30).

Jadi diperoleh koordinat area pertama x1,y1,x2,y2 = 28,30,271,273.

*Jika anda dapat melakukan langkah ini maka andapun bisa melakukannya untuk area circle.

• Alamat pada href="https://www.facebook.com/ogiyoga". Alamat ini akan dibuka jika area gambar di klik. Ganti link tersebut dengan link yang anda inginkan.

5. Simpan Gadget tsb. Letakkan di atas layout blog. Simpan pengaturan. Selesai! :D

Baca lebih lanjut:

http://www.w3schools.com/tags/tag_img.asp

Jika ada pertanyaan silahkan komen. 

Selamat mencoba!