ngetag photo di blog

ide nya gua dapet dari fb, trus nemu cara nya di w3schools.

contoh nya kaya gini




jika cursor mouse berhenti / menunjuk kearah me, maka akan keluar title it's me dan apabila di klik akan kembali ke home (link nya gua buat alamat blog gua).
jika cursor mouse nya diam / mengarah pada kepala si mr.z, maka title akan memunculkan kata mr.z was here!, dan jika di pencet akan mengarah ke google dgn hasil pencarian mr.z (url nya gua direct ke sana).
sebalik nya, jika cursor mouse tidak diarahkan pada me dan si mr.z tetapi kepada mr.nulls, maka kata2 yg keluar ialah me and mr.z between mr.nulls, apabila di klik tidak akan terjadi reaksi apa2 karna gua ga masangin link buat bagian yg itu. :P

source code nya

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNuniBfFbZsYoGzTAlN0uS-foUvtYZeE14RvlUOOAC6pmjZIrn_1ONCZIhYFBP1jwluTd4HpTzO228H1g1I4jdi-sfNsO8OmVJLAdfN6EC5-xVbM5drf1cRu0pUb08SxKuTttjQwJKuZE/s320/untitled.png" title="me and mr.z between mr.nulls" usemap="#me" /><br /> <map name="me"><br /> <area coords="58,318,57,279,79,199,30,102,62,8,129,29,144,90,169,85,173,144,125,152,112,138,141,302,131,319" href="http://gets-only.blogspot.com" shape="poly" title="it's me"></area><br /> <area coords="304,161,30" href="http://www.google.co.id/search?q=mr.z" shape="circle" title="mr.z was here!"></area><br /> </map>

dari kode di atas ada beberapa tag html yg digunakan, seperti <img>,<map> dan <area>
yg mana pada tag <img> terdapat peintah usemap="nama_map"
pada tag area lah terdapat koordinat, yg mana saja yg mau ditandai.
untuk gambar yg di tag / tandai pertama (me) gua memakai jenis shape poly
yg mana angka2 pada value coords merupakan koordinat2 batas gambar yg mau di tandai
buat nyari titik koordinat nya, bisa memakai program paint atau sejenis nya.
memang agak ribet untuk mencari titik koordinat nya, mungkin saja ada program yg bisa lebih praktis untuk menandai nya, bisa di cari di google tentunya :P
dalam atribut shape terdapat 4 value yg bisa dipilih, default (menentukan dari seluruh wilayah) circle (berbentuk lingkaran), rect (persegi) dan poly (segibanyak)
pada tag ke dua gua coba memakai atribut circle, koordinat nya tdk seribet poly, tapi hanya batas ruang lingkup lingkaran saja.
gambar yg sudah di tag tadi bisa juga di masukan link, dgn atribut href="link".
untuk menampilan kata ketika cursor mouse berhenti, bisa dgn cara menambahkan atribut title="..."

untuk lebih jelas dan lengkap nya silahkan kunjungi w3schools

semoga cara manual ini ada manfaat nya :P