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).
simage1.js
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.
Copyright © 1998-2010
The Web Design Resource. All rights reserved. See script or author's information for copyright information on the
individual scripts and/or writing.
Disclaimer