JavaScript onMouseover, JavaScript Tutorial, Global Guide Line Technology.
Bookmark Bookmark: JavaScript onMouseover, JavaScript Tutorial Forum | Directory | Blog |

      Home                    

Basic JavaScript Guide.
 JScript Introduction.            
 JScript Why?                       
 JScript Recognitions.          
 JScript onMouseover.
 JScript with Buttons.           
 JScript Alerts.                     
 JScript Variables.               
 JScript Operators.               
 JScript Functions.               
 JScript Prompts.                 
 JScript Conditions.             
 JScript Validations.            
 JScript Confirmation Boxes.
 JScript Browser Detection.  
 JScript Redirection.            
 JScript on Links.                 
 JScript Switch.                    
 JScript Loops.                     
 JScript Events.                    
 JScript Exception Handling.
 JScript Reserve Characters. 
 JScript with Objects.            
 JScript Math Object.           
 JScript using Dates.             
 JScript using String.            
 JScript using Arrays.            
 JScript Operations.              
 JScript Handling Cookies.   
 JScript in Mapping.             
 JScript Time Out.                
 JScript Summary.                


Submit your link

JavaScript Tutorial >> JavaScript onMouseover.


     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.

Hi. You wana apples, Thank you n take it...

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     
 

JavaScript Event Object Examples



[ About ] [ Contact ] [ Home ]
[ Links ] [ Site Map ] [ Services ] [ Privacy ]

Copyright 2005 -  2014 www.globalguideline.com All rights reserved. (Best viewed in IE 6.0+ or Firefox 2.0+ at 1024 * 768 or higher) 640 visitors are online now