Mouseover Image Flip
This script will change specific images when the mouse over moves over them.Script Code
Grab a copy of the file below and place it in the same directory as the Web page on which you will use the script (if you wish to place the script file in a different directory you will need to make the necessary adjustments to the src attribute of the script tag that calls it).The code below should be placed between the <body> and </body> tags where you want the images to appear.
Example
A working sample of the script is shown below. Move your mouse over the images to test it!
Options
Be sure to replace the src attribute of each image with your own image addresses. Be sure each image you want to have change has the class attribute set to flip, and also has the id attribute set to something different from any other images or elements on the page.Images can be linked as you normally would with HTML by wrapping anchor tags around them.
Additional images can be added by editing the HTML code and the JavaScript code. Example HTML code for a third image:
<img src="third_img.gif" class="flip" id="third_img" alt="image3" />
Example JavaScript code for adding a third image (strong text indicates additions to existing code):
/* Set "Off" image URLs */
my_imgs_off[0] = "shoes1.gif";
my_imgs_off[1] = "story1.gif";
my_imgs_off[2] = "third_img.gif";
/* Set "On" image URLs */
my_imgs_on[0] = "shoes2.gif";
my_imgs_on[1] = "story2.gif";
my_imgs_on[2] = "third_img2.gif";
Notice that the "off" URL will match the URL set in the src attribute of the image tag. The "on" URL will be the URL of the image that will be displayed when the mouse is moved over it. Also, the number in brackets ([2] in this case) needs to be increased by one for each image added.
Accessibility
The accessibility of this script will depend on the purpose for which it is used. This script should do nothing for browsers that do not support it. Depending on the purposes of the images used, alternate text or a note informing the user of the action may suffice.