Lukman SCom's - 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 !!


Kode:1

<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" />

Kode:2

<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}

Author: Agung X-Zeg Indraguna
http://agungindraguna.blogspot.com

Posted in: Turoialz Blogz