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 " - Penulis : Damar Saloka Anggoro - Judul : Membuat Image Rollover ( Berubah ketika Disorot Mouse )

• Berlangganan newsletter Ka Damar Blog Tips dan Anda akan dapat men-download "EBOOK TRIK TIPS BLOGGER" secara gratis
• Anda juga akan menerima Update Artikel terbaru secara otomatis ke Inbox Email Anda.

Nama Kamu*
Email*

Related Post:

Cara Membuat Related Post seperti ini