Membuat Efek Transparan Gambar Pada Blog

Membuat tampilan blog menjadi indah merupakan salah satu pengguna blog, banyak cara untuk memperindahnya. Salah satu caranya adalah dengan menambahkan efek transparan pada gambar. Dimana bukan hanya efek transparan saja yang dimunculkan , ketika Pointer Mouse mengarah pada gambar efek itu akan terlihat, baik itu dari buram menjadi terang, atau sebaliknya.

Cara membuatnya sangat mudah, kita tinggal menyisipkan beberapa kode pada gambar. Lihat contoh script HTML di bawah ini :

<img src="URL GAMBAR" 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"/>

Contohnya :

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEir_RLxtu7WPrx4JcJJ154iXx4J_cSzoviUukCdQ-H0ADhEUj6qywl6ReT8G18pm6RaJkAGr9UTy59c1kh1Zww1YO5vZQauveCDqU_aX82t6yKlTJcWR-5CiTWjWsB98Rh8MjIoEBpeJyuS/s1600/SOLonWebId-3-4+copycopy.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 Url Gambar milik anda.
- Semakin kecil nilai opacity, maka efek transparan akan semakin buram.
- Kode sintaks yang berwarna Orange untuk browser Firefox.
- Kode sintaks yang berwarna Abu-Abu untuk browser IE.
- Jadi lebih baik dua - duanya kita pasang agar support pada kedua browser tersebut.

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

<a href="LINK TUJUAN GAMBAR" target="_blank"><img src="URL GAMBAR" 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>

Contohnya:

<a href="http://www.semuanyaonline.web.id" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEir_RLxtu7WPrx4JcJJ154iXx4J_cSzoviUukCdQ-H0ADhEUj6qywl6ReT8G18pm6RaJkAGr9UTy59c1kh1Zww1YO5vZQauveCDqU_aX82t6yKlTJcWR-5CiTWjWsB98Rh8MjIoEBpeJyuS/s1600/SOLonWebId-3-4+copycopy.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 :

Maaf klo nanti gambarnya ketika mouse nya di arahkan pada gambar, gambarnya agak sedikit bergoyang. itu karena efek dari tamplate yang saya gunakan. Pada kenyataannya sebenarnya gambarnya tidak bergoyang, hanya perubahan dari tidak transparan menjadi transparan. Terima Kasih.

Pages