Change image src of imagebutton using jquery 1.4.4

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

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.

It's difficult to tell from your question. A few things to try:

1. Look at your HTML source on the generated page. What is <%=imageButtonId.ClientID%> rendered as?
2. Alert $('#<%=imageButtonId.ClientID%>').length. What do you get?
3. Personally, I wouldn't have the second $('#<%=imageButtonId.ClientID%>'). Use $(this) instead.

You could try posting some of the rendered page (i.e. the HTML with imageButtonId and the rendered JavaScript. This will help us determine what is wrong.

What html type is #imageButtonId.ClientID? The src is used with images, not buttons (just in case you're trying this with a button). If it's a button, you must use css('background-image', path). Note the background-image - NOT camelCase.

If that still doesn't work, check the object's CSS in some dev tool like firebug, safari / chrome's developer tools, etc. Is the property changing, just not showing the image, or is nothing being set.

And like was said before, you want to use $(this).css('background-image', path);

Good luck!

Edit: Just noticed your html addition - why not just do:

$('#imageButtonID').click(function() {
   $(this).css('background-image', 'path/to/image');
});

Also unless you require the image map type functionality of type=image, I'd recommend using a styled button instead. You'd just style it with css (inline like style='background-image:path/to/image.png' or in a style sheet. Like:

<input name='imageButtonID' id='imageButtonID' style='background-image:path/to/image.png'>

Then

$('#imageButtonID').click(function() {
   $(this).css('background-image', 'path/to/newimage.png');
});

You are using a relative path. Is the path to your image correct? Try using an absolute path.