Mouseover Example

This is an example of two mouseovers. I used the same images for both mouse over, but you can change them by altering the source code.

Source for mouseover.html:

<html>
<head>
<title>Mouseover Example</title>
<script>

// First Mouse Over
var image1on = new Image();           // Active images
image1on.src = "http://www.havenofbliss.com/images/js_whb_on.gif";  
var image1off = new Image();          // Inactive images
image1off.src = "http://www.havenofbliss.com/images/js_whb_off.gif"; 

// Second Mouse Over
var image2on = new Image();           // Active images
image2on.src = "http://www.havenofbliss.com/images/js_whb_on.gif";  
var image2off = new Image();          // Inactive images
image2off.src = "http://www.havenofbliss.com/images/js_whb_off.gif"; 

function imgOn(imgName) {
   if (document.images) {
       document[imgName].src = eval(imgName + "on.src");
   }
}
function imgOff(imgName) {
   if (document.images) {
       document[imgName].src = eval(imgName + "off.src");
   }
}
</script>
<body>

<A HREF = "#" onMouseOver = "imgOn('image1')" onMouseOut = "imgOff('image1')">
<IMG NAME = "image1" SRC = "http://www.havenofbliss.com/images/js_whb_off.gif" border=0></A>

<A HREF = "#" onMouseOver = "imgOn('image2')" onMouseOut = "imgOff('image2')">
<IMG NAME = "image2" SRC = "http://www.havenofbliss.com/images/js_whb_off.gif" border=0></A>

</body>
</html>

Back