In this program to change html element attribute value using jquery. The main html code is as such.
<html>
<body>
<h1 class="h1">I am sad when you leave me alone</h1>
<br>
<img id="pic" src="sad.jpg" height="100" width="100">
</body>
</html>
And here is the jquery code. I have used id value for img and h1 tag for h1. There are 2 events one is mouseenter and another is mouseleave, on changing from mouseenter to mouseleave and viseversa theimage changes. Just follow the code.
$(document).ready(function() {
$(".h1").mouseenter(function() {
$("#pic").attr("src","happy.jpg");
});
$(".h1").mouseleave(function() {
$("#pic").attr("src","sad.jpg");
});
});
Here is the demo for this code. Move your mouse over the Header text below.
I am sad when you leave me alone
No comments:
Post a Comment