Trik Mouseover Gambar Posting Dengan Mode Transparan

Sebenarnya hari ini congcot kurang enak badan. Mohon Doanya saja semoga lekas sembuh. Tapi karena jadwal posting congcot adalah 2 hari sekali, dan sekarang adalah waktunya, maka posting harus tetap dilanjutkan.
Entah apa yang membuat congcot harus posting ini, yang jelas belum ada lagi ide posting lain (kehabisan ide kali, hahaha).
Apa itu mouseover?, mouseover adalah sebuah keadaan dimana mouse berada tepat di wilayah objeck. Oke, untuk memahami judul diatas, Congcot akan memberikan contohnya langsung.

Keadaan #1...
Untuk contoh yang pertama kita akan membuat keadaan, dalam keadaan normal, maka gambarnya biasa, dan jika mouse tepat berada di wilayah gambar, maka gambar itu akan transparan.


Kode yang saya gunakan adalah:

<img onmouseout="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseover="this.style.opacity=0.4;this.filters.alpha.opacity=40" src="Lokasi Gambar" style="opacity: 1;" />

Keadaan #2...
Ynag kedua, kita akan membalikan keadaan, yaitu: dalam keadaan normal, gambar akan transparan, sedangkan jika disorot mouse, gambar akan biasa.


Kode yang saya gunakan adalah:

<img onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" src="Lokasi Gambar" style="opacity: 0.4;" />

Seluruh Posting...
Tentu pusing kalo setiap posting kita harus membuat script diatas.
Bagimana kalo kita ingin semua gambar di posting anda ingin seperti keadaan diatas?
Jawabannya simpel

1. Masuk Ke www.blogger.com dengan account anda
2. Pilih Rancangan (tata letak)
3. Klik edit HTML
4. Cari kode ]]></b:skin>
5. Simpan kode dibawah, tepat diatas kode ]]></b:skin>
6. Simpan Template
7. Selesai.

Kodenya adalah

.post img{opacity:1;filter:alpha(opacity=1); this.style.opacity=6}
.post img:hover{opacity:.5;filter:alpha(opacity=100); this.style.opacity=1}

Keterangan:
*Masukan URL gambar anda di Lokasi Gambar
*Contoh Gambar diatas diambil dari Sumber

Intinya...
Keunikan suatu trik sangat berpengaruh terhadap ciri khas blog anda. Gunakan trik ini untuk menambah keunikan dalam trik gambar yang anda posting. Mudah-mudahan bermanfaat. Amin
Terima kasih

Silahkan tinggalkan jejak kunjungan anda dengan berkomentar. Komentar juga berguna sebagai motivasi dan koreksi jika ada kesalahan dalam pembuatan posting. Terima kasih.