Image Swap 3

<HTML>
<HEAD>
<TITLE>Image Swap 3</TITLE>

<script type="text/javascript">
<!--
//Jeff
//www.huntingground.freeserve.co.uk

is3Arr=[

['pic01.jpg','This example fades the image and its relevant text.'],
['pic02.jpg','The image and text are shown central in a focal div.'],
['pic03.jpg','This prevents the rest of the contents in the page moving when a different sized image is displayed.'],
['pic04.jpg','You can change the style of this text using the css rule <b>#text_div</b>'],
['pic05.jpg','If you need a longer pause time increase the value of variable <b>pause</b>'],
['pic06.jpg','You can show just the image, see next image'],
['pic07.jpg'],
['pic08.jpg','You can adjust the size that the images are displayed at by changing the value of <b>imageSize</b>'],
['pic09.jpg','Enjoy'] // no comma at the end of the last line

]

pause=4 // seconds
dualFade=1 // 0 = fades in, 1 = fades out then in

imageSize=100 // % size the large image is shown at, if set to zero fixed sizes are used
fixedWidth=300 // set a fixed width
fixedHeight=200 // set a fixed height

txtOffsetHeight=50
displayBorderWidth=8
displayBorderColor="#ffffff"

offsetX=0
offsetY=0

count=0
fading=0
fadeStep = 2

largestW=0
largestH=0

preload=new Array()
for(var i=0;i<is3Arr.length;i++){
preload[i]=new Image()
preload[i].src=is3Arr[i][0]

currentWidth=(imageSize!=0?preload[i].width/100*imageSize:fixedWidth)
currentHeight=(imageSize!=0?preload[i].height/100*imageSize:fixedHeight)

if(currentWidth>largestW){largestW=currentWidth}
if(currentHeight>largestH){largestH=currentHeight}
}

function initIS3(num){
count=num
contDiv=document.getElementById("container")
contDiv.style.width=largestW+(displayBorderWidth*2)+"px"
contDiv.style.height=largestH+(displayBorderWidth*3)+txtOffsetHeight+"px"

imgDiv=document.getElementById("img_div")
displayPic=document.images["pic"]

nextIS3Pic(num)

}

function nextIS3Pic(num){

imageWidth=(imageSize!=0?preload[num].width/100*imageSize:fixedWidth)
imageHeight=(imageSize!=0?preload[num].height/100*imageSize:fixedHeight)

if(document.getElementById("text_div")){
imgDiv.removeChild(displayText)
}

imgDiv.style.backgroundColor=displayBorderColor // reset for display 

displayPic.src=preload[num].src
displayPic.style.width=imageWidth+"px"
displayPic.style.height=imageHeight+"px"
displayPic.style.margin=displayBorderWidth+"px"

if(is3Arr[num][1]){ // create text box if required

imgDiv.style.height=""
displayText=document.createElement("DIV")
displayText.setAttribute("id","text_div")

with(displayText.style){
marginLeft=displayBorderWidth+"px"
marginRight=displayBorderWidth+"px"
marginBottom=displayBorderWidth+"px"
}

displayText.innerHTML=is3Arr[num][1]
imgDiv.appendChild(displayText)

}

imgDiv.style.width=imageWidth+(displayBorderWidth*2)+"px"
imgDiv.style.height=imageHeight+displayText.offsetHeight+(displayBorderWidth*(is3Arr[num][1]?3:2))+"px"

imgDiv.style.marginTop=(contDiv.offsetHeight-imgDiv.offsetHeight)/2+"px"

count=(count==is3Arr.length-1?0:count+1)

setTimeout(function(){initIS3Fade(count)}, pause*1000)
}

function initIS3Fade(n){
if(fading==1){return}

if(dualFade==0){fadeValue=0}
else{fadeValue=100}

picNum=n

fadeIS3Pic()
}

function fadeIS3Pic(){
fading=1
fadeValue -= fadeStep

fadeTimer=setTimeout("fadeIS3Pic()",10)

if(imgDiv.filters){imgDiv.filters.alpha.opacity=fadeValue}
else{imgDiv.style.opacity=(fadeValue/100)-0.1}

if(fadeValue<0){ // for fade out first
fadeValue=0
fadeStep= -fadeStep
nextIS3Pic(picNum)

}

if(fadeValue>=100){ // fade in
fadeValue=100
fadeStep= -fadeStep
fading=0
clearTimeout(fadeTimer)
}

}

// add  onload="initIS3(0)" to the opening body tag

// -->
</script>

<style>

#text_div{
color:#008000;
background-color:#ddeedd;
border:2px solid #bbccbb;
}

</style>

</HEAD>
<BODY onload="initIS3(0)">
<h1>Image Swap 3</h1>

<div id="iecontainer" style="text-align:center">

<div id="container" style="text-align:center;border:1px solid black;margin:0 auto 0 auto">

</div>

</div>

</BODY>
</HTML>