Forums

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

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:


<div id=\"backgrounds\">
    <a id=\"style1\">Style 1</a>
    <a id=\"style2\">Style 2</a>
    <a id=\"style3\">Style 3</a>
</div>

And the Jquery to change the background:

$(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)\" });
	});		
});

treehouse : what would you like to learn today?

Forums

Changeable Background Image