|
Image Rollovers
By now you must think that the only thing javascript does
is make things rollovers. Well heres how to make an image
rollover. Lets dive straight in - heres the code:
<a href="home.htm" onMouseOut="MM_swapImgRestore()"
onMouseOver="MM_swapImage('homepage','','home_down.gif',0)"><img
name="homepage" border="0" width="100"
height="100" src="home_up.gif"></a>
Yet again its just like normal only with a few javascript
functions inside the link. All you need to do is add the following:
onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('homepage','','home_down.gif',0)
Just replace the image SRC with your image, on both the javascript
function and in the image tag inside the link. The original
image tag is your first image and the image in the javascript
is your rollover image. HOWEVER you also need to add the following
code to your <head>...</head> code:
<script language="JavaScript">
<!--
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;
}
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) { //v4.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);
if(!x && document.getElementById) x=document.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[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc)
x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
This is just your image rollover function. You can also preload
images, by adding the following inside your body tag
onLoad="MM_preloadImages('aboutus_down.gif','games_down.gif')"
You don't need to add you standard images here - just your
rollover images.
|
