Selain menggunakan CSS, efek transparansi gambar bisa juga dilakukan dengan menggunakan javascript. Sangat simple dan praktis untuk digunakan. Javascript ini berfungsi untuk menampilkan gambar saat cursor menyentuh gambar.
Javascript Show Image on Mouseover
<script type="text/javascript">
/*bloggerstars1-gubhug reyot */
function show(imageobject, opacity){
if (navigator.appName.indexOf("Netscape")!=-1&&parseInt(navigator.appVersion)>=5)
imageobject.style.MozOpacity=opacity/100
else if (navigator.appName.indexOf("Microsoft")!=-1&&parseInt(navigator.appVersion)>=4)
imageobject.filters.alpha.opacity=opacity
}
</script>
Cara menggunakan javascript :
Copy paste dan simpan di atas KODE
]]></b:skin>Penerapan dalam Posting :Gunakan KODE :
1. Gambar tanpa link :<img style="filter:alpha(opacity=
50); -moz-opacity:
0.5; opacity:
0.5;" onMouseover="show(this,
100)" onMouseout="show(this,
20)" src="
http://img.theomegaproject.org/thumbs/2010/01/60.jpg"/>
2. Gambar dengan link :<a href="
gubhugreyot.blogspot.com"><img style="filter:alpha(opacity=
50); -moz-opacity:
0.5; opacity:
0.5;" onMouseover="show(this,
100)" onMouseout="show(this,
20)" src="
http://img.theomegaproject.org/thumbs/2010/01/230.jpg"/></a>
3. Menggunakan Teks sebagai link<a href="
gubhugreyot.blogspot.com" onMouseover="show(this,
100)" onMouseout="show(this,
20)" ><font style="font:16px; font-family:cursive; font-weight:bolder; filter:alpha(opacity=
50); -moz-opacity:
0.5; opacity:
0.5;">
gubhugreyot</font></a>Javascrip ini berfungsi untuk...dst.
Catatan :- KODE warna
hijau adalah
URL gambar.
- KODE warna
oranye adalah
link gambar atau alamat yang lain.
- KODE warna
kuning adalah
teks link.
- KODE warna
biru muda adalah
tingkat opacity.
100 = opacity saat mouse menyentuh/di atas gambar/teks.
0.5, 0.5 dan 50 = opacity saat pertama gambar/teks muncul --> bisa diperbesar atau diperkecil
20 = nilai opacity saat cursor meninggalkan gambar/teks.
Opacity semakin besar maka gambar semakin jelas.
Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :
� Happy Blogging - gubhugreyot �
