Question

so here is my question:

lets say I have a page with 3 buttons. each contains a unique pattern as as background. I want to change the entire page background image once I click/ hover on one of the buttons.

what I need is something similar to http://subtlepatterns.com/
I dont need a stop preview option, as long as the background image change again when I select a different button.

how can I do that?

also, if its not possible, this will also work for me:
change the color of a DIV (instead of the entire page background) whenever I click/ hover on one of the buttons.

Answer 1

have 3 different body class in ur CSS sheet:

body.class1 {
background: ...;
}

body.class2 {
background: ...;
}

body.class3 {
background: ...;
}

use jQuery to dynamic change body class

$("#btn1").click(function() {
 $('body').removeClass();
 $('body').addClass('class1');
});

$("#btn2").click(function() {
 $('body').removeClass();
 $('body').addClass('class2');
});

$("#btn3").click(function() {
 $('body').removeClass();
 $('body').addClass('class3');
});

then finally put a id in each button to jQuery find this in DOM:

<a id="btn1">bg1</a>
<a id="btn2">bg2</a>
<a id="btn3">bg3</a>