Cara Membuat OnMouseover Slideshow
OnMouseover Slideshow adalah sebuah slide gambar yang dapat menampilkan gambar yang berubah-ubah setiap kali cursor digerakan diatas link yang berbeda.
Gambar itu sendiri adalah merupakan Hyperlink, dapat mencocokan target URL-nya setiap kali perubahan pada saat rollover dimasing-masing link.
Demo:
(Letakan cursor pada link...)Pulau Tidung |
|
Cara Memasang OnMouseover Slideshow
Langkah Pertama:
Letakan Javascript berikut ini diatas kode </head>.
<script>
/*Rollover effect on different image script-
By JavaScript Kit (http://javascriptkit.com)
Over 200+ free scripts here!
*/
function changeimage(towhat,url){
if (document.images){
document.images.targetimage.src=towhat.src
gotolink=url
}
}
function warp(){
window.location=gotolink
}
</script>
<script language="JavaScript1.1">
var myimages=new Array()
var gotolink="#"
function preloadimages(){
for (i=0;i<preloadimages.arguments.length;i++){
myimages[i]=new Image()
myimages[i].src=preloadimages.arguments[i]
}
}
preloadimages("plane1.gif","plane2.gif","plane3.gif","plane4.gif","plane5.gif")
</script>
Langkah Kedua:
Pasang script contoh berikut ini pada <body> halaman anda, untuk membuat OnMouseover Slideshow.
<a href="javascript:warp()"><img border="0" name="targetimage" src="#plane0.gif" /></a>
<a href="#.htm" onmouseover="changeimage(myimages[0],this.href)">Plane 1</a>
<a href="#.htm" onmouseover="changeimage(myimages[1],this.href)">Plane 2</a>
<a href="#.htm" onmouseover="changeimage(myimages[2],this.href)">Plane 3</a>
<a href="#.htm" onmouseover="changeimage(myimages[3],this.href)">Plane 4</a>
<a href="#.htm" onmouseover="changeimage(myimages[4],this.href)">Plane 5</a>
Keterangan:
Silahkan ganti Link dan gambar yang sudah saya tandai dengan warna merah dan kuning.sumber: javascriptkit
0 komentar:
Post a Comment
Catatan :
Untuk menyisipkan gambar kedalam komentar, gunakan tag : [img]URL_Gambar[/img]
atau <i rel="image">URL_Gambar</i>
Untuk Video Youtube : [youtube]URL_Video[/youtube]
atau <i rel="youtube">URL_Video</i>
Untuk "Kutipan", gunakan : [blockquote]Kutipan_Anda[/blockquote]
atau <b rel="quote">Kutipan_Anda</b>
Untuk menyisipkan Kode: [code]KODE[/code]
atau <i rel="code">KODE</i>
atau <i rel="pre">KODE</i>
Dan untuk menyisipkan smiles/ emoticon, lihat kode Emoticon