24 April 2010
Membuat Efek Gambar Dari Mouseover

Assamualaikum , Msue nak kongsi lagi ngan korang sume bagaimana nak buat efek gambar dari mouseover .
CONTOH
Gambar Akan Jadi Terang Apabila Mouse Diletakkan Pada Gambar

<img src="URL IMAGE" style="opacity: 0.4;" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" />
CONTOH
Gambar Akan Jadi Kabur Apabila Mouse Diletakkan Pada Gambar

<img src="URL IMAGE" 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"/>
Jika Mahu Secara Automatik Setiap Gambar Pada Post
1. Login ke Blogspot .
2. Klik Layout - Edit HTML(Tandakan pada Expand Widget)
3. Cari kod di bawah (Gunakan CTRL + F untuk memudahkan korang mencarinya)
.post img{
}
.post img:hover{
}
4. Gantikan dengan kod dibawah
.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}
5. Preview dan Save template
CONTOH
Gambar Akan Jadi Terang Apabila Mouse Diletakkan Pada Gambar

<img src="URL IMAGE" style="opacity: 0.4;" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" />
CONTOH
Gambar Akan Jadi Kabur Apabila Mouse Diletakkan Pada Gambar

<img src="URL IMAGE" 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"/>
Jika Mahu Secara Automatik Setiap Gambar Pada Post
1. Login ke Blogspot .
2. Klik Layout - Edit HTML(Tandakan pada Expand Widget)
3. Cari kod di bawah (Gunakan CTRL + F untuk memudahkan korang mencarinya)
.post img{
}
.post img:hover{
}
4. Gantikan dengan kod dibawah
.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}
5. Preview dan Save template
Tinggalkan Komen Anda Disini