| Run your Mouse over the Images below. |
 |
| Copy the Images below if you want to practice. |
 
|
| Run your Mouse over the Images below. |
|
|
| Copy the Images below if you want to practice. |
|
|
For those of you trying this for the first time, here are a couple of pointers. Be sure to have two images available, both of them exactly the same dimensions, if not, the onMouseOver will be jerky in motion and hardly worth the effort put into this.
One of these images should have the look of being "on", be it brighter or more colorful. You may use the images provided on this page to practice with then set out to look for images that fit with your particular color scheme.
I've added a couple of lines of text that appear in the Status Line below, check how they change according to if your mouse is over the image or off the image. It's in the onMouseOver code that makes this little trick happen.
The following is the code that you will highlight and paste into the <head> of your document. Change the name of the image files to your own file names and add as many onMouseOvers as you wish. Each new onMouseOver will have a different image name, mine are named image1 and image2, this is certainly an easy way to keep track of the different onMouseOver files. To practice with this code, copy the four images above as well as the script, it might make learning how to do this a little easier.
The following is the code that you will highlight and paste into the <body> of your document, in the area you wish to place the image onMouseOver. Change the name of the image files to your own file names and adjust the window.status text to your liking. You will have to add a URL or HTML file to the <a href=" " section if you expect to hyperlink to another Web page on the Internet. Please note that the image that you load first on the page is the image that is "turned-off" so that when you run the mouse over the image it appears to be "turned-on".
Return to Profal2 Miscellaneous DHTML