Gambar berganti ketika mouse berada diatasnya merupakan salah satu bentuk kreasi menggunakan JavaScript. Ini dapat diimplementasikan di web atau blog yang mendukung javascript misalnya untuk membuat link ke halaman lain ataupun membuat link download bergambar.
Untuk lebih jelasnya tentang uraian diatas coba arahkan mouse anda pada gambar dibawah ini.
Cara membuatnya adalah sebagai berikut
1. Siapkan dua buah gambar yang berekstensi gif ,misalnya : gambarA.gif dan gambarB.gif.
2. Simpan kedua gambar tersebut di website anda, kemudian simpan alamat gambar itu,
contohnya:
/images/stories/fruit/gambarA.gif
/images/stories/fruit/gambarB.gif
Jika anda pengguna blogspot atau yang lain anda dapat menyimpan di flickr.com,
photobucket.com ataupun di live.com
photobucket.com ataupun di live.com
3. Copy code dibawah ini pada notepad,
<head>
<script type="text/javascript">
function mouseOver()
{
document.getElementById("b1").src ="http://i499.photobucket.com/albums/rr351/kristiyono/Posting/bluearrow2.gif";
}
function mouseOut()
{
document.getElementById("b1").src ="http://i499.photobucket.com/albums/rr351/kristiyono/Posting/bluearrow1.gif";
}
</script>
</head>
<body>
<a href="http://teksbook.blogspot.com/p/yovie-and-nuno.html#Armada%20Band" target="_blank">
<img border="0" alt="Download MP3" src="http://i499.photobucket.com/albums/rr351/kristiyono/Posting/bluearrow1.gif" id="b1"
onmouseover="mouseOver()" onmouseout="mouseOut()" /></a>
</body>
</html>
kemudian edit tulisan yang berwarna merah sesuai dengan alamat gambar yang telah kita miliki .Lihat no.2
4. Masukan code diatas pada saat anda posting.Mungkin anda dapat mengembangkan lebih baik lagi dari postingan yang ada ini.
5. Selamat mencoba semoga sukses.
0 komentar:
Posting Komentar