>phone:205.585.8879 >>fax:205.733.8879
>>>address:4641 Summit Cove Hoover, Al 35226
 
home
about us
products
services
links
bookmark us
email us
 
 
Webboy Speaks

Every once in a while the resident Web expert spouts a couple of words that could actually be construed as sensible, and since it is such a shock to us at InfoSmart Inc. we post them. We thought this would be a good forum, so check back for new utterings every other week or so. Enjoy.

Silly MouseOver Tricks

 

If you have ever wondered how on various web pages images change, or appear when you hover over them with your mouse, this article's for you. The MouseOver effect is created very simply by swapping out two images using Javascript(or VBScript if you prefer...I will be using JavaScript in this example). What you'll need to create a MouseOver effect is two images you want to swap(one for when the pointer is on the object, and one for when it is not), a swapping function, and to call the swapping function in your HTML when a onMouseOver event is fired.

Part I
<script language=javascript type="text/javascript">
<!--

//active image
arrowOn = new Image();(120,50)
arrowOn.src = "images/arrow.gif";
//default image
image arrowOff = new Image();(120,50)
arrowOff.src = "images/arrowOff.gif";
function MouseOver(x, y) {document.images[x].src=eval(y+'.src');}
function MouseOut(x, y) {document.images[x].src=eval(y+'.src');}

// -->
</script>
Whats going on here is I define two images inside of javascript tags, one for the "on" image and one for the "off" image. The functions MouseOver and MouseOut are essentially the same except for the parameters you pass it...I only am showing it this way in this example for clarity. You could simply use one function with the parameters swapped if you wish. What the function does is it relates the document.images[x].src, which is the image that is currently displayed, to a new source file by evaluating the 'y'(name of the new image) with the .src object.

Part II
All that is needed now is to call the function needed somewhere in your HTML like the following.
<tr>
  <td width="148%" class="contents" height="25">
  <a href="index.htm" onmouseout="MouseOut('a1','arrowOff');return    true" onmouseover="MouseOver('a1','arrowOn');">home</a></td>
  <td width="52%" height="21"><IMG align =middle border=0   height=15 name=a1 src="images/arrowOff.gif" width=14 >
  </td>
</tr>
What is going on here is you have an <a> tag that when it has an onmouseover event fired, "MouseOver" is called and the name of the two images to be swapped are passed in. The first is the name of the image you wish to change, and the second is what you want it to be changed to. For additional info on Mouseovers check out this article at Microsoft. It is rather good, and more extensive than the cursory introduction I have just given. Happy coding, and come back and visit us again as more tips will be added soon.

 

IS QuikTip
to view a couple of simple time saving keyboard shortcuts.
Coop's Corner
for pearls of wisdom on hardware matters from Coop's Corner.
Online Antivirus Utilities
for Panda Software's online Antivirus Utilities.
Click for the BBB Business Review of this Computers - Sys Designers & Consult in Birmingham AL
For questions, comments or concerns email the
Copyright InfoSmart 2013