david peng - developer corner

home

myself

Resources

Tips

rollover images

you might have seen some pages with rollover images that is not loaded properly when you move your mouse over them. there is the solutions.

load all images when the page is loaded, swap images when mouse is moving around, using following scripts,
// load images into an object global to the page 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[i].indexOf("#") != 0) { d.MM_p[j] = new Image; d.MM_p[j++].src = a[i]; } } } function MM_findObj (n, d) { //v3.0 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[i][n]; for (i=0; !x&&d.layers&&i<d.layers.length; i++) x = MM_findObj(n,d.layers[i].document); return x; } // swap a set of images specified in arguments - // img_obj_name, , new_img, img_obj_name, , new_img2, ... 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[i])) != null) { document.MM_sr[j++] = x; if(!x.oSrc) x.oSrc = x.src; x.src = a[i+2]; } } function MM_swapImgRestore() { //v3.0 var i, x, a=document.MM_sr; for (i=0; a&&i<a.length&&(x=a[i])&&x.oSrc; i++) x.src=x.oSrc; }
and put this in your <body> tag,
onLoad="MM_preloadImages('about-on.jpg','news-on.jpg','network-on.jpg','players-on.jpg','pictures-on.jpg','contacts-on.jpg')" <a href="players.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Players','','players-on.jpg',1)" onFocus="if(this.blur) this.blur()" target="mainFrame"> <img name="Players" border="0" src="players-off.jpg" width="181" height="22" alt="Who's Attending?"></a>
and put this in your <img name="player"> tag,
onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Players','','players-on.jpg',1)" onFocus="if(this.blur) this.blur()" target="mainFrame">