RSS feed

How to Change the Image onMouseOver

Javascript Change Image onMouseOver

Published by: San (9/21/2007)

SEP 21 2007

I have a html page where I am using a .jpg image and I want it to change to another image on mouse over. I know this uses a simple javascript to go inside the img tag and the picture keeps on changing when mouse comes over and goes out. Can any one help with a sample code to fix this problem?

Answer
Its very simple, all that you need to use onmouseover and onmouseout parameters in side the <a> tag. onmouseover points to the image it needs to load on the page when mouse is over and onmouseout loads the image back when the mouse is out. You can further use another javascript to point these images.

Code:
<a href="http://www.softcomptools.com/blog/" onMouseOver="'images/onmouseover.jpg'" onMouseOut="'images/onmouseout.jpg'" > <img src="images/onmouseout.jpg" border=0 name="rollover" alt="Mouse rollover change the image."></a>

Example:

Mouse rollover change the image.

 

Javascript Confirm Function Issues with IE6 >>

<< Sample Codes for Sending Emails from JSP Page Using Gmail

 

COMMENT

*Name:
*Comment:
You can use HTML tags here.
*Code: Please enter the sum of 5+2