Efek Rollover adalah di mana gambar web mengalami perubahan objek (swap ) ketika mouse diarahkan ke area obyek web lain (disebut rollovers) dan beralih kembali ke gambar asli ketika mouse keluar. Gambar Rollover dimuat ke dalam halaman ketika sedang loading, ini memastikan bahwa rollovers ditampilkan dengan cepat. onMouseOver dan onMouseOut atribut dari link tag yang digunakan untuk membuat fungsional Rollover ini.
Demo: Tempatkan mouse Anda di atas gambar di bawah ini untuk melihat efek rollover nya
Membuat Rollover Effect Gambar.
Code:
<a href="ALAMAT URL"><img src="ALAMAT GAMBAR PERTAMA" onmouseover="this.src='ALAMAT GAMBAR KEDUA'" onmouseout="this.src='ALAMAT GAMBAR PERTAMA'" /></a>
Ubah teks berwarna seperti berikut:
1. ALAMAT URL
Ini adalah alamat di mana Link akan diarahkan.
Misalnya, alamat blog saya: http://tarutung-news.blogspot.com
2. ALAMAT GAMBAR PERTAMA
Ganti teks orange (Kedua) dengan alamat URL gambar yang akan muncul sebelum Mouse di letakkan diatas
3. ALAMAT GAMBAR KEDUA
Ganti teks warna biru dengan url gambar yang akan muncul ketika kursor melayang di atasnya.
Sekarang Anda dapat menyisipkan gambar Anda di dalam gadget blog, Layout> klik Tambah link
Gadget (sebelah kanan)> Pilih HTML / JavaScript dari jendela pop-up, kemudian menambahkannya ke sidebar Anda.
Anda juga dapat menambahkannya ke dalam posting Anda dengan New Posting> Beralih ke tab HTML dan kemudian paste kode di kotak kosong.
Itu saja. Selamat Mencoba;)
