Sebelum anda melihat Tips dan Trik HTML,Pastikan untuk mengetahui tips tentang link dan gambar.lihatlah gambar berikut :
Itu salah satu gambar (logo Google). Namun, coba klik pada bagian yang berbeda dari gambar. Ini membawa Anda ke halaman web yang berbeda. Kode di bawah ini membuat ujung HTML:
<Img src = "http://www.google.com/images/logo.gif"
usemap = # GoogleImageMap>
<map name=GoogleImageMap> <area shape=rect coords=0,0,68,109 href="http://en.wikipedia.org/wiki/G">
<area shape=rect coords=68,0,161,109 href="http://en.wikipedia.org/wiki/O">
<area shape=rect coords=161,0,201,109 href="http://en.wikipedia.org/wiki/G">
<area shape=rect coords=201,0,227,109 href="http://en.wikipedia.org/wiki/L">
<area shape=rect coords=227,0,275,109 href="http://en.wikipedia.org/wiki/E">
</ Peta>
Menyisipkan baris pertama gambar, yang disebut logo.gif. Usemap = # GoogleImageMap menyebut daerah diklik GoogleImageMap. Anda dapat mengubah nama GoogleImageMap ke nama lain yang Anda inginkan, seperti GoogleLetters. Kemudian, Anda memiliki 'Peta Gambar':
<map name= GoogleImageMap>
<area shape=rect coords= 0,0,68,109 href="http://en.wikipedia.org/wiki/G">
<area shape=rect coords= 68,0,161,109 href="http://en.wikipedia.org/wiki/O">
<area shape=rect coords= 161,0,201,109 href="http://en.wikipedia.org/wiki/G">
<area shape=rect coords= 201,0,227,109 href="http://en.wikipedia.org/wiki/L">
<area shape=rect coords=227,0,275,109 href="http://en.wikipedia.org/wiki/E">
</ Peta>
Pastikan Anda mengubah GoogleImageMap dengan nama peta gambar Anda. Angka-angka dalam huruf miring berdiri untuk, kanan atas, tepi kiri dan bawah masing-masing daerah persegi panjang yang dapat diklik. Surat E, misalnya, memiliki 227 sebagai tepi kanan, 0 sebagai tepi atas, 275 sebagai tepi kiri dan 109 sebagai tepi bawah. Untuk menemukan koordinat persegi panjang dapat diklik di gambar apapun, Anda dapat menyalin dan menyisipkan gambar ke Paint. (Lihat Catatan di bawah ini untuk mengetahui bagaimana untuk mengetahui angka.) The href = "http:// ..." memberitahu yang halaman web penonton akan pergi ketika ia / dia mengklik persegi panjang.
Coba klik di mana-mana di sekitar E. Anda akan melihat bahwa dalam persegi panjang yang didefinisikan oleh koordinat 227,0,275,109 pergi ke http://en.wikipedia.org/wiki/E .
<Img src = "http://www.google.com/images/logo.gif"
usemap = # SecondGoogleImageMap>
<map name=SecondGoogleImageMap> <area shape=rect coords=0,0,68,109 href="http://en.wikipedia.org/wiki/G">
<area shape=rect coords=201,0,275,109 href="http://en.wikipedia.org/wiki/Le">
</ Peta>
Di atas saya telah dihapus persegi panjang untuk O, G, L, E, tetapi menambahkan persegi panjang untuk Le. Berikut adalah hasilnya:
Tips dan trik dapat menambahkan beberapa sentuhan dari proffesionalism ke gambar pada halaman web Anda! Ingatlah untuk memeriksa beberapa tips lain dalam situs web!
CATATAN: Untuk mengetahui nomor sebelah coords yang mendefinisikan persegi panjang, copy dan paste gambar ke Paint. Gerakkan mouse Anda di gambar dan melihat sudut kiri bawah Paint. Anda akan melihat dua nomor (misalnya, 47,56). 47 menunjukkan seberapa jauh meninggalkan mouse anda, dan 56 menunjukkan bagaimana untuk turun mouse anda. Untuk mengetahui dua nomor pertama yang perlu Anda menempatkan sebelah coords =, gerakkan mouse Anda ke kiri atas persegi panjang yang Anda inginkan, kemudian melihat dua angka di sudut. Untuk mengetahui dua nomor terakhir, gerakkan mouse Anda ke kanan bawah persegi panjang, kemudian melihat dua angka di sudut.
Sekian dari saya......Semoga Artikel ini bermanfaat untuk sobat blogger
