Search here

Type a word related to the post, then click the search button !

Memuat...
English
Bru masuk angin!

Flag Counters

Flag Counter

Pengikut

Recent Comments plus Kode CSS Box Gelap

Recent Comments

blog-indonesia.com

Vertical Menu

CLICK any categories for open!
Gubhug Reyot

Sobat Ngeblogh

Sobat Ngeblogh

Buat sobat blogger yang mau ikutan jadi follower silahkan KLIK link Follower (Follow) di ujung kanan-bawah. Dari hasil monitoring, ternyata yang link-nya telah dimasukkan ke "Sobat Ngeblogh" mengalami pertambahan pengunjung secara signifikan!
Terima kasih .: Salam :.
gubhug reyot

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 «


Bila tak pegal di tangan
silahkan tulis sebuah komentar!

gubhug reyot

 
GR | Edited by | gubhug reyot