Rollovers

A rollover is when an image changes when you move your mouse pointer over it, and then changes back when you move your mouse pointer off of it. Below is an example of a rollover images:
The above image changes from black to white when you "mouse over" it, and changes to gray when you "mouse down" (click) on it. When you "mouse off" of the image, it turns back to black.

Step-by-step instructions

Step 1 - Right-click and download these three images. Don't rename them when you save them.

     


Step 2 - Copy this Javascript, and paste it between the <head> and </head> tags in your HTML document: 

<script type="text/javascript">

function newImage(arg) {
if (document.images) {
rslt = new Image();
rslt.src = arg;
return rslt;
}
}

function changeImages() {
if (document.images && (preloadFlag == true)) {
for (var i=0; i<changeImages.arguments.length; i+=2) {
document[changeImages.arguments[i]].src = changeImages.arguments[i+1];
}
}
}

var preloadFlag = false;
function preloadImages() {
if (document.images) {
button_01_over = newImage("images/button_01-over.gif");
button_01_down = newImage("images/button_01-down.gif");
preloadFlag = true;
}
}
</script>
Step 3 - Add this one snippet inside your <body> tag:
onload="preloadImages();"
Your <body> tag should look like this
<body onload="preloadImages();">
Of course, you can have other attributes in your <body> tag (bgcolor, background, etc.) if you wish.


Step 4 - Put this HTML somewhere after your <body> tag: 

<a href="#"
onmouseover="changeImages('button_01', 'button_01-over.gif'); return true;"
onmouseout="changeImages('button_01', 'button_01.gif'); return true;"
onmousedown="changeImages('button_01', 'button_01-down.gif'); return true;"
onmouseup="changeImages('button_01', 'button_01-over.gif'); return true;">
<img name="button_01" src="button_01.gif" width="200" height="100" border="0" /></a>
Let's take a quick look at this code... 

<a href="#"
Change # to your URL (page2.html or whatever) 



onmouseover="changeImages('button_01', 'button_01-over.gif'); return true;"
onmouseover controls what the image does when your mouse pointer is over it. 



onmouseout="changeImages('button_01', 'button_01.gif'); return true;"
onmouseout controls what the image does when you move your mouse pointer off of the image. 



onmousedown="changeImages('button_01', 'button_01-down.gif'); return true;"
onmousedown controls what the image does when you press down on the image. 



onmouseup="changeImages('button_01', 'button_01-over.gif'); return true;">
onmouseup controls what the image does when you release the button--it changes back to the "over" state.


If you want to add more buttons...
  1. Create more up, over and down states
  2. Save those images
  3. You will then have to add some new code in Javascript between the <head> tags of your HTML document: 
    
<script type="text/javascript">

function newImage(arg) {
if (document.images) {
rslt = new Image();
rslt.src = arg;
return rslt;
}
}

function changeImages() {
if (document.images && (preloadFlag == true)) {
for (var i=0; i<changeImages.arguments.length; i+=2) {
document[changeImages.arguments[i]].src = changeImages.arguments[i+1];
}
}
}

var preloadFlag = false;
function preloadImages() {
if (document.images) {
button_01_over = newImage("images/button_01-over.gif");
button_01_down = newImage("images/button_01-down.gif");
button_02_over = newImage("images/button_02-over.gif");
button_02_down = newImage("images/button_02-down.gif");
preloadFlag = true;
}
}
</script>
  4. Finally, you will have to add new Javascript in your page's body... 
    
<a href="#"
onmouseover="changeImages('button_01', 'button_01-over.gif'); return true;"
onmouseout="changeImages('button_01', 'button_01.gif'); return true;"
onmousedown="changeImages('button_01', 'button_01-down.gif'); return true;"
onmouseup="changeImages('button_01', 'button_01-over.gif'); return true;">
<img name="button_01" src="button_01.gif" width="200" height="100" border="0" /></a>
<a href="#"
onmouseover="changeImages('button_02', 'button_02-over.gif'); return true;"
onmouseout="changeImages('button_02', 'button_02.gif'); return true;"
onmousedown="changeImages('button_02', 'button_02-down.gif'); return true;"
onmouseup="changeImages('button_02', 'button_02-over.gif'); return true;">
<img name="button_02" src="button_02.gif" width="200" height="100" border="0" /></a>
    All I did here was copy my HTML/Javascript for the first button, and make a few changes (in bold) to the code in order for it to work for the second button.


<< Back to Home