Cara Membuat gambar Transparan Disentuh Mouse

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ اارَّحِيم

Posted by Unknown Sabtu, 19 Januari 2013 0 komentar
Cara Membuat gambar Transparan Disentuh Mouse
Trik bikin blog dengan 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 membikinnya sangat mudah, kita tinggal menyisipkan beberapa kode pada gambar. Silahkan anda perhatikan kode - kode berikut :

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVy6FnhO33jObY5OdFaDTR5xkkDs9kRww0-xCJDgsaOLCvd6xFpf9rW7xJp-4aPGfWh5AaVD_SMiABjGU9dM6rzQ1yP-45cdf8u8PFJP-IXXxCt53Jztee8RzQqDxeJWgaf7otNFP5RpzO/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.cintafido.blogspot.com" target="_blank">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVy6FnhO33jObY5OdFaDTR5xkkDs9kRww0-xCJDgsaOLCvd6xFpf9rW7xJp-4aPGfWh5AaVD_SMiABjGU9dM6rzQ1yP-45cdf8u8PFJP-IXXxCt53Jztee8RzQqDxeJWgaf7otNFP5RpzO/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 ini adalah contoh gambar hasil dari kode diatas :


Cara Membuat gambar Transparan Disentuh Mouse

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.


sumber:carabuatwebgratis.com
TERIMA KASIH ATAS KUNJUNGAN SAUDARA
Judul: Cara Membuat gambar Transparan Disentuh Mouse
Ditulis oleh Unknown
Rating Blog 5 dari 5
Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip, baik itu sebagian atau keseluruhan dari isi artikel ini harap menyertakan link dofollow ke http://cintafido.blogspot.com/2013/01/cara-membuat-gambar-transparan-disentuh-mouse.html. Terima kasih sudah singgah membaca artikel ini.

0 komentar:

Posting Komentar

Panduan blog dan SEO support Online Skill - Cinta fido Fido | Kopi kanan Akherat | Kisah Nabi Muhammad | Sahabat | Belajar Blogger | Template | HTML | Tutorial | Komputer.

investasi semoga anda senang

kurs mata uang BCA-2


Selamat datang di blog cinta fido, semoga anda diberi keSehatan oleh alloh SWT

Islam itu Cinta Damai Agama Islam Cinta Damai
jihad Damai adalah amal kebaikan yang Allah perintahkan dan menjadi sebab kokoh dan kemuliaan umat islam