Question

I tried to change the image src of ImageButton using jQuery then it fails to change the background.

I have tried below script or that:

$(document).ready(function () 
 {
    $('#<%=imageButtonId.ClientID%>').click(function () 
    {

            $('#<%=imageButtonId.ClientID%>').attr("src", "mobile/images/writelogbook_icon.png");

     });
});

I have also tried object.css(“backgroundImage”,”path”);
But, this also fails.
Please suggest me. I am using jquery 1.4.4 min

Edit:
Relavent code from html:

<input type="image" name="imageButtonId" id="imageButtonId" src="Images/admin.png" />



   $('#imageButtonId).click(function () {
$(this).attr('background-image', 'Images/customer.png');        });

Thanks,

Naresh Goradara

Answer 1

You should try this:

<asp:ImageButton ID="imageButtonId" runat="server" src="Images/admin.png"> 
</asp:ImageButton>
<script type="text/javascript">
    $(document).ready(function () {
        $('#<%=imageButtonId.ClientID%>').click(function (e) {

            $('#<%=imageButtonId.ClientID%>').attr("src", "Images/customer.png");
            e.preventDefault();
        });
    });
</script>

This works fine in my test-project. Just remember the e.preventDefault, and also passing in e in the click-function. This causes the Image-button to not post back to the server, hence refreshing the page.

If the page refreshes, the imagebutton will have its original image again.