Javascript Change Image onmouseover
Javascript document object provides the method to access the HTML element such as image <img> HTML tag through its id attribute value that can be used to change the image by raising the onmouseover event of <img> tag. You can access the src attribute/property of <img> HTML tag and change the source image dynamically onmouseover event. You can also use the onmouseout event of <img> tag to set back the initial image when user moves the mouse out of the boundary of image element. getElementId method of Javascript document object allows you to access the src arttribute to get or set the URL location of the image for HTML <img> tag.
JavaScript DOM Examples:
You can see the live samples and examples of JavaScript DOM from the following links:
Syntax of Javascript to change the Src Image onmouseover
document.getElementById("id").src = "url Value";
src property can get or set the value only for the <img> HTML tag. You have to pass the id attribute value of <img> tag to access the src property through Javascript and set the source image dynamically to show the image rollover effect.
Example of Javascript Change Image onmouseover
<html>
<head>
<title>Javascript Change Image Onmouseover</title>
<style type="text/css">
p {
font-family: Verdana;
font-weight: bold;
font-size: 11px;
}
img {
cursor: pointer;
}
</style>
<script language="javascript" type="text/javascript">
<![CDATA[
function mouseOverImage() {
document.getElementById("img1").src = "images/green.gif";
}
function mouseOutImage() {
document.getElementById("img1").src = "images/blue.gif";
}
]]>
</script>
</head>
<body>
<p>
This Javascript Example will change the image of<br />
HTML image Tag onmouseover event.</p>
<center>
<img id="img1"
src="images/blue.gif"
alt="image rollover"
onmouseover="mouseOverImage()"
onmouseout="mouseOutImage()" />
</center>
</body>
</html>
Above example code shows the use of onmouseover and onmouseout events of img tag. onmouseover event calls the client end javascript when user moves the mouse pointer over the image element within its boundaries. When user moves the mouse pointer outside the boundary of image <img> tag, the onmouseout event fires the specified client side javascript function. Also CSS selector rule style for <img> tag cursor CSS style with value "pointer" is used to display the Hand cursor when user moves the mouse over the image.
Output:
You can see the output of above discussed codes from the following link:
Continue to next tutorial: Javascript Change Link Text Color onmouseover to learn how to rollover the font color of Hyperlink text using JavaScript DOM style properties.
This is the shortest and simplest way to do that.
I hope this helps.
