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?

Bruno Vieira · Answer 1 · 2012-10-26T20:27:44.770

0

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 (i.e. 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

edited Oct 26 '12 at 20:27

answered Oct 26 '12 at 20:06

Bruno Vieira

3,884
1
23
35

nothing happening....I'm trying to change a background-image when I click on symbol ">" and back to previous image when I click on symbol "<" This is the original example....but I can't do it work! http://stackoverflow.com/questions/13087684/change-background-image-onclick – user1777158 Oct 26 '12 at 20:21
It seems that you forgot to close your tag and open a tag. Also, put your after your body tag. Put all your functions inside the $(document).ready(function(){ //code here}); block and it should work – Bruno Vieira Oct 26 '12 at 20:47
Now it's ok, your form were preventing the click event, just changed from submit to button. Also, you were not using what I've told you, you were passing three arguments to $('body').css(), here's the fiddle corrected: http://jsfiddle.net/mNQ3R/17/ – Bruno Vieira Oct 26 '12 at 22:35
Added prevention of a overflow on your array: http://jsfiddle.net/brunovieira/mNQ3R/20/ – Bruno Vieira Oct 26 '12 at 22:45
If the answer is correct mark it as so. Otherwise Stackoverflow won't know that your problem has been solved. If an answer is useful in some way, please vote so others have more chance to spot it in case they have the same problem as yours. – Bruno Vieira Oct 26 '12 at 23:09

score 0 · Accepted Answer · answered Oct 26 '12 at 20:11

0

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

answered Oct 26 '12 at 20:11

Lennart

1,560
5
20
38

Yes, thank you, It's almost it, I need that this script select a image in a array, so when I 'click next >>' go to the next image in array, and go to previous image when I click in 'previous <<' – user1777158 Oct 26 '12 at 20:56
What's in the array, the id's of all the images or the source of the bg image? – Lennart Oct 26 '12 at 21:31
http://jsfiddle.net/mNQ3R/19/ this should work now I'm currently on my iPod so editing this was a right challenge but I think it's working – Lennart Oct 26 '12 at 22:45
Not a problem happy to help please mark an answer as correct and up vote them if you think they were helpful ;) – Lennart Oct 26 '12 at 23:16

change background image on click with jquery and html5

2 Answers2