|
Back
Next
JavaScript Tutorial guide us how to focus on mouse functions in JavaScript. In JavaScript some
times we need to change the mouse icon on some areas or we need to change the
picture while mouse comes over it like on some web pages we see that while we
click on any image button then its image change and when mouse comes over the image
away
then its shape comes to its original picture. Let me explain with its out
put and code step by step.
Example of OnMouseOver and OnMouseOut in JavaScript
<img border="0" id="imgGGL" src="ggl.gif" width="198" height="202"
onmouseover="changeImage()"
onmouseout="backImage()">
<script lang="text/javascript">
<!--
function changeImage(){
document.imgGGL.src="thank_you.jpg";
}
function backImage(){
document.imgGGL.src="ggl.gif";
}
-->
</script>
On the above code we use a simple image with its JavaScript event of onmouseover and by
this JavaScript event we call our own changeImage() JavaScript function that will change
its image source and secondly we used onmouseout JavaScript Function. This will
accrue when we will get out the mouse form the image and then we make a function
of backImage() this will make the original image on its past location.
JavaScript Tutorial explains us now some more JavaScript OnMouseOver and
OnMouseOut examples.
Example of JavaScript Alert using OnMouseOver event.
<img border="0" id="imgGGL" src="ggl.gif" width="100" height="100" onmouseover="alert('
Hello you are so sweet at JavaScript Tutorial..... ')">
Back
Next
| 
Home 
