How to change a link image on mouse over on jquery_问答_开发者

How to change a link image on mouse over on jquery

开发者 https://www.devze.com 2023-01-05 19:18 出处：网络

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.

相关专题：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>

开发者_Go百科

Thanks in advance.

You are referencing #lnkEdit in your code but there is no element with that ID on the page
You don't need replace or 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');
    });
  });

});