ansaurus

Question

How to change a link image on mouse over on jquery

Answer 1

+3 A:

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');
    }
  );
});

casablanca 2010-07-03 02:37:23

Yes, you are right. I overlooked item 1.I used your code but still does not work change on hover.

NinjaCoder8 2010-07-03 03:49:16

I'm sorry, I missed the `#` for `MyImage`. It's fixed now.

casablanca 2010-07-03 04:01:27

Thanks for the code. It works if I use an image button but still does not work with the hyperlink. The hyperlink runs on the server side <asp:HyperLink ID="HyperLink1" runat="server" ImageUrl="~/images/Edit_Off.gif">HyperLink</asp:HyperLink>and does not let me use the id="MyImage" because it already uses id="Hyperlink1"Any other suggestion?Thanks for your help.

NinjaCoder8 2010-07-06 13:44:40

I've updated the code so that it doesn't need the image ID - it directly references the `<img>` tag inside the link now.

casablanca 2010-07-06 16:00:23

Your code works. I failed to mention, however, that I wanted to have the the link on a datalist. When I use your code, it replaces the first link on the table but the other remaining links do not change when I hover over them. Sorry for not mentioning that I wanted to have a list with the links rather than just one link.

NinjaCoder8 2010-07-06 20:48:35

Updated. Just replace your table's ID in the code and it will work for all links in the table.

casablanca 2010-07-07 01:50:24

Still does not change the image. I pasted your code with the table Id: $('#ctl00_ContentPlaceHolder1_dlOpenRequests > a').hover( function() { $('img', this).attr('src', '../images/Edit_On.png'); }, function() { $('img', this).attr('src', '../images/Edit_Off.png'); });

NinjaCoder8 2010-07-07 15:13:13

I tried it myself and it works. We will have to look at your table structure to find out what might be going wrong.

casablanca 2010-07-07 17:11:21

I will post the code but might have to modify the original posted script. Is that OK with you?

NinjaCoder8 2010-07-08 20:57:57

Sure, go ahead.

casablanca 2010-07-09 00:30:04

Answer 2

A:

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');
    });
  });

});

GerManson 2010-07-07 01:52:17

You don't even need to wrap it in `each()`: most jQuery functions apply to all matched elements anyway.

casablanca 2010-07-07 02:12:14

I used the code and it does not change a single image. Below is the change: $(document).ready(function() { $.each($('#ctl00_ContentPlaceHolder1_dlOpenRequests > a'), function(i, item) { $(item).hover( function () { $('img', this).attr('src', '../images/edit_on.gif'); }, function () { $('img', this).attr('src', '../images/edit_off.gif'); }); });Thanks for the help.

NinjaCoder8 2010-07-07 12:40:23

ansaurus

tags:

views:

answers:

How to change a link image on mouse over on jquery

related questions