Background Switcher #2

This background switcher is the one I use on my site now. I really like it because it utilizes the entire page instead of a div, like in version #1. Here is an example:

First, you add this to your CSS stylesheet:

Then, you add this JavaScript code to the head of your page:

Finally, you use this HTML code to call on your different backgrounds:

Some notes:

  • This code is set up for background colors right now; to add your background image file replace the style=”background:Color;” with style=”background: url(‘http://path.to/yourimage.png’);”
  • You can also change the behavior of the image from onClick to onMouseover which will make the background change automatically when you drag your mouse over the little thumbnail
  • I like this version better because you only alter the HTML code