Fade / Change Background on a Single Webpage

Go To StackoverFlow.com

0

I'm having a helluva time figuring out how to accomplish this - and I'm surprised it isn't a more common occurance throughout the web, though I digress.

I'm building a small site that I'm trying to keep on a single page - in the end the site will live on a USB, so things should be as self-contained (file wise) as possible. Currently I've got a navigation menu (ie- Page 1, Page 2, Page 3) vertically, and when you select an link from the menu new content for that section comes up. I've got this part down - more or less - thanks to modified Coda-Slider script (See here: http://codysilfies.com/orn/).

The part I can't figure out is that in addition to changing the content when clicking a menu item, I would like to also change the backgroun. So Menu_Item_1 will show BGImage1.jpg, Menu_Item_2 - BGImage2.jpg, and so on. Something pretty much like this: http://brewfestgb.com/#!/merriment - though there are a bunch of additional features on that page...that I can't really figure out how to whittle out. There's got to be a simpler way to do it.

There are a ton of 'click a single link to change an image' tutorials around - but nothing with multiple links. I also tried using the same slider code for the background - but I can't make the image resize to the size of the browser window AND get the slider to work (it needs a set width apparently - which is workable for the content bit, but not when I want the background to resize with the browser).

Any advice...or leads? Seems to me someone should know something. Thanks in advance!

2012-04-04 01:42
by Cody S


1

You can change the background-image when the click handler is fired:

$('a.link').click(function(){
   // Find the image value
   var background = 'BGImage' + $(this).data('bg') + '.jpg';

   // Change CSS background-image
   $('body').css('background-image',background);
});

Your links would have to look something like this:

<a href="path/to/link1" class="link" data-bg="1">Link 1</a>
<a href="path/to/link2" class="link" data-bg="2">Link 2</a>
<a href="path/to/link3" class="link" data-bg="3">Link 3</a>
2012-04-04 01:47
by hohner
You're awesome. Much thanks - Cody S 2012-04-20 22:47
If this worked for you, feel free to mark it as the accepted answer : - hohner 2012-04-21 11:08