Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1972
  • Last Modified:

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=0}
else{fadeValue=100}
fadeS1af()
fadeTime=(dualFade==1?(((100/fadeStep)*fadeSpeed)*2):(((100/fadeStep)*fadeSpeed)))
slideShowTimer=setTimeout("showIS1af()",(pause*1000)+fadeTime)
}

function showIS1af(){
clearTimeout(slideShowTimer)
displayPic=document.images["pic"]
displayPic.alt=is1afArr[count]
displayPic.src=is1afArr[count]
count=(count==is1afArr.length-1?0:count+1)
initS1af()
}

function fadeIS1af(){
fading=1
fadeValue -= fadeStep
fadeTimer=setTimeout("fadeIS1af()",fadeSpeed)
if(displayPic.filters){displayPic.filters.alpha.opacity=fadeValue}
else{displayPic.style.opacity=(fadeValue/100)-0.1}
if(fadeValue<minFadeValue){ // for fade out first
fadeValue=minFadeValue
fadeStep= -fadeStep
displayPic.src=is1afArr[count]
}
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:167px;filter:alpha(opacity=100);opacity:0.9">
</center>

</BODY>
</HTML>

So is there anyway I can apply that to a TD background instead of an image?  So far, no luck :/

0
jpve
Asked:
jpve
1 Solution
 
scrathcyboyCommented:
"Can a TD have a fading in/out background image?"

No, you have to put the BG in a SPAN or a DIV tag that you can manipulate directly.  You can try giving the TD and id="name" and manipulate it with getElementById('name').style.background=newfile.jpg

but I think you will only be able to change the BG that way, not fade it in and out.
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Tackle projects and never again get stuck behind a technical roadblock.
Join Now