Senin, 06 Juni 2011

Posts by : Admin

Cara membuat Mouse Over Image menggunakan Javascript


Pada tips dan trik blogger kali ini,saya ingin sharing mengenai bagaimana cara membuat Image mouseover link,atau Image hover link menggunakan javascript.Mungkin diantara anda ada yang belum tau apa itu mouseover.Mouseover adalah sebuah link yang jika ditunjuk menggunakan mouse akan mengeluarkan efek tertentu.


Contoh:

Anda lihat menu link diatas,itu lho yang ada HOME,PANDUAN BISNIS ONLINE,JASA PEMBUATAN WEB,dll...jika anda arahkan mouse nya ke sana,maka warna nya akan berubah kan.Itu namanya mouseover / hover.

Nah sekarang saya ingin sharing cara membuat image mouse over menggunakan javascript.Jadi ketika anda arahkan mouse anda pada gambar,maka gambar akan berubah dengan sendirinya.

Ok...langsung aja ya,cara nya gampang:

1. Upload gambar pertama dan kedua yang ingin anda buat mouseover pada situs image hosting.Catat url dari image tersebut

2. Masukkan kode ini di bawah <head>

<SCRIPT LANGUAGE="JavaScript">

loadImage1 = new Image();
loadImage1.src = "MASUKKAN URL IMAGE KEDUA ANDA DISINI";
staticImage1 = new Image();
staticImage1.src = "MASUKKAN URL IMAGE PERTAMA ANDA DISINI";

</script>


3. Masukkan kode di bawah ini di bawah <body> (letaknya anda sesuaikan pada tempat yang ingin anda buat mouseover :

<a href="MASUKKAN URL TUJUAN DARI LINK ANDA DISNI" target="_blank" onmouseover="image1.src=loadImage1.src;" onmouseout="image1.src=staticImage1.src;">
<img name="image1" src="MASUKKAN URL IMAGE PERTAMA ANDA DISINI" border=0></a>

4. Selesai...
Label:

0 komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)