Usemap Attribute

Usemap attribute adalah salah satu attribute css yang digunakan dalam tag img. Sekalipun jarang digunakan oleh blogger, attribute usemap dapat digunakan untuk beberapa keperluan khusus seperti misalnya memberikan keterangan pada titik-titik tertentu di senuah gambar/image, baik dalam bentuk image ataupun teks. Usemap juga bisa digunakan untuk menempatkan sebuah link. Pada penerapan yang berbeda, attribute usemap bisa juga digunakan untuk membuat daftar menu/cloud. Penggunaan usemap akan banyak ditemukan pada image yang digunakan sebagai peta/map, diamana setiap titik ditentukan melalui koordinat.

Attribute usemap dalam tag img

<img src="https://lh5.googleusercontent.com/-5a4cgv-EJyQ/UCphCRalnvI/AAAAAAAAAIY/neuY7LMXEoY/h250/romantic_moon.jpg" width="333" height="250"  style="margin:20px;background:red;padding:10px;border:3px solid #eee;box-shadow:-2px -2px 2px #555, 4px 4px 4px #111;" alt="Indahnya cinta dua sejoli" usemap="#darling" />

<map name="darling">
<area shape="circle" coords="86,94,63" alt="cinta mati" href="http://gubhugreyot-demo-tutorial-blogger-2.blogspot.com" target="_blank" title="Rembulan bersinar temaram... tersenyum melihat 2 anak manusia memadu kasih ... menyangsikan cinta ... dan menggombal ke pasangannya. Hiiii ... lucu liat tingkah dewa-dewi mabuk asmara..." />

<area shape="rect" coords="195,178,205,250" alt="nafsu monyet" href="http://bestbloggermenus.blogspot.com" target="_blank" title="Belahlah dadaku, say... maka kau tak akan lagi banyak cing-cong!" />

<area shape="rect" coords="176,185,190,250" alt="Sundongyang" href="http://gubhugreyot.blogspot.com" target="_blank" title="Tapi mengapa selama ini engkau tak pernah lagi menciumku?" />
</map>
Keterangan:
  • <map name="darling"> berdasarkan attribute usemap="#darling"
  • shape="circle" coords="86,94,63"
    shape="circle" circle = object berupa lingkaran
    coords="86,94,63" 86 (86px from left), 94 (94px from top), 63 (63px jari2 lingkaran object).
  • shape="rect" coords="195,178,205,250"
    shape="rect" rect = object berupa empat persegi panjang
    coords="195,178,205,250" 195 (195px from left - untuk batas sisi kiri), 178 (178px from top - untuk batas sisi atas), 205 (205px from left - untuk batas sisi kanan), 250 (250px from top - untuk batas sisi bawah).
Di bawah ini telah disertakan demo tag img dengan attribute usemap. Klik button preview (besar atau kecil) kemudian arahkan cursor di atas gambar rembulan, kepala wanita, kepala pria, badan wanita dan pria.
Please click the button to display. Continue with editing code and click to see the results!

Tidak ada komentar:

Posting Komentar

My ProfileC l o s e

FollowerC l o s e