CATEGORIES
Acer
AMD
Apache
Apple
ASP
Business Object
Compaq
Crystal Reports
CSS
Database
Dell
DOT NET
Fujitsu
Gateway
Google
HP
HTML
IBM
IIS
Intel
Java
Mainframe
Microsoft
Networking
Oracle
SAP
SEO
Sony
SQL Server
Testing
Tomcat
Toshiba
Ubuntu
Visual Basic
Web Hosting
Windows
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
- How to Configure 404 Error or Page not Found on Tomcat
- How to Change the Image onMouseOver
- Sending Email from JSP Pages Using smtp.gmail.com
- JSP Web Services Example - XML, XSLT in JSP - XML Web Services in Java
- How to Email from JSP Page?
Javascript Confirm Function Issues with IE6 >>
<< Sample Codes for Sending Emails from JSP Page Using Gmail
COMMENT