CODEWITHSUNDEEP
jqueryimagebuttonswap
Skoder
Skoder

Reputation: 4053

Swap button for image (Jquery)

I have a button and when it's 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 as well? The button itself is within a large div, and I don't want to add another div around the button because it messes up a previous layout.

Upvotes: 4

Views: 5346

Answers (2)

jps
jps

Reputation: 11597

I am not exactly sure what you want to do when the button is clicked, but:

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

Should do the trick.

Upvotes: 0

Matt
Matt

Reputation: 75317

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

Upvotes: 8

Related Questions