> Cara membuat efek transparan pada gambar

Minggu, 01 Mei 2011

2

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://lh4.googleusercontent.com/-cHzRwhlm-F0/Tb4UlQCwMaI/AAAAAAAAAqY/2IzJEQMlKoc/s200/Efek%2Btransparan.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://lh4.googleusercontent.com/-cHzRwhlm-F0/Tb4UlQCwMaI/AAAAAAAAAqY/2IzJEQMlKoc/s200/Efek%2Btransparan.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.
Ping your blog, website, or RSS feed for Free



Informasi Artikel :
Judul : "Cara membuat efek transparan pada gambar"
Diulas Oleh : | Minggu, 01 Mei 2011 | 19.26
Description : Cara lain untuk memberikan tampilan menarik pada web atau blog diantaranya memberi efek transpar...

Rating : 6.4 Dari 10, Berdasarkan 200+ Dari 2 000+ Pengunjung.



2 komentar:

BLOGGER

TUTORIAL BLOGGER

TUTORIAL BLOGGER

REKOMENDASI

REKOMENDASI


Artikel Terbaru

POST POPULER

Entri Populer


DAFTAR ISI

DAFTAR ISI


BLOGGER

HTML

CSS

JAVASCRIPT


BACKLINK

INFO

Bagi anda yang berminat tukar link, silahkan copy linknya lalu pasang di Blog anda. Dan bila sudah terpasang, jangan lupa beritahu saya, agar link anda segera saya pasang di Blog tercinta ini.
Salam sukses selalu buat kita semua..... Amiiin.

CEO,
www.carabuatwebgratis.com
Noer cholis
Plosokuning V, Minomartani,
Ngaglik, Sleman, Yogyakarta.

TUKAR LINK

TUKAR LINK






Baca artikel "Manfaat Tukar Link"

CHAT

CHAT



TESTIMONI

Bila anda merasa artikel ataupun tutorial yang ada di Blog ini bermanfaat, anda bisa berikan suport comment melalui form ini. Form ini sangat bagus sebagai BACKLINK buat blog anda, silahkan tinggalkan link anda....

RECENT COMMENT

Ada kesalahan di dalam gadget ini

top down