Setelah rekan blogger mengetahui bagaimana caranya memasukan gambar ke dalam blog, baik itu di postingan, sidebar ataupun pada header. Selanjutnya silahkan rekan blogger ikuti trik dibawah ini tentang membuat gambar menjadi transparan atau istilahnya Opacity dengan memasukan sedikit kode css kedalamnya. Seperti contoh yang saya terapkan pada space iklan diatas, dengan menambahkan efek mouseover.

Perhatikan contoh gambar dibawah ini!

image1
image1

Untuk membuat gambar menjadi transparan kita perlu membubuhkan kode css kedalam kode gambarnya. Perhatikan kode gambar dibawah ini :

<img src="url gambar anda" alt="keterangan gambar" width="150" height="113" style="opacity:x; filter:alpha(opacity=x)"/>


Pada kode yang berwarna hijau merupakan kode yang ditambahkan untuk membuat gambar menjadi transparan. Kalau kita perhatikan Ada dua penambahan pada kode berwarna hijau, pertama opacity:x; dan 1filter:alpha(opacity=x). Pertama, opacity:x; merupakan kode yang di support oleh Mozilla Firefox. Kita bisa mengganti huruf x dengan nilai antara 0.0 - 1.0. Nilai yang lebih rendah membuat gambar lebih transparan. Kedua, filter:alpha(opacity=x) merupakan kode yang di support oleh Internet Explorer. Huruf x bisa kita ganti dengan 0 - 100. Sama halnya dengan diatas, nilai yang yang lebih rendah membuat gambar lebih transparan.

Menambahkan efek mouseover

image1 image2

Untuk menambahkan efek mouseover, ada sedikit kode yang mesti ditambahkan. Penambahannya ialah onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40".
Pada bagian onmouseout, silahkan rekan-rekan tambakan nilainya sesuai dengan kode transparannya. Sedangkan pada onmouseover, tidak perlu ada perubahan. Sehingga kode keseluruhan pada efek mouse over menjadi seperti ini :

<img src="url gambar anda" alt="keterangan gambar" width="150" height="113" 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" />

Axact

Asep Nurdin

Blog/Web Asep Nurdin yang berisi informasi seputar pendidikan, tips dan trik, tutorial blog dan wordpress. Kegiatan saat ini mengajar di salah satu MTs Swasta Cianjur dan mengelola bisnis internet. Silahkan kontak saya di halaman Hubungi Saya

Post A Comment:

6 comments: