JS onMouseOvers

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.

Highlight all the code in the textbox below and paste it 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.

Select All
<script language="JavaScript" type="text/javascript"> // Hide from old browsers var browser=false; if(document.images) browser=true; if (browser){ image1on = new Image(); image1on.src = "bulb_on.gif"; image1off = new Image(); image1off.src = "bulb_off.gif"; image2on = new Image(); image2on.src = "bluelight_on.jpg"; image2off = new Image(); image2off.src = "bluelight_off.jpg"; // add more objects above this line } function img_act(imgName) { if (browser) { imgOn = eval(imgName + "on.src"); document [imgName].src = imgOn; } } function img_inact(imgName) { if (browser) { imgOff = eval(imgName + "off.src"); document [imgName].src = imgOff; } } // End of JavaScript </script>

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".

Select All
<span><a href="#" onmouseover="img_act('image1'), window.status='Hey, down here! Check out this idea!'; return true" onmouseout="img_inact('image1'), window.status='Oh, never mind!'; return true"> <img src="images/bulb_off.gif" alt="Hey, check out this idea!" name="image1" width="129" height="127" border="0" id="image1" /></a> <a href="#" onmouseover="img_act('image2'), window.status='Hey you, down here! This is another idea!'; return true" onmouseout="img_inact('image2'), window.status='Yeah right, ignore me down here!'; return true"> <img src="images/bluelight_off.jpg" alt="Hey you, this is another idea!" name="image2" width="100" height="29" hspace="8" vspace="12" border="0" id="image2" /></a> </span>

Return to the JavaScript Menu page here.

 

---

Copyright © 2001-2011 Professor Al   al.fichera@gmail.com
Page Last Updated on: June 8, 2011