Background Image Slide Show

Did you know you can switch background images like a slide show?

Today, I was scanning the listings at JavaScript Source for ideas and creative stimulation, like I do sometimes. And I saw JavaScript labeled as a background slide show. In other words, the background image of the web page could be switched to different images, in sequence. It intrigued me.

A background slide show is not something I had previously thought about.

My imagination failed to come up with a reason why anyone would want such a script. Except for fun.

Which is why I tried it.

The script appeared a bit rough, and it was able to image switch only the web page body background. So I rewrote it from scratch.

Here is a working example of the new script:

The new script can provide a slide show in any HTML tag within the body tag that can publish a background image. As examples, the HTML tag could be a div, a table's td, a p paragraph tag, even the body tag itself. But only one such tag per page (unless you duplicate the JavaScript and modify it with a different function name).

To use the script, provide a unique id value for whichever HTML tag will have the background slide show. Then, specify the value of that id in the JavaScript.

The JavaScript needs to be somewhere below the slide show tag.

CSS styles can be applied to the slide show tag, just like you otherwise would to HTML tags. The example has inline styles. A stylesheet may be used, instead.

Put the HTML tag with the background slide show where you want the slide show to be. Here is the tag to reproduce the above example.

<div 
   id="testing" 
   style="text-align:center; 
      width:100px; 
      height:100px; 
      overflow:hidden; 
      border-style:dashed; 
      border-width:1px;">
<p style="margin-top:83px;">
<a 
   href="//www.willmaster.com/software/" 
   style="color:red; 
      font-size:22px; 
      letter-spacing:-1px; 
      text-decoration:none; 
      font-family:sans-serif; 
      font-weight:bold;">
software
</a>
</p>
</div>

Here is the JavaScript to reproduce the example. Put the JavaScript somewhere below the HTML tag it will affect - put it somewhere below the closing tag. If using both examples from this article, put the above div on the page first then, somewhere below that, put the JavaScript.

<script type="text/javascript">
// Background image slide show
// https://www.willmaster.com/
// Copyright 2008 Bontrager Connection, LLC

var imageArray = new Array(); // leave as is.

// Specify number of milliseconds between image switches.
var switchMilliseconds = 3000;

// Specify the id of the div or other HTML tag with the 
//   background image to switch.

var divID = 'testing';

// To add more images, continue the pattern below.

imageArray[0] = 'https://www.willmaster.com/iconimages/commercialicon.jpg';
imageArray[1] = 'https://www.willmaster.com/iconimages/multidomainicon.jpg';
imageArray[2] = 'https://www.willmaster.com/iconimages/package.jpg';
imageArray[3] = 'https://www.willmaster.com/iconimages/servicesicon.jpg';
imageArray[4] = 'https://www.willmaster.com/iconimages/secretexclusiveicon.jpg';
imageArray[5] = 'https://www.willmaster.com/iconimages/freeicon.jpg';

// No further customization needed in this JavaScript

function publishPicture(i) {
document.getElementById(divID).style.background = 'url("'+imageArray[i]+'")';
i++;
if( i > (imageArray.length - 1) ) { i = 0; }
setTimeout('publishPicture('+i+')',switchMilliseconds);
}
publishPicture(0);
</script>

The JavaScript can be customized for background image change frequency, the id value of the HTML tag for the slide show, and the images to be used in the slide show.

A note about background images: Background images are static. Animation and fades will not work. If fades or animation are required, see the Background Image Transition Slide Show article.

Comments in the JavaScript are instructions for the customizations.

It is a fun little toy. Or a tool, if you have a serious use for it.

Will Bontrager