Efek Rollover adalah satu di mana suatu objek perubahan web image (swap itu sendiri) pada mouse ke objek web lain (disebut rollover) dan beralih kembali ke gambar asli pada saat mouse keluar.
Gambar rollover dimuat ke dalam halaman ketika sedang loading, ini memastikan bahwa rollover ditampilkan dengan cepat. The onMouseOver dan onMouseOut adalah atribut dari tag link yang digunakan untuk membuat ini fungsional.
Demo: Tempatkan mouse Anda di atas gambar di bawah ini untuk melihat efek rollover nya
Anda memiliki kode berikut:
<a href="URL ADDRESS"><img src="URL OF THE FIRST IMAGE GOES HERE" onmouseover="this.src='URL OF THE SECOND IMAGE GOES HERE'" onmouseout="this.src='URL OF THE FIRST IMAGE GOES HERE'" /></a>
Mengubah teks berwarna seperti berikut:
1. URL ADDRESS ini adalah alamat di mana seseorang akan dikirim ketika klik pada gambar. Contoh, alamat blog saya: https://duniatutorials.blogspot.com
2. URL OF THE FIRST IMAGE GOES HERE Ganti teks orange (dua kali) dengan alamat URL gambar yang akan muncul sebelum Anda mendekatinya.
3. URL OF THE SECOND 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, tepatnya di Tata Letak > klik Tambah widget (sebelah kanan) > Pilih HTML / JavaScript dari jendela pop-up, kemudian menambahkannya ke sidebar Anda .
Anda juga dapat menambahkan di dalam posting Anda dengan pergi ke New Post> Beralih ke tab HTML dan kemudian paste kode di kotak kosong. itu saja. Nikmati;)
0 komentar