Membuat Rollover Efek Gambar (Perubahan Gambar Pada Mouseover)

Efek Rollover adalah satu di mana gambar web perubahan objek (swap itu sendiri) pada mouse ke obyek web lain (disebut rollovers) dan beralih kembali ke gambar asli pada mouse keluar. Gambar Rollover dimuat ke dalam halaman ketika sedang loading, ini memastikan bahwa rollovers ditampilkan dengan cepat. The onMouseOver dan onMouseOut atribut dari link tag yang digunakan untuk membuat ini fungsional. 

Demo: Tempatkan mouse Anda di atas gambar di bawah ini untuk melihat efek rollover nya 

Membuat Rollover Effect Gambar 

Anda memiliki kode berikut: 

 <a href=" URL ALAMAT "> <img src = "URL PERTAMA IMAGE GOES HERE" onmouseover = "this.src ='URL KEDUA IMAGE GOES HERE'" onmouseout = "this.src = 'URL OF THE IMAGE PERTAMA GOES HERE '"/> </ a>

Ubah teks berwarna seperti berikut: 

1. URL ADDRESS 

Ini adalah alamat di mana seseorang akan dikirim ketika klik pada gambar. 
Misalnya, alamat blog saya: http://www.helplogger.blogspot.com 

2. URL PERTAMA IMAGE GOES HERE 

Ganti teks orange (dua kali) dengan alamat URL gambar yang akan muncul sebelum Anda membawa lebih dariitu. 

3. URL KEDUA IMAGE GOES HERE 
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, akan ke 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 pergi ke New Posting> Beralih ke tab HTML dan kemudian paste kode di kotak kosong. 

Itu saja. Nikmati ;)