OnMouseOver and Your pages
Well actually OnMouseOver and OnMouseOut :)
The OnMouseOver function is used to do funky things when the mouse moves
over a particular image, link and stuff like that.
Pssstt...don't worry if the images are overlapping on your screens i've given an explanation for it below.
Well check it out in action. Move the mouse over the image below, and
then take it out of the image boundary and keep ur eyes on the image.
What happens out here is when the user passes the mouse over the image
the OnMouseOver event for the image occurs causing the function written
out there to execute.
Check the source below.
<onMouseOver="document.images[0].src='ATOM.GIF';return true;" ;>
Well here the OnMouseOver event causes the first image(in this page) refferred to as document.images[0] to change it's source image and instead display a new image called ATOM.GIF.
This is cool but check out the next image.
Move the mouse over the below image and watch what happens when u move the mouse away from the image, actually out of the image area.
This is even better here when the mouse moves over the image it changes to something else and then when u move it out of the image area it changes again back to the old image.
Here we use both the OnMouseOver and the OnMouseOut function.
Check the source below
<onMouseOver="document.images[1].src='ATOM.GIF';return true;" OnMouseOut="document.images[1].src='BLRAIN.GIF';return" true;">
*NOTE very important this image is reffered to as images[1] as it is the second image on this page. Actually the names of these images on a page are stored internally by Netscape Navigator in an array called images[] which starts with 0.
The next thing out here is the button and the image below it.
What happens out here is when the user clicks on the button it changes the image being displayed to some other image.
Check out the source. Here when the button is clicked it calls a function changeimage() which changes the image displayed.
<FORM>
<INPUT type="button" value="Change Image" name="imgbtn" onClick="changeimage();return true;">
</FORM>
The image source is below
<IMG SRC="BLRAIN.GIF" NAME="buttonimage" HEIGHT=60 WIDTH=30 border="0">
The function source is
function changeimage()
{
document.buttonimage.src='ATOM.GIF';
}
* NOTE Now here I've done something slightly different. First of all I call a function, changeimage() which has been declared initially. Also this function refers to the image not using the usual document.images[] format but refers to the image by the image name by which it is declared in this page. This becomes useful & necessary as the number of images in the page increase and u can't remember as to what number this image is refferred to by.
NOTE: In all the examples u can still see the previous image which was present. Netscape screwing up. No not exactly.
Both the images which are displayed have transparent backgrounds.
Hence when Netscape replaces an image with a new image it doesn't clear the original image entirely i.e. in the new image to be displayed only it's non-transparent parts are displayed.
Hence the overlapping. The only way out for this is to use non-transparent images, or images which fill up their entire pixel space basically have some or the other color even white will do(but no transparent areas).
Well where could u use these new functions, I'll list a few examples:
1. A menu of choices, where each choice is an image which glows when the mouse passes over it.
(Here u could have two images one lets say blue the other red. When the cursor passes over the
blue image it could turn red. This is just to bring some life to the otherwise static page.
2. A static image on a page which is replaced with an animated GIF when the mouse passes over it.
3. A list or menu of items which causes an appropriate image to be displayed.
(This could very well be an example where lets say u have a list of items on sale and when the
mouse passes over a particular item it's image is displayed.
P.S. I'll try and add links to pages where u could see these examples in action, or maybe actually put them out here myself.
The only problem is of creating those images for the examples.
Let me know what u want me to do. Send me a Mail.
Back
U R visitor no 
.