change background image on click with jquery and html5

Question

How can I do to change background image onClick with jquery or java script?

For Example: I have Six(6) images and I want change to NEXT background image when i click on ">" (next arrow) and change to previous background image when I click on "<" (back arrow).

I'm developing this website with responsive html5 and css3.

<script type="text/javascript" src="jquery-1.8.2.min.js"></script> //jquery inside the folder ok
<script type="text/javascript">                                         
var images = ['url("../images/1366x768/image-_0107.jpg")', 'url("../images/1366x768/image-_0012.jpg")'],  curIndex = 0; // here I set the images inside the desired folder

// Left arrow selector
$('.backarrow').click(function () {   //here I set the back arrow "<" 
    if (curIndex > 0) {
        // Container selector
        $('backgrounds').css('../images/1366x768/image-0061.jpg', images[--curIndex]); // here I set my file backgrounds.css and the default image configured there
    }
});

// Right arrow selector
$('.nextarrow').click(function () {
    if (curIndex < images.length - 1) {
        // Container selector
        $('backgrounds').css('../images/1366x768/image-0061.jpg', images[++curIndex]);
    }
});
</script>

<!--HTML 5 -->

<div id="square"><a href="" class="nextarrow">></a> <!-- here I call my jquery -->
</div>  
<div id="square"><a href="" class="backarrow"><</a> <!-- here I call my jquery -->
</div>

/* CSS3 */

/* backgrounds.css */

body {
    background: #dcd8d5 url(../images/1366x768/image-_0061.jpg) no-repeat center center fixed; -webkit-background-size: cover;
 -moz-background-size: cover; -o-background-size: cover; background-size: cover }

/* default.css */

.nextarrow {
    font-size:20px; color:#666; font-style:normal 
}
.backarrow {
    font-size:20px; color:#666; font-style:normal 
}

WHAT I'M DOING WRONG?

Answer 1

The error seems to be in this line:

$('backgrounds')

What exactly are you trying to select with this? If is an object with id = "backgrounds" you should use $('#backgrounds'), if it's a class you can select it by using $('.backgrounds'). The way you are using, jQuery is trying to search for an element (ie tag) named "backgrounds". (Which I'm pretty sure is not what you are trying to do)

Any way, in case you want to change the background-image from, let's say, your body element you should use something like:

$(document).ready(function() {
    $(".nextarrow").click(function(){
    {
        $('body').css("background-image","url(../images/1366x768/image-0061.jpg)"); //   Correct the path to your image
    } 

}

Alternatively, you can change the background-image from an element which id happens to be "backgrounds" using:

$('#backgrounds').css("background-image","url(../images/1366x768/image-0061.jpg)"); // Correct the path relative to the html document this script is running.

I hope it helped. Cheers

Answer 2

The jQuery approach for this is below:

$("#background").css("background-image","url(img_url_here)");

I'm not entirely sure what you are trying to select so I made a jsfiddle which will hopefully make it easier for you to figure out:

JSFiddle