Share button for image (jQuery)

Question

I have a button, and when she clicked, I want to replace the button with an image. How can I do this in jQuery? Is it possible to replace the background of the image? The button itself is located inside a large div, and I do not want to add another div around the button, because this will ruin the previous layout.

Answer 1

If you want to replace the button element:

$('the-button').bind('click', function () { $(this).replaceWith('<img src="/wherever.jpg"/>'); }); 

If you want to change the background image of the button:

 $('the-button').bind('click', function () { $(this).css('backgroundImage', 'url(\'/wherever.jpg\')'); }); 

If you want to change the background image of the image (: S):

 $('the-button').bind('click', function () { $(this).replaceWith('<img src="/wherever.jpg" style="background-image:url(\'/somewhere-else.jpg\');"/>'); }); 

Answer 2

I'm not quite sure what you want to do when you click the button, but:

 $('button').click(function() { $(this).css({ // properties you want to change }); }); 

Gotta do the trick.