Cara Membuat Efek Rollover Gambar (Perubahan Saat Mouseover).
Efek Rollover merupakan salah satu efek yang menarik karena efek tersebuat akan membuat sebuah gambar berubah dari gambar sebelumnya ketika mouse di arahkan pada gambar tersebut dan kembali ke gambar asli saat mouse keluar dari gambar. Efek ini sangat menarik bagi saya karena dapat menampilkan dua gambar dengan tempat yang sama sehingga menghemat ruang untuk manambahkan tulisan atau gambar yang lain. Dengan
Efek Rollover pada gambar ini juga dapat menarik perhatian seorang pengunjung pada website atau blog kita untuk mengetahui gambar apakah yang akan keluar ketika mouse di arahkan pada gambar tersebut. Efek Rollover pada gambar sangat mudah di buat anda hanya membutuhkan dua gambar yang berbeda dan menambahkan satu baris kode
HTML yang akan menjalankan efek tersebuat saat
Mouseover.
Contoh Efek Rollover Gambar:
Langkah-langkah Membuat Efek Rollover Gambar:
-
Upload dua gambar yang berbeda dan simpan URL alamanya
-
Masuklah pada halaman Kode HTML
-
Siapkan URL yang di arahkan ketika gambar tersebut di klik
-
Masukan kode dibawah ini
<a href="URL BLOG ANDA"><img src="URL GAMBAR PERTAMA" onmouseover="this.src='URL GAMBAR KEDUA'" onmouseout="this.src='URL GAMBAR PERTAMA'" /></a>
-
Contoh bila kode di isi
<a href="http://berbagi-tips-tutorial.blogspot.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyUu53ZTG2Lr_XuTzhqa2nH4ZP2GY96jzYbzqamirkTaJZfzFoJmu7pUzvZRTkfxxAMGT-kMlFO9Sw0CGEysiakYq9jtpiI-XTH6B4a2HAbZRxPv-l84hpK_CGe8omdZcSHDiAEYlYy5z7/s1600/Efek+Rollover+Gambar+1.jpg" onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAKk6gRMJJAqJxDvYd570482cKxAWhV8q6-U1-0K_eKHwVWcAlRC2skQy8q636PX_q7nYr0mAtNShfMJS9FLa9RHKDqrY3RpYD9uSvJfI5w7nTKZ-A52JSGhweWvTCB2yUPht_RQqMtFyB/s1600/Efek+Rollover+Gambar+2.jpg'" onmouseout="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyUu53ZTG2Lr_XuTzhqa2nH4ZP2GY96jzYbzqamirkTaJZfzFoJmu7pUzvZRTkfxxAMGT-kMlFO9Sw0CGEysiakYq9jtpiI-XTH6B4a2HAbZRxPv-l84hpK_CGe8omdZcSHDiAEYlYy5z7/s1600/Efek+Rollover+Gambar+1.jpg'" /></a>
- Hasilnya bisa anda lihat seperti di atas
Demikian tutorial Cara Membuat Efek Rollover Gambar (Perubahan Saat Mouseover) semoga bermanfaat ^_^
