Tutorial blog kali ini adalah membuat hover pada gambar atau di sebut juga cara mengatur transparansi gambar pada blog. Fungsi dari Tutorial ini adalah jika cursor mouse menyorot / atau berada pada salah Satu gambar pada blog, maka gambar tersebut akan menyala / buram pada tampilan blog pada postingan.
Coba arahkan kursor / mouse pada gambar maka akan terlihat buram.
Coba arahkan kursor / mouse pada gambar maka akan terlihat buram.
Diatas adalah contohnya.
1. Pilih gambar yang akan digunakan
2. Setelah itu upload ke internet, kalau belum tahu caranya silahkan klik cara-mendapatkan-url-gambar-untuk-blog
3. Setelah di-upload, Anda akan mendapatkan URL gambar tersebut
4. URL gambar tersebut harus Anda sisipi dengan kode berikut ini :
onmouseover="this.style.opacity=0.4;this.filters.alpha.opacity=40"
onmouseout="this.style.opacity=1;this.filters.alpha.opacity=100" style="opacity:1;filter:alpha(opacity=100)"
onmouseout="this.style.opacity=1;this.filters.alpha.opacity=100" style="opacity:1;filter:alpha(opacity=100)"
5. Berikut adalah contoh code untuk dipasang pada postingan, warna merah adalah URL gambar.
<img onmouseover="this.style.opacity=0.4;this.filters.alpha.opacity=40"
onmouseout="this.style.opacity=1;this.filters.alpha.opacity=100" style="opacity:1;filter:alpha(opacity=100)" src="http://dl.dropbox.com/u/62768563/Amelia.jpg"/></a>
onmouseout="this.style.opacity=1;this.filters.alpha.opacity=100" style="opacity:1;filter:alpha(opacity=100)" src="http://dl.dropbox.com/u/62768563/Amelia.jpg"/></a>
6. Selesai...
Tidak ada komentar:
Posting Komentar