MouseOver an image
You can do the same kind of thing with images as well. Look at this MouseOver Image example, noting the code and the script components, the inline CSS for body background, and the linking of the alternating image to an absolute location.
// preload two images - they must be the same size!
// Note here the image is 86 pixels wide and 76 pixels high.
var normalButton = new Image(86,76);
var reverseButton = new Image(86,76);
normalButton.src = "button.jpg";
reverseButton.src = "button-reverse.jpg";
<h2>MouseOver on an Image</h2>
<p>This page illustrates using the <em>mouseOver</em> on an image. As you drag the mouse over the image, notice how the image changes.
onMouseOver="document.ThisImg.src = reverseButton.src; return true"
onMouseOut="document.ThisImg.src = normalButton.src; return true">
<img name="ThisImg" src="button.jpg"> </a></p>
Try to modify this code for your own use. You may use any pair of images, but you must store them in the same subdirectory where you store your page code [so the script can find them in order to display them]. Here are two you can download for use.
Modify your code by replacing the size values from 86, 76 to 151, 223 and use the correct filenames.
var normalButton = new Image(151,223);
var reverseButton = new Image(151,223);
normalButton.src = "RtProfile.png";
reverseButton.src = "LtProfile.png";
These two images are the same size, but you may need to take a look at other images in Fireworks, Photoshop or another image editing software program to determine the size of the image. You will need to use these in order to change the size attributes for the images in the script.
Last updated on