Text Mouse Over Effects

[Total: 0    Average: 0/5]

This shows how to have plain text mouse over and out effects.

Head Code:

<style type="text/css">
 DIV{ 
    border-width : 1 ;
    border-style : solid ;
    border-color : blue ;
}
</style>

Body Code:

<img src="http://www.js-examples.com/js/pic1.gif" name=i1>
<BR><BR>
<a href="#" onmouseover="onIt()">HREF onmouseover</a>
<BR><BR>
<a href="#" onmouseout="outIt()">HREF onmouseout</a>
<BR><BR>
<a onmouseover="onIt()">HREF onmouseover (IE only)</a>
<BR><BR>
<a onmouseout="outIt()">HREF onmouseout (IE only)</a>
<BR><BR>
<div onmouseover="onIt()">
DIV onmouseover (IE only)
</div>
<BR><BR>
<div onmouseout="outIt()">
DIV onmouseout (IE only)
</div>
<BR><BR>
<layer onmouseover="onIt()">
LAYER onmoouseover (NS only)
</layer>
<BR><BR>
<layer onmouseout="outIt()">
<div onmouseout="outIt()">
DIV/LAYER combo (both IE and NS)
</div>
</layer>
<script>
function onIt() {
document.i1.src="http://www.js-examples.com/js/pic2.gif";
}
function outIt() {
document.i1.src="http://www.js-examples.com/js/pic1.gif";
}
</script>

Times Viewed: 1

Leave a Reply

Your email address will not be published. Required fields are marked *