Here I will explain how to use jQuery to change image on mouseover or jQuery change image source or src on mouse over in jQuery or swap images on mouse over using jQuery.
To change
image on mouse over we need to write the code like as shown below
|
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery Change Image on Mouseover</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript">
$(function()
{
$("#imgdetails").hover(function() {
$(this).attr("src", "http://d3l2031tfshpe7.cloudfront.net/Images/Product/DRS00420A/2.jpg");
}, function()
{
$(this).attr("src", "http://d3l2031tfshpe7.cloudfront.net/Images/Product/DRS00420A/1.jpg");
});
})
</script>
</head>
<body>
<form id="form1">
<div>
<img id="imgdetails"
src="http://d3l2031tfshpe7.cloudfront.net/Images/Product/DRS00420A/1.jpg"
/>
</div>
</form>
</body>
</html>
|
0 comments:
Post a Comment