9 Javascripts You Better Not Miss!
By Kiran Pai2005-06-11
Example 7 : Changing images with MouseOver and MouseOut events
|
|
This is probably the most common use of Javascript. There are countless ways to get this working, but I present one that I use frequently. This script like many of my other ones rely on numbered image files. Make images with names such as org0.jpg, org1.jpg and org2.jpg. These would be initially displayed. Get 3 more files named new1.jpg, new2.jpg and 3.jpg which would be the files displayed when the mouse is over the original images.
| <SCRIPT LANGUAGE = "JavaScript"> <!-- function new_img(no){ | |
| document.images[no].src="new"+no+".jpg"; | |
| } function org_img(no){ | |
| document.images[no].src="org"+no+".jpg"; | |
| } --> </SCRIPT> <BODY> <IMG SRC="org0.jpg" onMouseOver="new_img(0)" onMouseOut="org_img(0)"> <IMG SRC="org1.jpg" onMouseOver="new_img(1)" onMouseOut="org_img(1)"> <IMG SRC="org2.jpg" onMouseOver="new_img(2)" onMouseOut="org_img(2)"> </BODY> | |
Alternatively in case you want to change an image when clicked on it use the following script
| <SCRIPT LANGUAGE = "JavaScript"> <!-- function change_img(index){ | |
| document.images[index].src = "N.jpg"; | |
} <BODY> | |
Tutorial Pages:
» 9 Javascripts you better not miss!
» Example 1 : A Single click for checking-unchecking multiple check boxes
» Example 2 : Opening a page (existing as well as dynamic) in a new window without bars, buttons, etc.
» Example 3 : Multiple submit buttons on a single form (Submitting same form to any one of many programs)
» Example 4 : Emulating Browsers Back-Forward buttons
» Example 5 : Making the Output of a program (servlet/cgi program) to appear in a new frame
» Example 6 : Displaying a Countdown using Javascript
» Example 7 : Changing images with MouseOver and MouseOut events
» Example 8 : Checking the form contents before submitting the form
» Example 9 : Filling the values of a dropdown SelectMenu depending on the selection in another Menu
|
