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