Fading Elements

For this example I have used a combination of div and img tags showing a single display effect by having all the elements positioned in the same place, although each element can be placed individually.

When you have created your fading elements you must enter the number of elements at variable elementNum

You can choose to automatically fade through all the elements by changing the value of variable auto from 0 to 1
You can set the maximum and minimum opacity values between 0 & 100 at variables minOpac and maxOpac
You can also set the fade speed at variables fadeInStep and fadeOutStep

<HTML>
<HEAD>
<TITLE>Fading Elements</TITLE>

<script type="text/javascript">

function init_fader(){ // create objects

auto=0 // 0 = no, 1 = yes
elementNum=12 // number of fading elements
autoTime=3 // seconds

minOpac=0
maxOpac=100
fadeInStep=20
fadeOutStep=20
autoCount=0
autoTimer=""
lastNum=0

for(var i=0;i<elementNum;i++){
window["fadeMe"+i]=new create("fader"+i)
}

if(auto==1){
automate()
}

}

function automate(){
window["fadeMe"+autoCount].chk_status(1,autoCount)
autoCount++
if(autoCount==elementNum){
autoCount=0
}
autoTimer=setTimeout("automate()",1000*autoTime)
}

function fadeIn(n){
window["fadeMe"+n].chk_status(1,n)
}

function fadeOut(n){
window["fadeMe"+n].chk_status(0,n)
}

function create(id){ //define properties, pass id
this.id=id

this.timer=null
this.running=0
if("filters" in document.body && "alpha" in document.body.filters){
this.opac=document.getElementById(this.id).filters.alpha.opacity
}
else{
this.opac=document.getElementById(this.id).style.opacity*100
}

this.chk_status=function(d,num){
this.dir=d
if(this.dir==0){this.running=0}
if(this.dir==1&&this.running==1){return}
this.running=1

this.opac_stepup=(maxOpac-minOpac)/fadeInStep
this.opac_stepdn=(maxOpac-minOpac)/fadeOutStep
window["fadeMe"+num].animate('fadeMe'+num)

if(lastNum!=num){
window["fadeMe"+lastNum].chk_status(0,lastNum)
}
lastNum=num
}

this.animate=function(myobject){
if(this.dir==1){
this.opac=(this.opac+this.opac_stepup)*1
}
else{
this.opac=(this.opac-this.opac_stepdn)*1
}
this.timer=setTimeout(myobject+".animate('"+myobject+"')",50)

if(this.dir==1&&this.opac>maxOpac-this.opac_stepup){
this.running=0
this.opac=maxOpac
clearTimeout(this.timer)
}

if(this.dir==0&&this.opac<minOpac+this.opac_stepdn){
this.running=0
this.opac=minOpac
clearTimeout(this.timer)
}

if("filters" in document.body && "alpha" in document.body.filters){
document.getElementById(this.id).filters.alpha.opacity=this.opac
}
else{
document.getElementById(this.id).style.opacity=(this.opac/100)-0.01
}
}

}

// add  onload="init_fader()" to the opening BODY tag

</script>

<style>

.rule1{
filter:alpha(opacity=0);
opacity:0;
}

.rule2{
position:absolute;
left:100px;
top:190px;
width:216px;
height:121px;
color:white;
text-align:center;
border:1px outset #c3bfa4;
}

#fader0{background-image:url(image1.jpg)}
#fader1{background-color:#00AA00}
#fader2{background-color:#AAAA00}
#fader3{background-color:#AA0000}
#fader4{background-image:url(image2.jpg)}
#fader5{background-image:url(image3.jpg)}
#fader6{background-image:url(image4.jpg)}
#fader7{background-image:url(image5.jpg)}

</style>

</HEAD>
<BODY onload="init_fader()">
<h1>Fading Elements</h1>

<P>
<a href="#null" onclick="fadeIn(0)"> Onclick Link 1</a><br>
<a href="#null" onclick="fadeIn(1)">Onclick Link 2</a><br>
<a href="#null" onmouseover="fadeIn(2)">Onmouseover Link 1</a><br>
<a href="#null" onmouseover="fadeIn(3)">Onmouseover Link 2</a><br>
<a href="#null" onmouseover="fadeIn(4)" onmouseout="fadeOut(4)">mouseover/out Link 1</a><br>
<a href="#null" onmouseover="fadeIn(5)" onmouseout="fadeOut(5)">mouseover/out Link 2</a><br>


<div id="fader0" class="rule1 rule2">A now for a silly rhyme</div>
<div id="fader1" class="rule1 rule2">
One fine day in the middle of the night<br>
Two dead men got up for a fight
</div>

<div id="fader2" class="rule1 rule2">
Back to back they faced each other<br>
Drew their swords and shot each other
</div>

<div id="fader3" class="rule1 rule2">Told you it was silly, didn't I :)</div>

<div id="fader4" class="rule1 rule2"></div>
<div id="fader5" class="rule1 rule2"></div>
<div id="fader6" class="rule1 rule2"></div>
<div id="fader7" class="rule1 rule2"></div>

<img id="fader8" class="rule1 rule2" src="image6.jpg">
<img id="fader9" class="rule1 rule2" src="image7.jpg">
<img id="fader10" class="rule1 rule2" src="image8.jpg">
<img id="fader11" class="rule1 rule2" src="image9.jpg">

</BODY>
</HTML>

Onclick Link 1 Link 2 Link 3	This is the auto effect set at 5 second intervals I have set this auto effect to run through the first 6 ordinal elements of 3 divs and 3 images And now three images The onclick event can be used to fade in an element The previous element is automatically faded out Each link can reveal a separate element The onmouseover event can be used to fade in an element The previous element is faded out Each link can reveal a separate element If you use the onmouseover and the onmouseout event The current element fades in onmouseover and fades out onmouseout Each link can reveal a separate element	Onmouseover Link 1 Link 2 Link 3	Onmouseover / out
	Auto Running (example only) Start Stop