CODEWITHSUNDEEP
jqueryhtmlcss
Hashey100
Hashey100

Reputation: 984

Trying to add onclick function to input button

Basically i have a button for which i am trying to make the background change when the user clicks on it.

I know how to do it but i need to use it in a img tag, but it is not working - when i click the button it does not load the image onto it

any help would be appreciated

HTML

<img class="statusYes" src="Buttons/Button-Yes.png" ></img>

jQuery

$(".statusYes").click(function () {
    $(this).css('background-image', 'url(Buttons/Button-No.png)');
});

Upvotes: 0

Views: 114

Answers (4)

Razvan Pocaznoi
Razvan Pocaznoi

Reputation: 409

the problem is that in your markup you put <img src="..."> and then in the jQuery you try to put a new background to the img element via CSS which is done correctly by the browser, but not shown because it is drawn under the image you put in the src attribute.

you should try:

$(".statusYes").click(function () {
    $(this).attr('src', 'Buttons/Button-No.png');
});

Upvotes: 1

David Thomas
David Thomas

Reputation: 253318

I'd suggest (given that you appear to be trying to toggle the yes/no options:

$(".status").click(function() {  
    $(this).prop("src",function (i,s){
        return "Buttons/Button-" + (s.indexOf('-No') > -1 ? 'Yes' : 'No') + '.png';
    });
});

This approach, obviously, adjusts the selector, leaving the 'status' to be determined by the current URL of the src property.

Upvotes: 0

Lauri Elias
Lauri Elias

Reputation: 1299

Try something like this:

$(".statusYes").click(function() {  
   $(this).prop("src","Buttons/Button-No.png"); 
});

Upvotes: 6

Legionar
Legionar

Reputation: 7597

$(".statusYes").click(function(){  
  $(this).css('background', 'url("Buttons/Button-No.png")'); 
});

Upvotes: 0

Related Questions