Pass your mouse over the similing face below.
to display a rollover on the navigation buttons.
Let's look first at the code that will do the swapping :
The first four lines load in the images so that they rollover smoothly as soon as the mouse is pointed at them. Notice here
we also specify the width and height (in that order) of the image. These are usually the same to create a seamless rollover, but
there's nothing stopping you adding images of different sizes if you want a particular effect.
The Image File
Before any of that will work however, we need the image in place in the HTML code. Here's the code :
Now you can see how the functions find the image. The image has a NAME attribute "imageflipper". The 2 functions
find the correct image to flip by looking going through document.imageflipper and then finding the source of the image by using
document.imageflipper.src (Note that if you had two images on the page with the same name it would not work.)
When the mouse rolls over the image, the onMouseOver event is called, which refers to the Frown() function. When
then mouse moves out, the onMouseOut event is called, referencing the Smile function. Our image swaps, as simple as that!
as when you call the function from the image.