Changeable Background Image

[sophies]

Hi,

I’m wondering if it would be possible to have the background image change when the user clicks a link. (Nothing else, just the background)

The best example I can find is here: http://www.isaacmizrahiny.com/ (click on the little square, top right, underneath where it says "shop") — however I do not need a pop down menu. I was hoping to just have a few small thumbnails floating at the top of the page of different backgrounds.

Thank you! Sorry if this is a stupid question, I’m new to all of this!

-Sophie

http://www.sophieshepherd.com

[matt25]

Try using jQuery, Chris has a tutorial on the basics here and a second here

The jQuery website also has lots of tutorials (just search jQuery)
I hope that helps

[chazzwick]

Jquery is a good bet. In your html put:

Code:

Style 1
Style 2
Style 3

And the Jquery to change the background:

Code:

$(document).ready(function() {

$(“a#style1”).click(function(){
$(‘body’).css({ backgroundImage : “url(images/bg1.jpg)” });
});
$(“a#style2”).click(function(){
$(‘body’).css({ backgroundImage : “url(images/bg2.jpg)” });
});
$(“a#style3”).click(function(){
$(‘body’).css({ backgroundImage : “url(images/bg3.jpg)” });
});
});

[Author]

Posts