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>
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...
Live DEMO anda bisa lihat disini , lihat link yang bertuliskan CHECK OUR PORTOFOLIO.
Hmmm...sudah lama ga buat postingan tentang coding,kangen juga :D
Kalau ada pertanyaan,bisa tanya menggunakan kolom komentar ya!
Tidak ada komentar:
Posting Komentar