Cara membuat efek transparan pada gambar

Cara lain untuk memberikan tampilan menarik pada web atau blog diantaranya memberi efek transparan pada gambar. Gambar dengan efek transparan tersebut bisa kita letakkan pada setiap posting artikel, agar pembaca lebih tertarik dengan  adanya gambar tersebut. Atau anda bisa taruh dimana saja sesuai selera anda.
Cara kerjannya adalah ketika pointer mouse kita gerakkan diatas gambar, secara otomatais gambar akan memberi efek transparan. Dan ketika pointer mouse kita gerakkan menjauh dari gambar, secara otomatais akan kembali seperti semula atau tidak transparan. Hal ini karena menggunakan atribut onmouseover dan atribut onmouseout.

Cara buatnya sangat mudah, kita tinggal menyisipkan beberapa kode pada gambar. Silahkan anda perhatikan kode - kode berikut :

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPN2eLyFiVKjHy9_OQJK6KbcIrVACWPMwrgWmFXIOPgv0E6SHCGBSQHh7QIzMqilqrYKe6LWm447PyonfUia6WY87wf2xBH8CT5zwRnTpYCn-leKtK5DG4Xr4yB-HZt2V82TuAJx12OzPo/s200/Efek+transparan.jpg" width="200" height="200"
onmouseout="this.style.opacity=1; this.filters.alpha.opacity=100"
onmouseover="this.style.opacity=0.4; this.filters.alpha.opacity=40"/>

Catatan :
- Ganti ULR gambar dengan milik anda.

- Semakin kecil nilai opacity, maka efek transparan akan semakin buram.
- Kode sintaks yang berwarna merah untuk browser Firefox.
- Kode sintaks yang berwarna Biru untuk browser IE.
- Jadi lebih baik dua - duanya kita pasang.

Kemudian bila anda ingin memberi Link pada gambar tersebut, kita tinggal menambah HTML Link sehingga menjadi seperti kode berikut :

<a href="http://tutorialbloggermasnoer.blogspot.com/2011/05/cara-membuat-efek-transparan-pada.html" target="_blank">

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPN2eLyFiVKjHy9_OQJK6KbcIrVACWPMwrgWmFXIOPgv0E6SHCGBSQHh7QIzMqilqrYKe6LWm447PyonfUia6WY87wf2xBH8CT5zwRnTpYCn-leKtK5DG4Xr4yB-HZt2V82TuAJx12OzPo/s200/Efek+transparan.jpg" width="200" height="200"
onmouseout="this.style.opacity=1; this.filters.alpha.opacity=100"
onmouseover="this.style.opacity=0.4; this.filters.alpha.opacity=40"/></a>

Berikut contoh gambar hasil dari kode diatas :

Nah...., mudahkan....?
Ok...., Selamat mencoba dan Semoga bermanfaat....
Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda masukkan email pada forum Langganan Via Email yang ada disebelah kanan halaman ini.
Jangan lupa luangkan waktu untuk beri komentar ya......terima kasih.