How to change a link image on mouse over on jquery
I need to change a link image on mouse hover. I used the following code but does not work. Perhaps the problem is with the image source but I still cannot find what's wrong with he code.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>Edit Document</title>
<script src="../Scripts/jquery-1.3.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#lnkEdit").hover(
function () {
this.src = this.src.replace("../images/edit_off.gif", "../images/edit_on.png");
},
function () {
this.src = this.src.replace("../images/edit_on.png", "../images/edit_off.gif");
}
);
});
</script>
</head>
<body>
<form method="post" action="Hover4.aspx" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUJNTkwNjIyODQxZGR6kotcsbIsWRfokZrzasCtfPi0dxz4MBWWh9VxSJ6R0Q==" />
</div>
<div>
<a id="HyperLink1" href="Hover4.aspx"><img src="../images/edit_off.gif" alt="HyperLink" /></a>
</div>
</form>
Thanks in advance.
- You are referencing
#lnkEditin your code but there is no element with that ID on the page - You don't need
replaceor any special functions, you can simply assign the new image source.
Try something like this:
JavaScript (updated as per comments)
$(document).ready(function () {
$('#your_table_id > a').hover(
function () {
$('img', this).attr('src', '../images/edit_on.png');
},
function () {
$('img', this).attr('src', '../images/edit_off.png');
}
);
});
credits must go to @casablanca, this should work:
$(document).ready(function () {
$.each($('#your_table_id > a'), functio(i, item) {
$(item).hover(
function () {
$('img', this).attr('src', '../images/edit_on.png');
},
function () {
$('img', this).attr('src', '../images/edit_off.png');
});
});
});
加载中,请稍侯......
精彩评论