Set an image as background clicking on its thumbnail

[Margalus]

Hi there!

I have a problem i've tried to solve since the past four days and still can't make my mind about it.
I have a photographic page that only includes a header, a full-screen background image(now in the CSS) and a slider with thumbnails of the photos in the gallery. When the user clicks on one thumbnail the corresponding image should be set as the background image for the page, and of course to do that i have a little thumbnail and a compressed big image for every single shot.

I really can't get how i should do this. Note that if i change it, then go to another page and come back it can reset so i don't need cookies and stuff, i just need the images to change accordingly to the one the user selects.
Also, i have the image in "background-image" in the CSS but i can move it to the html if it's a problem to keep it there.

Any tips on how i should do it?

This is a quickly-drawn layout to explain the elements:

A) header, which is DONE
B) 100% resizing bg image, which is DONE
C) slider with the thumbnails that changes the B point which HAS TO BE DONE

[jscheuer1]

In about the simplest terms (this sort of thing can be done much more elegantly, like for all thumbnails without having to give each one an onclick event):

<a href="pathto/largerimage.jpg" onclick="document.body.style.backgroundImage = 'url(' + this.href + ')'; return false;">
<img src="pathto/thumbnail.jpg"></a>

I don't know what your slider is like, whether or not you can put that code in it. Oh, and if it's not the body whose background needs to be changed you could use like:

document.getElementById('id_for_B_area')

instead of:

document.body

in the above.

If you want more help, please include a link to the page on your site that contains the problematic code so we can check it out.

[Margalus]

Thanks for the quick reply! I'll try to use this code now and see if i can get it to work