Membuat Image Rollover ( Berubah ketika Disorot Mouse )

Kembali lagi untuk berbagi tips. Kali ini tentang Membuat Image Rollover. Image Rollover adalah gambar yang akan Berubah ketika Disorot Mouse .Jadi kesannya seperi animasi. Caranya sangat mudah, tinggal menyiapkan 2 gambar atau foto. 2 foto tersebut harus sama alias berasal dari satu foto, jadi foto yang kedua cuman diedit sedikit. Untuk membuat effek rollover atau animasi saat disorot mouse atau kursor, kita tinggal memasukkan kode - kode saja kok, mudah (^^)


Cara membuat text shadow animation, cara kedua, Macam - macam efek kursor mouse
Permulaan : Siapkan 2 gambar atau foto 

kodenya untuk membuat image rollover adalah :

<style type="text/css">
a.pic .image2{display:none}
a.pic:hover .image1 {display:none}
a.pic:hover .image2 {display:inline}
</style>


<center><a class="pic" href="LINK TUJUAN JIKA GAMBAR DIKLIK">
<img class="image1" src="URL GAMBAR 1" /> 
<img class="image2" src="URL GAMBAR 2" /></a></center>

Kode tersebut bisa dimasukkan ke dalam postingan atau widget. Demikian tutorial singkat tentang " Membuat Image Rollover ( Berubah ketika Disorot Mouse ) " semoga bermanfaat, sekali lagi saya ingin mengucapkan " Selamat hari Raya Idul Fotri 1431 H Mohon Maaf Lahir Batin "