Adding Background Image To Button

June 25, 2024 Post a Comment

I want an arrow pointing down on my button, autoscaled and using the links I have uploaded on Imgur but it's not working. I have an if else statement, with unicode icons it works b

Solution 1:

You are targeting the html in your jquery $(this).html you have to target the correct attribute. I.e. the css of the button: $(this).css

var toggled = false;
$("button").click(function() {
    if (!toggled) {
        $(this).css( "background", "url(http://i.imgur.com/Q2sj6XQ.png)" );
        toggled = true;
    } else {
        $(this).css("background", "url(http://i.imgur.com/GKVoeGr.png)");
        toggled = false;
    }

    $("p").slideToggle();
})

Check out fiddle for example: https://jsfiddle.net/krvct8Lg/

Edit: I added some further readings for you: http://api.jquery.com/html/ and http://api.jquery.com/css/

Solution 2:

The following line in your code :

$(this).html("http://i.imgur.com/Q2sj6XQ.png");

will try to add an url as string in your buttons inner html.

Use the following:

$(this).css( "background-image", "url(http://i.imgur.com/Q2sj6XQ.png)" );

This will change the background image url of your buttons css styles.

Solution 3:

Add $(this).html("<img src='http://i.imgur.com/Q2sj6XQ.png'/>") as if you need as a html element or use $(this).css("background","url(http://i.imgur.com/Q2sj6XQ.png)") if need image in background.

Solution 4:

var toggled = false;
$("button").click(function() {
  if (!toggled) {
    $(this).css('background', 'url("http://i.imgur.com/Q2sj6XQ.png") no-repeat 3px 5px');
    toggled = true;
  } else {
    $(this).css('background', 'url("http://i.imgur.com/GKVoeGr.png") no-repeat 3px 5px');
    toggled = false;
  }

  $("p").slideToggle();
})

.button {
  background: url("http://i.imgur.com/GKVoeGr.png") no-repeat 3px5px;
}

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><buttonstyle="width: 250px; height: 100px;"class="button"></button><p><i>Content die weer te geven is bij het klikken van de knop.</i></p>

To set background is like $(this).css('background','url("http://i.imgur.com/GKVoeGr.png") no-repeat 3px 5px');

Solution 5:

Your code is setting the html of the button to be the string of the image url, effectively setting the text on the button. The reason this works for unicode icons and not for images is that a unicode icon is added in the text inside the element, whereas a background image is part of the element.

To get the result you want with images, I'd suggest changing to use an additional class to apply the alternate background image:

.button {
  background: url("http://i.imgur.com/GKVoeGr.png") no-repeat 3px5px;
}
.button.toggled {
  background-image: url("http://i.imgur.com/Q2sj6XQ.png");
}

And then changing the javascript to be:

var toggled = false;
$("button").click(function() {
  if (!toggled) {
    $(this).addClass('toggled')
    toggled = true
  } else {
    $(this).removeClass('toggled')
    toggled = false
  }
  $("p").slideToggle();
})

This adds/removes the 'toggled' class and achieves the same result you were expecting using html

You could also simplify the code and use the toggleClass function of jquery:

$("button").click(function() {
  $(this).toggleClass('toggled')
  $("p").slideToggle();
})

This removes the need for the 'toggled' variable.

Html5 Info