Subscribe to
the Possibilities Ezine

Subscription Terms of Service
Privacy Policy

Most Recent
Software Additions

Go Short URL

Create short URLs with your own control panel, on your own server, and all your short URLs will have your own domain name.

Secure View and Remove

Remove the data from your secure server safely, without compromising your customer's trust.

Survey Lite

Provides an opportunity for your visitors to give you feedback on the subjects you want to hear about.

Attention Ticker

Scrolling text banner is perfect for special offers... news feeds... syndication to other sites ...

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 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="http://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.

<script type="text/javascript"> // Background image slide show // http://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] = 'http://www.willmaster.com/iconimages/commercialicon.jpg'; imageArray[1] = 'http://www.willmaster.com/iconimages/multidomainicon.jpg'; imageArray[2] = 'http://www.willmaster.com/iconimages/package.jpg'; imageArray[3] = 'http://www.willmaster.com/iconimages/servicesicon.jpg'; imageArray[4] = 'http://www.willmaster.com/iconimages/secretexclusiveicon.jpg'; imageArray[5] = 'http://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.

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.

Question: Did you find this article interesting and understandable? How can it be improved? Your response is anonymous. When done typing, click anywhere outside the box. [more info]

Type your response here. Thank you.

Powered by "Real Time Reader Feedback" from WebSite's Secret.

Will Bontrager
©2008 Bontrager Connection, LLC

Please note: Articles on this website are presented "as is". However -

If you have a question about a CGI script, HTML, CSS, PHP, or JavaScript
Ask one of our Experts and you'll have your answer!
Click here for details.

© 1998-2001 William and Mari Bontrager
© 2001-2008 Bontrager Connection, LLC