Home/ Questions/Q 7734477
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-01T07:15:35+00:00

I’m having a helluva time figuring out how to accomplish this – and I’m

  • 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!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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>
    • 0