Onclick div function to change body background image

Question

I want a small picture that acts like a button to click with the function of changing the background image of the body. I am a complete beginner and I am trying to learn. The easiest way, I thought, is to have a div with background-image. I also have to use an unearthly grid.

That way, I pretty much only have a div with a background image. How to write this function? I am sure it is very easy, and I read as 20 threads, but not one of them was useful to me.

Edit: added my code

#knapp {
  height:50px;
  width:50px;
  background-image:url(http://ingridwu.dmmdmcfatter.com/wp-content/uploads/2015/01/placeholder.png);
  background-repeat:no-repeat;
  background-size:contain;	
  position:absolute;
  top:90vh;
  right:3vw;
}

<div id="knapp" class="grid-10 prefix-90"></div>

Run codeHide result

Answer 1

Add the cursor to the div so that it can be clicked

   #knapp {
      cursor: pointer;
   }

css

body.newbg {
    background-image:url(path-to-new-background.png);
}

body {
    background-image:url(path-to-old-background.png);
}

jquery / , - ( $(document).ready()):

$('#knapp').on('click', function(){

    $('body').addClass('newbg');
    // you could instead do toggleClass if you want for each click to have background switch between old background and new background
});

, (css), (html) (javascript). , JavaScript . html onclick, .

plunkr: https://plnkr.co/edit/aiGZmvvi6WWGFs7E9xTp

( ) https://plnkr.co/edit/0djmmNM9OOTdfYyvLvUH?p=preview

Answer 2

• onclick , replace.

• script :
  

  function replace() {
     document.body.style.backgroundImage = 'url(https://lh6.ggpht.com/8mgTDZXaLMS1JsnF28Tjh6dahHwN1FqcXCVnifkfppmNLqnD-mPBuf9C1sEWhlEbA4s=w300)';  
  }
  

:

style ( document.body) background-image.

- , .

:

function replace() {
  document.body.style.backgroundImage = 'url(https://lh6.ggpht.com/8mgTDZXaLMS1JsnF28Tjh6dahHwN1FqcXCVnifkfppmNLqnD-mPBuf9C1sEWhlEbA4s=w300)';  
}

body {
  background-image: url(http://www.julienlevesque.net/preview/google-smile-preview.jpg);
}

div {
  background:blue;
  color:#fff;
  float:left;
}

<div onclick="replace()">Replace background-image</div>

Hide result

Answer 3

, jQuery, URL-, :

var images = ['../images/####','../images/$$$$', 'http://some.other/url.here];

// do this for as many images as you want to cycle through

.

:

var counter = 0;

.

on() div :

$('#knapp').on('click', function(){



});

, CSS background-image div :

// do this inside a document.ready() function
$('#knapp').on('click', function(){

    $(this).css('background-image','url("' + images[counter] + '")');
    counter++;

});

, ! , counter

------------------------------------------- ---------------------

, - , , - . , on():

if(counter >= images.length - 1){

    counter = 0;

}

2 ------------------------------------------ --------------------

, , , . , , , - :

$(document).ready(function(){

    $('#knapp').on('click', function(){

        $(this).css('background-image','url("YOUR_NEW_URL_HERE")');

});

});

, CSS ( ) .addClass .removeClass.

3 ------------------------------------------ ---------------------

, , , , , body ( ). ( - ).

Answer 4

...

$('.yourClassofDiv').click({
   $(this).css("background-image",'url("' + URLofIMAGE+ '")')
});

Answer 5

onclick div#knapp, document.body.style.background url

#knapp {
  height:50px;
  width:50px;
  background-image:url(http://lorempixel.com/50/50);
  background-repeat:no-repeat;
  background-size:contain;	
  position:absolute;
  top:90vh;
  right:3vw;
}

<div id="knapp" class="grid-10 prefix-90" onclick="document.body.style.background = 'url(http://lorempixel.com/'+ window.innerWidth + '/'+ window.innerHeight +') no-repeat'"></div>

Hide result

Answer 6

jQuery

$(document).ready(function() {
  $("body").css('background-image', 'url(http://julienlevesque.net/Requiem/images/detail-requiem.jpg)').css('background-repeat', 'no-repeat');
  $('div').css('cursor', 'pointer').click(function() {
        $("body").css('background-image', 'url(http://julienlevesque.net/Requiem/images/Requiem-Julien-Levesque.jpg)');
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<body>
  <div style="background-color:yellow">Click Here to change background Image</div>
</body>

Hide result

. jQuery HTML (-).

: $(selector).action()

A $ sign to define/access jQuery
A (selector) to "query (or find)" HTML elements
A jQuery action() to be performed on the element(s)

$(this).hide() - hides the current element.

$("p").hide() - hides all <p> elements.

$(".test").hide() - hides all elements with class="test".

$("#test").hide() - hides the element with id="test".

.

1.

$(document).ready(function(){

   // jQuery methods go here...

}); 

jQuery- , (). - , . JavaScript .

2

$("body").css('background-image', 'url(http://julienlevesque.net/Requiem/images/detail-requiem.jpg)').css('background-repeat', 'no-repeat');

body html .css().

3

$('div').css('cursor', 'pointer').click(function() {
        $("body").css('background-image', 'url(http://julienlevesque.net/Requiem/images/Requiem-Julien-Levesque.jpg)');
    });

there is a change. I got it divboth clickedon $('div')and first gave it the action of changing the mouse on the cursor to indicate its clickability, and then gave it a click function, where our background image changed when clicked