Contoh mouseover effect dari redup ke lebih terang (diset langsung dalam gambar)
<img src="Url lokasi simpan 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" />
onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" />
Contoh mouseover effect dari terang ke redup (diset langsung dalam gambar)
<img src="Url lokasi simpan 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"/>
onmouseover="this.style.opacity=0.4;this.filters.alpha.opacity=40"
onmouseout="this.style.opacity=1;this.filters.alpha.opacity=100"/>
Mungkin agak ribet juga ya jika setiap image harus diset satu-persatu nilainya propertinya, nah agar setiap postingan rekan langsung memilik efek ini secara otomatis, bisa langsung menambahkan kode CSS ini:
.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}
.post img:hover{opacity:.5;filter:alpha(opacity=100); this.style.opacity=1}
Setahu saya Firefox biasanya menggunakan property opacity:x untuk melakukan tranparancy, berbeda dengan IE yang menggunakan filter:alpha(opacity=x). Pada Firefox opacity:x nilai pada x dapat diisi dengan value antar 0.0 -1.0 sedangkan pada IE filter:alpha(opacity=x) nilai x antara 0-100.
Tidak ada komentar:
Posting Komentar