JavaScript Example - IMAGE SLIDE SHOW

COPY - Insert Inside Body: <BODY></BODY>

<SCRIPT type="text/javascript">
// CREDITS:
// Random Order Slideshow with Messages
// Concept by Urs Dudli and Peter Gehrig 
// Rewritten for this site by Jim Stiles www.jdstiles.com

///////////////////////////////////////////////////////////////////////////
// CONFIGURATION STARTS HERE
///////////////////////////////////////////////////////////////////////////

// Replace the URLs of the slides and the corresponding messages.
// Please note that the URL and the correponding message are separated by "|".
// Watch how the "," and the " " are set!
// You may add as many slides as you like.
// IMPORTANT: Do not use the return-key to break the lines!!!
var slideshow=new Array("http://jdstiles.com/pic/centerpug.jpg|A young Tazz.","http://jdstiles.com/pic/chair.jpg|Relaxing on the weekend!","http://jdstiles.com/pic/floor.jpg|Here\'s looking at you.","http://jdstiles.com/pic/wall.jpg|Getting some sun.","http://jdstiles.com/pic/tazz.jpg|This is MY throne!","http://jdstiles.com/pic/rug.jpg|Watching television.","http://jdstiles.com/pic/ling.jpg|I run this household.","http://jdstiles.com/pic/bed.jpg|Is it time for bed yet?","http://jdstiles.com/pic/basket.jpg|Hey... This is pretty comfortable!")

// the font-family of the messages
var fntfamily="Verdana"

// the font-size of the messages (ranging from 1 to 6)
var fntsize=2

// the font-color of the messages 
// instead of "yellow" you also could write "FFFF00"
var fntcolor="f5deb5"

// the background-color of the messages
// instead of "black" you also could write "000000"
var bgrndcolor="8b0000"

// the width of the slides (pixels)
var imagewidth=250

// the height of the slides (pixels)
var imageheight=250

// the minimum interval between each slide (seconds)
var standstill=4

///////////////////////////////////////////////////////////////////////////
// CONFIGURATION ENDS HERE
///////////////////////////////////////////////////////////////////////////

// do not change the code below
var imgstop=0
var imgsleft=0
var mestop=imageheight
var mesleft=0
var firstslide=true
var starttime
var nowtime
var imgurl=new Array()
var message=new Array()
var imgurlandmessagearray=new Array()
var imgurlandmessage
var imgpreload=new Array()
var playertop=0
var playerleft=0
var i_imgs=0
var i_loop=0
var i_preloadloop=0
var i_transition=0
var timerrotate=false
var timercheck=false
var contentimg
var contentmes
var slideshowlength=slideshow.length

var topdivheight=imageheight+40

var ns6=document.getElementById&&!document.all?1:0
var standstill=standstill*1000

function init() {
    firstslide=true
    i_imgs=0
    i_loop=0
    i_preloadloop=randommaker(slideshowlength)
    if (timerrotate) {
        clearTimeout(timerrotate)
        clearTimeout(timercheck)
    }
    imgurl=new Array
    message=new Array
    for (i=0;i<=slideshow.length-1;i++) {
        imgurlandmessage=slideshow[i].split("|")
        imgurl[i]=imgurlandmessage[0]
        message[i]=imgurlandmessage[1] 
    }

if (document.all) {
        imgs.innerHTML=""
        mes.innerHTML=""
	    document.all.imgs.style.posTop=imgstop
        document.all.imgs.style.posLeft=imgsleft
		document.all.mes.style.posTop=mestop
        document.all.mes.style.posLeft=mesleft
        checkpreloadtime()
        preloadimage()
        checkifloaded()
    }
    if (ns6) {
        document.getElementById('imgs').innerHTML=""
        document.getElementById('mes').innerHTML=""
        document.getElementById('imgs').style.top=imgstop
        document.getElementById('imgs').style.left=imgsleft
        document.getElementById('mes').style.top=mestop
        document.getElementById('mes').style.left=mesleft
        checkpreloadtime()
        preloadimage()
        checkifloaded()
    }
	if (document.layers) {
        document.topdiv.document.imgs.document.write("")
        document.topdiv.document.imgs.document.close()
        document.topdiv.document.mes.document.write("")
        document.topdiv.document.mes.document.close()
	    document.topdiv.document.imgs.top=imgstop
        document.topdiv.document.imgs.left=imgsleft
		document.topdiv.document.mes.top=mestop
        document.topdiv.document.mes.left=mesleft
        checkpreloadtime()
        preloadimage()
        checkifloaded()
    }
}

function checkifloaded() {   
   if (imgpreload.complete) { 
        nowtime=new Date()
        nowtime=nowtime.getTime()
        nowtime=nowtime-starttime
        var interval=standstill-nowtime
        if (interval<=0 ) {
            interval=1
        }
        if (firstslide) {
            interval=1
            firstslide=false
        }
        if (i_preloadloop==i_loop) {
            interval=1
        }
        timerrotate=setTimeout("rotateimages()", interval)
   }
   else {
        timercheck=setTimeout("checkifloaded()", 100)
   }
}

function preloadimage() { 
	imgpreload=new Image()
	imgpreload.src=imgurl[i_preloadloop]
}

function rotateimages() {
    i_loop=i_preloadloop
    i_preloadloop=randommaker()  
    checkpreloadtime()
    preloadimage()
    getcontent()
    if (document.all) {
        imgs.filters[i_transition].apply()
        imgs.innerHTML=contentimg
        imgs.filters[i_transition].play()
        i_transition++
        if (i_transition>21) {i_transition=0}
        mes.innerHTML=contentmes
    }    
    if (ns6) {
        document.getElementById('imgs').innerHTML=contentimg
        document.getElementById('mes').innerHTML=contentmes
    }
    if (document.layers) {
        document.topdiv.document.imgs.document.write(contentimg)
        document.topdiv.document.imgs.document.close()
        document.topdiv.document.mes.document.write(contentmes)
        document.topdiv.document.mes.document.close()
    }
    i_loop++
    checkifloaded()    
}

function randommaker() {		
	rand=Math.floor(slideshowlength*Math.random())
    return rand

}

function getcontent() {
    contentimg="<img src='"+imgurl[i_loop]+"'>"
    contentmes="<table cellpadding=2 cellspacing=0 border=0 bgcolor="+bgrndcolor+" width="+imagewidth+"><tr><td><font size="+fntsize+" color="+fntcolor+" face="+fntfamily+">"+message[i_loop]+"</font></td></tr></table>"
}

if (document.all) {
    document.write('<div id="topdiv" style="position:relative;width:'+imagewidth+'px;height:'+topdivheight+'px">')
    document.write('<div id="mes" style="position:absolute;"> </div>')
    document.write('<div id="imgs" style="position:absolute;filter: revealTrans(Transition=1, Duration=2) revealTrans(Transition=2, Duration=2) revealTrans(Transition=3, Duration=2)  revealTrans(Transition=4, Duration=2)  revealTrans(Transition=5, Duration=1)  revealTrans(Transition=6, Duration=2)  revealTrans(Transition=7, Duration=2)  revealTrans(Transition=8, Duration=1)  revealTrans(Transition=9, Duration=2)  revealTrans(Transition=10, Duration=1)  revealTrans(Transition=11, Duration=2)  revealTrans(Transition=12, Duration=2)  revealTrans(Transition=13, Duration=1)  revealTrans(Transition=14, Duration=2)  revealTrans(Transition=15, Duration=2)  revealTrans(Transition=16 Duration=1)  revealTrans(Transition=17, Duration=2)  revealTrans(Transition=18, Duration=2) revealTrans(Transition=19, Duration=1) revealTrans(Transition=20, Duration=2) revealTrans(Transition=21, Duration=2) revealTrans(Transition=22, Duration=2)"> </div>')
    document.write('</div>')     
}

if (ns6) {
    document.write('<div id="topdiv" style="position:relative;width:'+imagewidth+'px;height:'+topdivheight+'px">')
    document.write('<div id="mes" style="position:absolute;"> </div>')
    document.write('<div id="imgs" style="position:absolute;"> </div>')
    document.write('</div>')     
}

if (document.layers) {
    document.write('<ilayer name="topdiv" width='+imagewidth+' height='+topdivheight+'>')
    document.write('<layer name="mes"> </layer>')
    document.write('<layer name="imgs"> </layer>')
    document.write('</ilayer>')     
}

function checkpreloadtime() {
	starttime= new Date()
	starttime=starttime.getTime()
}

function checktime() {

}

window.onresize=new Function("window.location.reload()");
window.onload=init

</SCRIPT>


This is an example of a slide show. What is unique about this particular script is the messages that display with each image. As you can see, the images are displayed in random order with varying transformations from one image to the next. You can also change the background color and text color for the messages. You can place the entire script within a table cell, (like this example), in order to place the slide show in an exact position on your page.