|
A div is used as a focal container for the images. As the script preloads the images it notes what the largest width and height will be required to display the images and sets the size of the div to these dimensions. The images are then displayed central within the div. You can adjust the size that the images are displayed at by changing the value of variable imageSize The length of the pause can be adjusted by changing the value of variable pause |
The images are entered into the array along with a url if required, leave the entry empty if url not required
["pic1.jpg","pic01.jpg"],
["pic2.jpg",""],
["pic3.jpg","page.htm"]
<HTML>
<HEAD>
<TITLE>Image swap 2 - Fade</TITLE>
<script type="text/javascript">
<!--
// Jeff
//www.huntingground.freeserve.co.uk
is2fArr=[
["pic01.jpg","pic01.jpg"],
["pic02.jpg","pic02.jpg"],
["pic03.jpg","pic03.jpg"],
["pic04.jpg","pic04.jpg"],
["pic05.jpg","pic05.jpg"] // no comma at the end of last index
]
imageSize=100 // % size the image is shown at, if set to zero the fixed width and heights are used
fixedWidth=150 // set a fixed width
fixedHeight=100 // set a fixed height
pause = 3 // seconds
// ***** Do not edit below this line *****
opac1=100
opac2=0
running=0
nextPic=2
nextLink=0
fadeSpeed=5
imgSize=imageSize/100
preload=[]
maxW=0
maxH=0
for(var i=0;i<is2fArr.length;i++){
preload[i]=new Image()
preload[i].src=is2fArr[i][0]
if(imageSize!=0){
if(preload[i].width*imgSize>maxW){maxW=preload[i].width*imgSize}
if(preload[i].height*imgSize>maxH){maxH=preload[i].height*imgSize}
}
else{
maxW=fixedWidth
maxH=fixedHeight
}
}
function initIS2f(){
for(var i=0;i<2;i++){
newImg=document.createElement("IMG")
newImg.setAttribute("id","opic"+(i+1))
newImg.setAttribute("src",is2fArr[i][0])
document.getElementById("is2fdiv").appendChild(newImg)
}
elOpic1=document.getElementById("opic1")
elOpic2=document.getElementById("opic2")
oDiv=document.getElementById("is2fdiv")
oDiv.onclick=function(){isf2Link()}
oDiv.style.width=maxW+"px"
oDiv.style.height=maxH+"px"
lnkLoc=is2fArr[nextLink][1]
if(imageSize!=0){
elOpic1.style.width=preload[0].width*imgSize+"px"
elOpic1.style.height=preload[0].height*imgSize+"px"
elOpic1.style.marginLeft= (oDiv.offsetWidth-(preload[0].width*imgSize))/2+"px"
elOpic1.style.marginTop=(oDiv.offsetHeight-(preload[0].height*imgSize))/2+"px"
elOpic2.style.width=preload[1].width*imgSize+"px"
elOpic2.style.height=preload[1].height*imgSize+"px"
elOpic2.style.marginLeft= (oDiv.offsetWidth-(preload[1].width*imgSize))/2+"px"
elOpic2.style.marginTop=(oDiv.offsetHeight-(preload[1].height*imgSize))/2+"px"
}
else{
elOpic1.style.width=fixedWidth+"px"
elOpic1.style.height=fixedHeight+"px"
elOpic2.style.width=fixedWidth+"px"
elOpic2.style.height=fixedHeight+"px"
}
setTimeout("fadeIS2f()",pause*1000)
}
function fadeIS2f(){
running=1
opac1 -= fadeSpeed
opac2 += fadeSpeed
if(elOpic1.filters){
elOpic1.filters.alpha.opacity=opac1
elOpic2.filters.alpha.opacity=opac2
}
else{
elOpic1.style.opacity=(opac1/100)-0.001
elOpic2.style.opacity=(opac2/100)-0.001
}
if(opac1<=0||opac2<=0){
if(opac1<=0){
elOpic1.src=is2fArr[nextPic][0]
if(imageSize!=0){
elOpic1.style.width=preload[nextPic].width*imgSize+"px"
elOpic1.style.height=preload[nextPic].height*imgSize+"px"
elOpic1.style.marginLeft=(oDiv.offsetWidth-(preload[nextPic].width*imgSize))/2+"px"
elOpic1.style.marginTop=(oDiv.offsetHeight-(preload[nextPic].height*imgSize))/2+"px"
}
else{
elOpic1.style.width=fixedWidth+"px"
elOpic1.style.height=fixedHeight+"px"
}
}
else{
elOpic2.src=is2fArr[nextPic][0]
if(imageSize!=0){
elOpic2.style.width=preload[nextPic].width*imgSize+"px"
elOpic2.style.height=preload[nextPic].height*imgSize+"px"
elOpic2.style.marginLeft=(oDiv.offsetWidth-(preload[nextPic].width*imgSize))/2+"px"
elOpic2.style.marginTop=(oDiv.offsetHeight-(preload[nextPic].height*imgSize))/2+"px"
}
else{
elOpic2.style.width=fixedWidth+"px"
elOpic2.style.height=fixedHeight+"px"
}
}
nextPic++
if(nextPic==is2fArr.length){nextPic=0}
nextLink++
if(nextLink==is2fArr.length){nextLink=0}
fadeSpeed= -fadeSpeed
running=0
}
if(opac1>=100||opac2>=100){
lnkLoc=is2fArr[nextLink][1]
}
if(running==0){
setTimeout("fadeIS2f()",pause*1000)
}
else{
setTimeout("fadeIS2f()",50)
}
}
function isf2Link(){
if(running==1){return}
if(is2fArr[nextLink][1]){
//location=lnkLoc
newWin=window.open(lnkLoc,'isf2win','left=200,top=200,width=300,height=300')
newWin.focus()
}
}
// add onload="initIS2f()" to the opening BODY tag
//-->
</script>
<style type="text/css">
#opic1, #opic2{
position:absolute;
left:0px;
top:0px;
cursor:pointer
}
#opic1{opacity:0.9}
#opic2{opacity:0}
</style>
<!--[if IE]>
<style type="text/css">
#opic1{filter:alpha(opacity=100)}
#opic2{filter:alpha(opacity=0)}
</style>
<![endif]-->
</HEAD>
<BODY onload="initIS2f()">
<div id="is2fdiv" style="position:relative"></div>
</BODY>
</HTML>