Show Image/text on Mouseover with Javascript

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 «