(Update) Cara Buat Gambar Transparent dengan Mouseover Effect

Salam. Tutorial ni memang dah lama aku cari, baru hari ni terjumpa sebabkan baru nak Google. Cam mana tu. HA HA. Okey, tutorial ni ajar macam mana nak buat efek transparent pada gambar bila mana korang melayangkan mouse pada gambar itu. Nama pon mouseover. Cube korang layang kan mouse korang kat gambar di bawah. Opps, gambar ni Nabilah bagi masa birthday aku. Hihi. Tag kat Facebook. Time kasih Nabilah. :) Kiranya, dengan efek transparent ni, macam magic la. Dari redup ke terang & sebaliknya.

 

 Kod HTML bagi menukar gambar dari redup ke terang :

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

Tukar URL gambar dengan URL gambar korang.

Kod HTML bagi menukar gambar dari terang ke redup :

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

Tukar URL gambar dengan URL gambar korang.

Okey, kod ni guna la kalau nak buat bagi sesetengah gambar sahaja. Di dalam entri atau sidebar korang. Tetapi jika nak semua gambar dalam post korang bertukar, boleh guna kod di bawah.

Kod HTML bagi tukar gambar redup ke terang :

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

 Kod HTML bagi tukar gambar terang ke redup :

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

Okey, bagi kod untuk buat SEMUA gambar dalam post bertukar transparent bila mouseover, copy + paste salah satu kod di atas ni SEBELUM/DI ATAS kod ]]></b:skin>

p/s : Sebelum ni aku tersilap tulis. Aku tulis letak code DI BAWAH ]]></b:skin> tapi sebenarnya SEBELUM/ DI ATAS ]]></b:skin> .Sorry :)

Sumber : Sodiycxacun (Blog Bahasa Indonesia)