How to Change the Image onMouseOver

Javascript Change Image onMouseOver

Published by: San (9/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
It’s 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:

 

Most Popular Articles

• Sending Email from JSP Pages Using smtp.gmail.com
• How to Configure 404 Error or Page not Found on Tomcat
• JSP Web Services Example - XML, XSLT in JSP - XML Web Services in Java
• How to Change the Image onMouseOver
• How to Email from JSP Page?

Javascript Confirm Function Issues with IE6 >>

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