Previous
Next
Create a background slide show of a HTML tag
This script can provide a slide show in any HTML tag that can publish a background image. It is very useful for web presentation. As examples, the HTML tag could be a <div> , a table's <td>, even the body tag itself. but only one such tag per page (To solve this problem, you can duplicate the JavaScript and modify it with a different function name). The JavaScript needs to be somewhere below the slide show tag.
Here is a working example of the script:
To implement this effect, just paste below code into the <BODY> section of your HTML document.
<div
id="demo"
style="text-align:center;
width:160px;
height:110px;
overflow:hidden;
border-style:dashed;
border-width:1px;">
<p style="margin-top:83px;">
<a
href="http://www.foxarc.com/"
style="color:blue;
font-size:20px;
letter-spacing:-1px;
text-decoration:none;
font-family:sans-serif;
font-weight:bold;">
Collage FX Studio
</a>
</p>
</div>
<script type="text/javascript">
var imageArray = new Array(); // leave as is.
// Specify number of milliseconds between image switches.
var switchMilliseconds = 2000;
// Specify the id of the div or other HTML tag with the
// background image to switch.
var divID = 'demo';
// To add more images, continue the pattern below.
imageArray[0] = 'http://foxarc.com/en/cfxs/images/frames.jpg';
imageArray[1] = 'http://foxarc.com/en/cfxs/images/masks.jpg';
imageArray[2] = 'http://foxarc.com/en/cfxs/images/brushes.jpg';
imageArray[3] = 'http://foxarc.com/en/cfxs/images/cliparts.jpg';
imageArray[4] = 'http://foxarc.com/en/cfxs/images/text.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.
Tags: