Background Image Transition Slide Show

Since the Background Image Slide Show article was published, the one question most often asked is how to transition between images with fades.

Because background images are static (they can't be animated or gradually faded), we have created a work-around.

This article contains code and instructions for a slide show in a div that appears to use background images. The slide show is actually in a div under another div with content.

software

On the right is an example. Slide show images are changed by fading out and fading in the next image.

The images are the same as are used for the example at the Background Image Slide Show article. In that article, the images switch without fading. If it is what you prefer, grab the code there.

The software can be customized with:

1. The id value of the image tag to use for the slide show.

2. The opacity increment while fading in and out.

3. The time intervals between opacity increments.

4. How long to pause before starting the transition to the next slide show image.

5. Your own list of images for the slide show.

The Background Image Slide Show HTML Code

Here is the HTML code used in the above example. Notes and customization information follow.

<!-- The bottom layer, holds the image. -->
<div 
   style="position:relative; 
          width:100px; 
          height:100px; 
          border:1px dashed black;">

<!-- The image. -->
<img id="image" style="opacity:1.0; filter:alpha(opacity=100);" src="//www.willmaster.com/iconimages/commercialicon.jpg" width="100" height="100" border="0" alt="logo slide show" title="Be a WebSite's Secret Member">

   <!-- Top layer, publishes content on top of image. -->
   <div 
      style="position:absolute; 
             top:0px; 
             left:0px; 
             background-color:transparent; 
             width:100px; 
             height:100px;">

      <!-- The content. -->
      <p style="margin-top:77px; width:100px; text-align:center;">
<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> <!-- End of top layer div. -->

</div> <!-- End of bottom layer div. -->

After customization, put the code into the web page source code where the slide show is to be.

How it works:

A div contains everything the slide show needs except the JavaScript. In the div is the image tag that the JavaScript uses to present the slide show. The div has a style position:relative.

In the div is also another div.

The other div contains the content to overlay the slide show. It has a style position:absolute to position it exactly over the top of the first div. It also has a style background-color:transparent to let the slide show be viewed behind the content.

Customization:

The first div —

The first div must have a style with a position definition. Unless your implementation needs a different value, use position:relative. All other style definitions in the first div example code are optional. Other style definitions may be added.

In the example, the width and height definitions are the same as the width and height of the image, but that agreement is not required.

The image in the first div —

The image tag in the first div needs to have an id value. The id value is specified in the JavaScript (see further below). The JavaScript uses the image tag to present the slide show.

The style

opacity:1.0; filter:alpha(opacity=100);

in the image tag needs to be there. Other definitions may be added provided the current ones remain.

The src value of the image tag is the URL of the first image in the slide show sequence.

The second div —

The second div is within the first div and below the image tag.

To position the div over the image tag to view the slide show as a background, the div's style definitions

position:absolute;
top:0px;
left:0px;
background-color:transparent;

definitions are required. All other style definitions in the second div example code are optional. Other style definitions may be added.

In the example, the width and height definitions are the same as the width and height of the image, but that agreement is not required.

The content in the second div —

The content may be any content that fits over the image slide show.

The Background Image Slide Show JavaScript Code

Here is the JavaScript. Installation and customization information follow.

<script type="text/javascript">
/*
   Background Image Transition Slide Show
   Version 1.0
   October 25, 2010

   Will Bontrager
   https://www.willmaster.com/
   Copyright 2010 Bontrager Connection, LLC

   Bontrager Connection, LLC grants you 
   a royalty free license to use or modify 
   this software provided this notice appears 
   on all copies. This software is provided 
   "AS IS," without a warranty of any kind.
*/

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

// Customization info is in the "Background Image Transition 
//    Slide Show" article in the Willmaster Library at 
//    https://www.willmaster.com/library/

var ImageIDvalue = "image";

var TransitionIncrement = 1;

var IncrementInterval = 25;

var PauseBeforeNextImage = 3000;

Images.push("https://www.willmaster.com/iconimages/commercialicon.jpg");
Images.push("https://www.willmaster.com/iconimages/multidomainicon.jpg");
Images.push("https://www.willmaster.com/iconimages/package.jpg");
Images.push("https://www.willmaster.com/iconimages/servicesicon.jpg");
Images.push("https://www.willmaster.com/iconimages/secretexclusiveicon.jpg");
Images.push("https://www.willmaster.com/iconimages/freeicon.jpg");

// End of customization section. //

var opacity = 100;
var currentImage = 0;
var topImage = Images.length - 1;
var image = document.getElementById(ImageIDvalue);
var IE = (image.filters) ? true : false;
var timerthing;

function FadeIn() {
opacity += TransitionIncrement;
if( opacity >= 100 ) { opacity = 100; }
if( IE ) { image.filters.alpha.opacity = opacity; }
else { image.style.opacity = opacity/100; }
if( opacity == 100 ) {
   clearInterval(timerthing);
   setTimeout("StartFadeOut()",PauseBeforeNextImage);
   }
}

function FadeOut() {
opacity -= TransitionIncrement;
if( opacity <= 0 ) { opacity = 0; }
if( IE ) { image.filters.alpha.opacity = opacity; }
else { image.style.opacity = (opacity==0) ? 0 : opacity/100; }
if( opacity == 0 ) {
   clearInterval(timerthing);
   currentImage++;
   if( currentImage > topImage ) { currentImage = 0; }
   image.src = Images[currentImage];
   timerthing = setInterval("FadeIn()",IncrementInterval);
   }
}

function StartFadeOut() { timerthing = setInterval("FadeOut()",IncrementInterval); }

function StartSlideShowTransition() {
setTimeout("StartFadeOut()",PauseBeforeNextImage);
}

StartSlideShowTransition();
</script>

After customization, put the JavaScript into the source code of the web page somewhere below the location of the slide show.

Customization:

The variable ImageIDvalue —

Specify the id value of the image tag. The image tag is in the first div of the image slide show HTML code further above.

The variable TransitionIncrement —

This number tells the JavaScript how much fading in or out to do every time a fade is incremented. Specify a number between 1 and 100 (inclusive). The lower the number, the smaller transition steps, the smoother the transition appears.

The variable IncrementInterval —

This number tells the JavaScript the length of the time interval between fade in/out increments. Specify a number of milliseconds. The lower the number, the quicker each increment takes place (within the user's system limitations).

The variable PauseBeforeNextImage —

This number tells the JavaScript how long to pause with an image at full opacity before starting the transition to the next slide show image. Specify the number of milliseconds to pause.

The variable array Images —

This list of URLs tells the JavaScript the sequence of images to display in the slide show. Specify each image on a line by itself in this format:

Images.push("http://example.com/image.jpg");

The URL between the quotes may be absolute, as above, or relative, like:

Images.push("/image.jpg");

The Background Image Transition Slide Show

Unlike the code in the Background Image Slide Show article, this code transitions the image with a fading out and fading in of the next image.

HTML background images don't have the ability to fade in or out. As a work-around, the slide show in this article is in a div under another div with content and a transparent background.

Will Bontrager