Expanding the skill set: JavaScript and CSS Background Changer

Once again I find myself confronted with having to use Javascript for a project. This time a dynamic background changer was needed (aka skin toggle). Using my feeble JavaScript Skills and a bit of copy and pasting I manage to put together a working template.

Here is an example. You can change the background of this site by clicking on the following thumnails:

How it works:
Firstly the background images are created/selected and placed in a folder together. Next name them the same with a just changing a number/letter/word at the end that. I recommend numbering them sequentially.

In an image editor crop small area of the image you will use as a button for it. You can of course use text buttons instead. In this case I have chosen to make the area around the buttons to change background to match the background image. If you want this effect then crop the large background images into smaller ones that match the size of the area you want to skin. Name the small background images the same as their larger counterparts adding a letter/number to the end. In the example I have used letter ‘a’.

Now your images are prepared start a new html document. In the head insert this javascript:

<script type="text/javascript">
function swapSkin(imgname) {
parent.document.body.style.backgroundPosition=”top center”;
parent.document.body.style.backgroundAttachment=”fixed”;
parent.document.body.style.backgroundRepeat=”no-repeat”;
url=”url(’../imageadds/bg”+imgname+”.jpg’)”;
urla=”url(’../imageadds/bg”+imgname+”a.jpg’)”;
parent.document.body.style.backgroundImage=url;
document.getElementById(’swapperheader’).style.backgroundImage=urla;
}
</script>

Replace the “../imageadds/bg” with the url of your background images folder. If they are not jpgs the change the extention too. If you did not use the letter ‘a’ after the filenames for your small backgrounds change this too.

Next the HTML. Here I have used inline styles so it will be easy for you to copy and paste and for me to use in an iframe.

<div id="swapperjobber" style="width: 460px; height: 200px; margin-top: 0; margin-right: auto; margin-bottom: 0px; margin-left: auto; overflow: hidden; background-image: url(../imageadds/bg11a.jpg);background-repeat: no-repeat; background-position: top center; background: transparent;">
<div id=”swapperheader” style=”height: 200px; width: 460px;”>
<div class=”links” style=”width: 435px; height: 50px; position: relative; top: 74px; left: 20px;”>
<a xhref=”javascript:swapSkin(’1′);” mce_href=”javascript:swapSkin(’1′);”><img xsrc=”../imageadds/but1.jpg” mce_src=”../imageadds/but1.jpg” style=”margin: 0 4px 0 0; width: 75px; height: 50px; border: 1px solid red;” /></a>
<a xhref=”javascript:swapSkin(’2′);” mce_href=”javascript:swapSkin(’2′);”><img xsrc=”../imageadds/but2.jpg” mce_src=”../imageadds/but2.jpg” style=”margin: 0 4px 0 0; width: 75px; height: 50px; border: 1px solid red;” /></a>
<a xhref=”javascript:swapSkin(’3′);” mce_href=”javascript:swapSkin(’3′);”><img xsrc=”../imageadds/but3.jpg” mce_src=”../imageadds/but3.jpg” style=”margin: 0 4px 0 0; width: 75px; height: 50px; border: 1px solid red;” /></a>
<a xhref=”javascript:swapSkin(’4′);” mce_href=”javascript:swapSkin(’4′);”><img xsrc=”../imageadds/but4.jpg” mce_src=”../imageadds/but4.jpg” style=”margin: 0 4px 0 0; width: 75px; height: 50px; border: 1px solid red;” /></a>
<a xhref=”javascript:swapSkin(’5′);” mce_href=”javascript:swapSkin(’5′);”><img xsrc=”../imageadds/but5.jpg” mce_src=”../imageadds/but5.jpg” style=”margin: 0 4px 0 0; width: 75px; height: 50px; border: 1px solid red;” /></a>
</div>
</div>
</div>

Notice the area that is to have it’s background changed is called ’swapperheader’ as referenced by the javascript. If you want to name the div differently then change the javascript too. Also change the url of the buttons to match where you have your buttons. Note the links are javascript and they assign a value to the “swapSkin” function. This in turn sets the background image url.

Give it a try and if you get stuck your welcome to comment and I will help out where possible.

If comepleted successfully you can embed the html into any page or save it as a separate page and call it via an iframe as I have done in this example.

For more Semantic mark up you can have the javascript in a separate file and call that in. If you are finding your background changes sluggish you can chose to preload the images.

Next in this series I will be looking at CSS Transparencies…