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/AVvXsEgeuQr6NSEh9fAYmz6FpK3LpX24SMGqN1vfhY5l7iGlKoL_M5kZZhQ73s1z7-DaIY2F428Zq5cXNJwTjYGlsjZG_RRkgRoPolj9opQO9SRDiaxqSVAvMAuuD9VAq97xdgAOvoq-s2geND41/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://www.carabuatwebgratis.com/2011/05/cara-membuat-efek-transparan-pada.html" target="_blank">

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeuQr6NSEh9fAYmz6FpK3LpX24SMGqN1vfhY5l7iGlKoL_M5kZZhQ73s1z7-DaIY2F428Zq5cXNJwTjYGlsjZG_RRkgRoPolj9opQO9SRDiaxqSVAvMAuuD9VAq97xdgAOvoq-s2geND41/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.

Judul: Cara membuat efek transparan pada gambar; Ditulis oleh Unknown; Rating Blog: 5 dari 5

Dengan memasukan alamat email dibawah ini, berarti anda akan dapat kiriman artikel terbaru dari Blogger Tutorial | SEO | Free Blogger Templates | OOM RIO.com di inbox anda:

Related Posts

• Cara membuat gambar melayangCara membuat gambar melayang menggunakan properti float, properti float sangat sering digunakan untuk gambar. Dengan Properti float, sebuah gambar bisa dibuat melay ... readmore
• CSS Gradient background GeneratorPada posting sebelumnya saya membahas tenntang CSS3 Generator, dan kali ini saya akan membahas tentang CSS Gradient Background Generator (Warna Gradient) yaitu sebu ... readmore
• Cara buat Fitur Slide AccordionKarya baru lagi saya buat dan kupersembahkan untuk anda yang selalu setia mampir di blog ini.  Widget ini saya beri nama Fitur Slide Accordion. Selain tampilan ... readmore
• Cara membuat textarea dengan tombol "select all"Belajar kali ini adalah bagaimana kita menggunakan Javascript dan Css untuk menambahkan tombol "select all" pada textarea. Sehingga pengunjung lebih mudah untuk men ... readmore
• CSS3 GeneratorSebelum memasuki pembahasan tentang CSS3 Generator, saya akan menjelaskan tentang Apa itu CSS3? mungkin dari kalian ada yang belum mengetahuinya menurut info yang s ... readmore