News Update :

Membuat Mouseover Effect Pada Gambar di Blog

22 April 2010

Bismillah, salam ukhuwah untuk sobat semua, nah untuk kali ini saya mo kasih sedikit pengalaman saya yaitu cara membuat gambar terang dan redup ketika kursor diarahkan di gambar tersebut, cara ini saya dapatkan dari O-om nah langsung aja ke TKP




Cara kerja efek gambar transparan diatas tidak begitu sulit, yang kita perlukan hanya memanfaatkan properti CSS Image Opacity. Namun sebelumnya perlu juga diketahui property CSS opacity sebenarnya tidak termasuk dalam standar CSS, dimana property ini hanya bekerja dengan baik pada beberapa web browser modern saja.

Contoh mouseover effect dari redup ke lebih terang (diset langsung dalam gambar) seperti gambar di bawah ini, coba arahkan kursor ke gambar,langsung aja gak pake' lama :




Giman kelihatan toh giginya..he...he...bagus toh!!!
Mo tau caranya gini, silahkan sobat copas kode dibawah ini setiap sobat menginginkan gambar redup menjadi terang di setiap postingan :
<img src="Silahkan sobat isi dengan alamat 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 mouseover effect dari terang ke redup (diset langsung dalam gambar)




Giman jadi gak klihatan toh giginya...xixixixi...
Kodenya seperti ini :
<img src="Silahkan sobat isi dengan alamat 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"/>


Jika sobat menginginkan setiap postingan langsung memiliki efeks copas kode dibawah ini di CSS dan letak kan diatas ]]></b:skin>
.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}


Gimana Gampang Bukan SELAMAT MENCOBA SEMOGA SOBAT BERHASIL
Share this Article on :

2 komentar:

doel al jazzer mengatakan...

follow suskes sob..http://www.doel-jazzer.co.cc

Kamonesan mengatakan...

Assalamu'alaikum sobat blogwalking nih dan baca2 artikelnya. .

jgn lupa visit dan komentar balik :D

Posting Komentar

Assalamu'alaikum sobat semua...jika sobat sudah mampir di blog saya jangan lupa komentarnya ya,,,mohon saran dan kritiknya, karena setetes komentar anda sangat berarti untuk kemajuan blog ini, Terima kasih semua. SALAM BLOGGER

 

© Copyright Q Ingin Bisa 2010 -2011 | Design by Herdiansyah Hamzah | Published by Borneo Templates | Powered by Blogger.com.