Rollover Button Code.

Underline


Cut and paste the following HTML code into Notepad and save it in to a folder as a file called "rollover_button.html" ... 

<html>
<head>
<title>Rollover Button </title>
<script type="text/javascript"   src="rollover.js"></script> 
</head>
<body>
<table width="130">
<tr>
<td>
<a href="#" onmouseout="MM_swapImgRestore()" 
onmouseover="MM_swapImage('rollover1','','blue_button1.png',1)">
<img src="grey_button1.png" alt="Rollover Button" name="rollover1" 
width="130" height="20" border="0" id="rollover1" />
</a>
</td>
</tr>
</table>
</body>
</html>

If you change the file names on this page you will have to replace the blue text items with the new name of your destination folder and image file names! "#" can be replaced with a URL of your choice or else onclick reloads the same page.

 

 


Cut Paste and Save the following Javascript code into the same folder as a Notepad text file called "rollover.js"...

 
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.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[i][n];

  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].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[i]))!=null){document.MM_sr[j++]=x;
  if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}

  }

 

Put the two images into the same folder by right clicking and choosing Save Image As...

Grey Button1
Blue Button1

You should now be able to produce the following rollover button...

Rollover Button

by placing all the saved elements into the one folder.




An alternative is to download a "Zipped" folder containing all the elements.
Download The Zipped Folder.
Download the zipped folder.



Hosted on
GameStone

All trademarks and copyrighted material are property of their respective owners