Rollover Button

BY IN HTML Comments Off on Rollover Button

Yang dimaksud dengan Rollover button umumnya adalah sebuah link yang terbuat dari dua buah image. Image yang pertama akan ditampilkan pada kondisi statis, sedangkan apabila kita menyorot button tersebut dengan mouse, maka Image yang kedua yang akan ditampilkan.
Persiapan yang pertama, kita sisipkan script berikut ini pada tag head
catatan: script ini otomatis generated dari Dreamweaver

<script type=”text/JavaScript”>
<!–
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a)&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a.indexOf(“#”)!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a;}}
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf(“?”))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers.document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//–>
</script>

lalu kita akan load image defaultnya yang akan dibuat rollover dengan menyisipkan properties di dalam tag body:
<body onload=”MM_preloadImages(‘images/logoch.jpg’)”>
Jika kita membuat lebih dari 1 rollover button, maka kita tetap harus load image defaultnya di dalam tag body dengan dipisahkan tanda koma.

selanjutnya, untuk membuat link, kita tinggal panggil function yang sudah didefine dalam script sebagai berikut:

<a href=”#” onmouseout=”MM_swapImgRestore()” onmouseover=”MM_swapImage(‘Image1′,”,images/logoch1.jpg’,1)”><img src=”images/logoch.jpg” name=”Image1″ width=”260″ height=”260″ border=”0″ /></a>

Perhatikan untuk teks yang dicetak tebal adalah function Java Script yang dipanggil untuk keperluan Rollover Button, untuk saat ini kita belum akan membahas script tersebut.

by: Wahyu Kurniawan




Comments are closed.