Draw On It
Gambar atau image ternyata tak cuma bisa diberi 1 link, tapi bisa lebih dari satu link. Bahkan sebagai bonusnya kita bisa membuat link dengan bentuk kotak, lingkaran, ataupun berbentuk poligonaL. MisaLnya saja gambar di bawah ini, gambar tersebut berukuran 450 x 450 pixeL, sengaja saya beri tambahan beberapa bentuk dua dimensi untuk memudahkan sahabat menemukan link yang saya buat.
Penambahan link pada gambar dengan cara seperti ini memang agak rumit dan membutuhkan sedikit perhitungan. Saat menambahkan gambar pada haLaman bLog, kita tinggaL menambahkan code berikut:
<img src="gambar.jpg" alt="ini gambar" width="450" height="450" border="0" usemap="#linkbanyak"/>
<map name="linkbanyak">
<area shape="rect" coords="35,50,185,150" href="#linkdisini" alt="kotak" />
<area shape="poly" coords="200,166,312,154,272,254,255,234,175,297,139,254,216,190" href="#linkdisini" alt="panah" />
<area shape="circle" coords="350,350,50" href="#linkdisini" alt="lingkaran" />
</map>
shape: adaLah bentuk link yang akan digunakan sebagai link, bisa berupa kotak (rect), lingkaran (circLe) atau poligonaL (poLy). Sedangkan isi dari tag coords daLam satuan pixeL pada masing-masing shape itu kira-kira seperti ini:
rect : coords="x1,y1,x2,y2", dimana x1,y1 adaLah koordinat titik pojok kiri atas dan x2,y2 adaLah koordinat titik pojok kanan bawah.
circle : coords="x1,y1,x2,y2,x3,y3,…,xn,yn", dimana x1,y1 adaLah koordinat titik awaL shape dan xn,yn adaLah koordinat titik akhir shape.
poly : coords="x1,y1,r", dimana x1,y1 adaLah koordinat titik tengah lingkaran dan r adaLah panjang jari-jari lingkaran.
wah, komenku kok ilang, mas hari, hehe …. pingin praktik juga nih cara memodifikasi image seperti ini.
kalau masalah kode-kodean seperti ini saya lom begitu ngeh mas
Keren mas mulya.
Kalau di html atau di dreamweaver kita kenal dengan istilah image map ya mas.
kita memang harus bisa menentukan koordinat x,y, atau z atau r dll sebagainya
mantap mas atas tutornya
terus berbagi ya
makasihh infona mas hari
ternyata satu gambar bisa dimasukin bbeberapa link yaw hehe,, saya save kode html na yaw untuk trial
berkunjung dan ditunggu kunjungan baliknya he
salam blogger
makasih
😀
Hmmm, masih ada aroma belum mandi niyh.. **diaahhhh, suruh Hari mandi..!**
seandainya bundo ngerti cara bikin image mape ini dari kemarin, tentu dengan mudah hari bisa menemukan bundo.
Saya juga mau di image map sama bundo, wakakakaka, kapan masang Map di medan Bundo. Kan Deket 😀
keren mas infonya
salam
wah terimakasih banyak mas karena sudah mau berbagi ilmu…
ufhhhh 😀
walah…makin keren, makin ketinggalan aja,nih