banyak sekali contoh contoh efek mouse over, dan banyak pula cara untuk membuatnya. Untuk membuat efek mouse over kita tidak harus mengetik kode satu persatu, melainkan kita dapat menggunakan aplikasi bantuan untuk membuatnya. Anda dapat menggunakan aplikasi seperti Dreamweaver, Flash MX dan atau dengan menuliskan / mencopy beberapa kode dari turial yang telah ada
perhatikan contoh efek mouse over dibawah ini :
Plane 1
Plane 2
Plane 3
Plane 4
untuk membuat efek link seperti diatas silahkan ikuti langkah di bawah ini
Pertama : Silahkan copy script dibawah ini dan letakkan diantara tag <head>...<head><script> function changeimage(towhat,url){
if (document.images){
document.images.targetimage.src=towhat.src
gotolink=url
}
}
function warp(){
window.location=gotolink
}
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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBmWOsoPpezimNX8Ll-IZA5Lg7bmewei0HDKi6_RRnBuIDf_0shbJZKYcb-xILV-IIhNdg_yoxlL6CPiV4VqeuoySkHXgHuXxOL4QOFiYBq7mGAEEjx_MjO6fds_JFYmC106WjSf_vW8c/s128/pesawat1.jpg","https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSc7fiNPESa4BqGoKEUCgg3r5Z_HC6OneFGV7pJiWdenIIkedAsY6VIqUbqXBQKruBdRJjmaSx6escqMQlxH6y5W2fxIwZKNAKzgl-_XqmvQOp8Adry76Cq7pqIXD_4vU0mPWmrMcyxrI/s128/pesawat2.jpg","https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWcPgBGa8ExfKwYJpH-YlZC4FS20rjFh_yMWp_7_hYQrCc_8JO-HUwfq6RmIyory0uGRFOpVykBMlj28kZoGAT60MfCm8sOfl9_Iuv6gALgKBWtdyk4RciSKJPhEnVc_wZNDDw5TpYVqw/s128/pesawat3.jpg","https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXtpP2sPM8MwESFG_cbY4EBwxup8WXP80Evd4QtyGL5dwuX1gB8QK3L052PAAdGnPE3nms8MiJxnix5XMTGX5YLa4pERfuxkkaPZn9RM9U_688DiQTU-mdoxa7CITWsi2Jkb0nTR1lhC4/s128/pesawat4.jpg","")</script>
Langkah selanjutnya adalah meng copy script di bawah ini dan paste di antara tag <body>...</body> pada notepad atau aplikasi desain web anda ...
<a href="javascript:warp()"><img src="gambar utama" name="targetimage" border=0></a>
<script>"//myimages[0] would refer to "plane1.gif", myimages[1] would refer to "plane2.gif" etc
preloadimages("plane1.gif","plane2.gif","plane3.gif","plane4.gif","plane5.gif")
</script>
<a href="#" onMouseover="changeimage(myimages[0],this.href)">Plane 1</a>
<a href="#" onMouseover="changeimage(myimages[1],this.href)">Plane 2</a>
<a href="#" onMouseover="changeimage(myimages[2],this.href)">Plane 3</a>
<a href="#" onMouseover="changeimage(myimages[3],this.href)">Plane 4</a>
ok selamat mencoba ..
Catatan : Ganti alamat url yang bercetak merah dengan gambar yang telah anda upload
Tidak ada komentar:
Posting Komentar