jpve
asked on
Fading in/out TD background images
Hello, I was wondering if this can be done:
Can a TD have a fading in/out background image? Changing every 5 or 10 seconds or so? I can get images to fade in and out easy enough but what I need is for the background image of the TD to rotate. More or less there's a transparent .GIF inside the TD and obviously you can see the background of that TD. Works great but I just can't seem to get any fading in/out to happen. Here's the code to actually fade in/out an image:
<HTML>
<HEAD>
<TITLE>Image Swap 1 Auto Fade</TITLE>
<script type="text/javascript">
<!--
//Jeff
//www.huntingground.freeserve.co.uk
is1afArr=new Array()
is1afArr[0]="pic1.jpg"
is1afArr[1]="pic2.jpg"
is1afArr[2]="pic3.jpg"
is1afArr[3]="pic4.jpg"
is1afArr[4]="pic5.jpg"
is1afArr[5]="pic6.jpg"
pause=5 // seconds
dualFade=1 // 0 = fades in, 1 = fades out then in
fadeStep=1
fadeSpeed=10
count=0
fading=0
minFadeValue=0
slideShowTimer=null
preload=new Array()
for(var i=0;i<is1afArr.length;i++)
preload[i]=new Image()
preload[i].src=is1afArr[i]
}
function initIS1af(){
if(dualFade==0){fadeValue=
else{fadeValue=100}
fadeS1af()
fadeTime=(dualFade==1?(((1
slideShowTimer=setTimeout(
}
function showIS1af(){
clearTimeout(slideShowTime
displayPic=document.images
displayPic.alt=is1afArr[co
displayPic.src=is1afArr[co
count=(count==is1afArr.len
initS1af()
}
function fadeIS1af(){
fading=1
fadeValue -= fadeStep
fadeTimer=setTimeout("fade
if(displayPic.filters){dis
else{displayPic.style.opac
if(fadeValue<minFadeValue)
fadeValue=minFadeValue
fadeStep= -fadeStep
displayPic.src=is1afArr[co
}
if(fadeValue>=100){ // fade in
fadeValue=100
fadeStep= -fadeStep
fading=0
clearTimeout(fadeTimer)
}
}
// -->
</script>
</HEAD>
<BODY onLoad="showS1af()">
<h1>Image Swap 1 Auto Fade</h1>
<center>
<img name="pic" id="pic" alt="" src="blank.gif" style="width:250px;height:
</center>
</BODY>
</HTML>
So is there anyway I can apply that to a TD background instead of an image? So far, no luck :/
Can a TD have a fading in/out background image? Changing every 5 or 10 seconds or so? I can get images to fade in and out easy enough but what I need is for the background image of the TD to rotate. More or less there's a transparent .GIF inside the TD and obviously you can see the background of that TD. Works great but I just can't seem to get any fading in/out to happen. Here's the code to actually fade in/out an image:
<HTML>
<HEAD>
<TITLE>Image Swap 1 Auto Fade</TITLE>
<script type="text/javascript">
<!--
//Jeff
//www.huntingground.freeserve.co.uk
is1afArr=new Array()
is1afArr[0]="pic1.jpg"
is1afArr[1]="pic2.jpg"
is1afArr[2]="pic3.jpg"
is1afArr[3]="pic4.jpg"
is1afArr[4]="pic5.jpg"
is1afArr[5]="pic6.jpg"
pause=5 // seconds
dualFade=1 // 0 = fades in, 1 = fades out then in
fadeStep=1
fadeSpeed=10
count=0
fading=0
minFadeValue=0
slideShowTimer=null
preload=new Array()
for(var i=0;i<is1afArr.length;i++)
preload[i]=new Image()
preload[i].src=is1afArr[i]
}
function initIS1af(){
if(dualFade==0){fadeValue=
else{fadeValue=100}
fadeS1af()
fadeTime=(dualFade==1?(((1
slideShowTimer=setTimeout(
}
function showIS1af(){
clearTimeout(slideShowTime
displayPic=document.images
displayPic.alt=is1afArr[co
displayPic.src=is1afArr[co
count=(count==is1afArr.len
initS1af()
}
function fadeIS1af(){
fading=1
fadeValue -= fadeStep
fadeTimer=setTimeout("fade
if(displayPic.filters){dis
else{displayPic.style.opac
if(fadeValue<minFadeValue)
fadeValue=minFadeValue
fadeStep= -fadeStep
displayPic.src=is1afArr[co
}
if(fadeValue>=100){ // fade in
fadeValue=100
fadeStep= -fadeStep
fading=0
clearTimeout(fadeTimer)
}
}
// -->
</script>
</HEAD>
<BODY onLoad="showS1af()">
<h1>Image Swap 1 Auto Fade</h1>
<center>
<img name="pic" id="pic" alt="" src="blank.gif" style="width:250px;height:
</center>
</BODY>
</HTML>
So is there anyway I can apply that to a TD background instead of an image? So far, no luck :/
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.