Menambahkan Efek OnMouseOver Transparan Pada Gambar

Menambahkan Efek OnMouseOver Transparan Pada Gambar - Masih mau share tentang OnMouseOver nih . . .
Setelah di postingan kemaren gw share tentang cara Menambahkan Efek OnMouseOver Pada Gambar, kali ini gw mau share lagi tentang cara Menambahkan Efek OnMouseOver Transparan Pada Gambar.

Sepertinya engga perlu banyak basa-basi deh, langsung aja liat contohnya dibawah ini !!

Contoh OnMouseOver 1 ==>


Kode:

<img src="URL gambar" style="opacity:0.4;filter:alpha(opacity=40)"
onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" />

Contoh OnMouseOver 2 ==>


Kode:

<img src="URL gambar" border="1" style="opacity:1;filter:alpha(opacity=100)"
onmouseover="this.style.opacity=0.4;this.filters.alpha.opacity=40"
onmouseout="this.style.opacity=1;this.filters.alpha.opacity=100"/>

Kedua kode di atas hanya berlaku apabila sobat blogger cuma pengen beberapa gambar aja yang diberi Efek OnMouseOver Transparan. Kalo sobat blogger pengen semua gambar yang ada di blog diberi Efek OnMouseOver Transparan, sobat blogger hanya perlu mengedit template dan tambahkan salah satu kode di bawah ini di atas kode ]]></b:skin>

1. Kode untuk contoh OnMouseOver 1:

.post img{opacity:.5;filter:alpha(opacity=100); this.style.opacity=1}
.post img:hover{opacity:1;filter:alpha(opacity=1); this.style.opacity=6}

2. Kode untuk contoh OnMouseOver 2:

.post img{opacity:1;filter:alpha(opacity=1); this.style.opacity=6}
.post img:hover{opacity:.5;filter:alpha(opacity=100); this.style.opacity=1}

---

Related Post on Agung X-Zeg Indraguna's World_

Blog World

• Cara Pasang Energy Saving Mode dengan Gambar
• Menambahkan Efek OnMouseOver Pada Gambar
• Cara Membuat Teks Warna Pelangi (Rainbow Text)
• Cara Pasang Navigasi Breadcumb di Blogger
• Cara Mengganti dan Menampilkan Favicon Blog di Semua Browser
• Menambahkan Emoticon Pada Shoutmix
• Cara Membuat Komentar Pemilik Blog Berbeda Dengan Pengunjung
• Membuat Spoiler di Blog
• Membuat Gambar Melayang di Blog
• Cara Pasang AddThis Share Button di Blog
• Membuat Text Area di Blog
• Cara Pasang Kode Warna HTML (HTML Color Code) di Blog
• Menambahkan Pesan di Bawah Posting Blog
• Link Otomatis Terbuka Tanpa di Klik
• Menampilakan Avatar Komentator
• Link Bergerak Saat Disorot Mouse
• Cara Membuat Buku Tamu Tersembunyi
• Daftar Website/Blog di Google, Yahoo dan Search Engine Lainnya
• Cara Membuat Form Untuk Banner Exchange
• Menambahkan Energi Saving Mode di Blog
• Menambahkan Scroll Button di Arsip Blog
• Auto-Hide Navigation Bar
• Membuat Efek Link Warna Pelangi
• Menghilangkan Navigation Bar di Blog