div onclick功能可以改变身体背景图像

Question

I want a small picture that acts like a button, to be click-able with a function to change the body background-image. I am a total newbie and I'm trying to learn. The most simple way, I thought, would be to have a div with a background-image . I have to use unsemantic grid, also.

So I pretty much only have the div with a background image. How do I write this function? I'm sure it's really easy and I've read like 20 threads here but none of them were useful for 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> 

Answer 1

Add cursor on the div to appear clickable

   #knapp {
      cursor: pointer;
   }

You could put the new background-image in a new css rule

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

This is body with the old background-image

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

and with jquery just add/toggle the class by doing something like that (in $(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
});

This is a cleaner approach compared to all the other answers as it separates presentation (css), structure (html) and behavior (javascript). This is because it doesn't use JavaScript to change style directly. Also it doesn't pollute html with onclick which is also a bad practice.

Here is a plunkr: https://plnkr.co/edit/aiGZmvvi6WWGFs7E9xTp

and here is one with a circular collection of backgrounds (thanks to Kai's idea) https://plnkr.co/edit/0djmmNM9OOTdfYyvLvUH?p=preview

Answer 2

1. Create a button with onclick attribute with a function name like replace .

2. Defined the function in your script like:
   

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

Explanation:

You set the style property of the body (using document.body object) to other background-image .

If something is not clear, I will happy to explain.

Working example:

 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> 

Answer 3

If I understand the question, you should be able to create a variable in jQuery which is an array of all the string versions of your image urls that you want to use:

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

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

Like that.

Then you can make a counter variable:

var counter = 0;

and set it to zero.

Next, add the event listener on() to your div like this:

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



});

Finally, inside your event listener, change the CSS background-image property of the div to one of your images in the array:

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

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

});

I hope this helped! Also, remember to increment counter

EDIT ----------------------------------------------------------------

OK, so I totally jumped over something obvious which is the fact that the counter might go too high and access something out of scope. To prevent this add the following inside of your on() listener:

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

    counter = 0;

}

EDIT 2 --------------------------------------------------------------

Ok, so I didn't know what exactly you were asking at first, so here is my second answer. Since it seems like what you are actually trying to do is only switch the background image once on click, then you could use something like this:

$(document).ready(function(){

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

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

});

});

or you could have it toggle between two images by making two identical classes in CSS (except for the background image) and replacing one with the other using .addClass and .removeClass .

EDIT 3---------------------------------------------------------------

I never thought I would edit this post this many times, but apparently I missed that the body background image should be changed (thanks to comments). My bad and thanks for pointing it out (even if you were talking to someone else).

Answer 4

This may help you...

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

Answer 5

Try using onclick at div#knapp element , set document.body.style.background to url of image file

 #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> 

Answer 6

here is a simple way in 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> 

Here i will explain the code. The jQuery syntax is tailor made for selecting HTML elements and performing some action on the element(s).

Basic syntax is: $(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".

Here is what happen in the code.

1.

$(document).ready(function(){

   // jQuery methods go here...

}); 

This is to prevent any jQuery code from running before the document is finished loading (is ready).It is good practice to wait for the document to be fully loaded and ready before working with it. This also allows you to have your JavaScript code before the body of your document, in the head section.

2

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

getting the body element of your html and set its background-image with .css() action. which i gave it more one action

3

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

this is where the change takes place. i got the div to be clicked by $('div') and first gave it an action of changing the mouse to cursor to indicate its clickable and then gave it the click function, where our background-image get changed on click