JavaScript: MouseOvers That Work
Making web pages where images change and interract with a cursor does not need to be difficult. There is quick and easy methods of doing this with very little coding. This MouseOver JavaScript is about the easiest one there is to use.
Here is the Example
 |
 |
The JavaScript Code
This code is added to the HEAD of your HTML document.
|
<script language="JavaScript" type="text/javascript"><!-- window.onerror = null; // Generic Error Trapping if (document.images) { // Checks for handling of MouseOver images // The full path to your images directory // This allows you to call the JavaScript from anywhere var i = "images/"; // MouseOver Image Pairs. Numbers (a,b) are the image dimensions picture0 = new Image(262,47); picture0.src = i + "picture0.gif"; picture1 = new Image(262,47); picture1.src = i + "picture1.gif"; } function Chng(Pct,type) { // Pct: Is the name of the image (followed by a type number) // This is also the HTML 'name' of the image. // Type: 0 = mouseOut, 1 = mouseOver if (document.images) document[Pct].src = eval(Pct + type + ".src"); } // --></script> |
Remember to replace 'picture' with the name of your picture pairs. Picture pairs have near identical names with only one character difference. A zero is added to the default image (picture0.gif), and a one is added to the mouseover/focused image (picture1.gif).
How to Use It
In the examples below you will see almost identical pairs of code. OnMouseOver and OnFocus have the same code, and then OnMouseOut and OnBlur have the same code. The OnMouseOver/OnMouseOut pair is for interaction with a cursor, associated with the mouse. The OnFocus/OnBlur pair interacts other page element focus/select properties, like the TAB key does with Internet Explorer.
| <a href="WEB_ADDRESS" onmouseover="Chng('picture','1');" onfocus="Chng('picture','1');" onmouseout="Chng('picture','0');" onblur="Chng('picture','0');"><img src="PATH_to_PICTURE/picture0.gif" width="76" height="10" border="0" name="picture" alt="image description"></a> |
| <a href="WEB_ADDRESS" onmouseover="Chng('picture','1');" onfocus="Chng('picture','1');" onmouseout="Chng('picture','0');" onblur="Chng('picture','0');">YOUR_LINK</a> |
| <img src="PATH_to_PICTURE/picture0.gif" width="76" height="10" border="0" name="picture" alt="image description"> |
Without the comments the JavaScript for 10 MouseOvers can be less than one kilobyte. Some code examples I have seen are more than seven times that size and still produce errors.
For a more complex example of MouseOvers, have a look at our Multi-Target Image-Swapping. This advanced example shows how to use an 'array' to define a large number of image-swaps all at once. It also shows how to use web forms to interract with your image-swapping needs.
