Javascript Image Rollovers
Pass your mouse over the similing face below.
What happens here is we use a bit of javascript to swap two different images on the page. You often see this on sites
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.
Next we have two javascript functions Frown and Smile. These reference the image and set its source to the appropriate image file.
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 usual with javascript remember it's case sensitive, so you must use exactly the same letters and cases in the function name
as when you call the function from the image.
|
|
