Newbie dot Org HomePage
Visit one of our web buddies
Xxaxx's Xperimints #4
OnMouseOver

button text here This page has two buttons that use the OnMouseOver function. When you place the mouse arrow over the graphic to the left you should see it change into a solid arrow. Clicking on the arrow will take you below to another section of this same page. There you will find a arrow pointing up. Guess what that arrow does.

The code below is used at the top of the page. Put the code in the HEAD section of the html inbetween the <head> and </head>. By viewing page source of this page you will see exactly were we put the code on this page.

In this JavaScript function pay close attention (for a moment) to the "if (document.images)" part. This little bit of JavaScript trickery protects your browser from trying to run code it is not able to. If you browser does not support the (document.images) array then this variable will not exist and this "if" statement will come back false and the code will not be attempted. This keeps your browser from trying to issue code that it doesn't understand. Nice.

In this example we have used the graphics btn1_on.gif btn1_off.gif etc. You can of couse use any gif or jpg files of your choice.

<script language="JavaScript">
<!--
if (document.images) {
image1on = new Image();
image1on.src = "btn1_on.gif";
image1off = new Image();
image1off.src = "btn1_off.gif";
image2on = new Image();
image2on.src = "btn2_on.gif";
image2off = new Image();
image2off.src = "btn2_off.gif";
}
function changeImages() {
if (document.images) {
for (var i=0; i<changeImages.arguments.length; i+=2) {
document[changeImages.arguments[i]].src = eval(changeImages.arguments[i+1] + ".src");
}
}
}
// -->
</script>
</head>

Here is a listing of the code used for the graphic image above:

<a href="#down" onMouseOver="changeImages('image1', 'image1on')" onMouseOut="changeImages('image1', 'image1off')"><img name="image1" src="graphics/btn1_off.gif" alt="button text here" width=100 height=100 border=0 align=left></a>

Please take note of a few things. Each image used in the onmouseover button routine has the name="" attribute used. Also if you study the changeImages function you will note that any number of name/image pairs can be sent in one function call.

button text hereThe button to the left is the same as the upper button with just the names changed to add another button. Try clicking back and forth for awhile.

We have picked up this code from an article on the http://www.builder.com website. They have some great material there. Once you get to builder.com lookup "onmouseover" through the onsite search. You can also try to access http://builder.com/Programming/Kahn/092398/ss01.html directly.