Two divs are used, one as the container for a nested div, the container shows the first text the nested div shows the second text.
Onmouseover the second text fades in, onmouseout the second text fades out.
Onclick the second text remains until another text is clicked and the previously clicked text fades out.
<div class="tf2cont" style="background-color:#f5f3e7;color:#a31814;text-align:center">TEXT
<div id="tf2fade0" class="tf2nested" style="background-color:#a31814;color:#f5f3e7">EFFECT</div>
</div>
The nested div must be given the ID tf2fade plus an ordinal number starting from zero.
Both the divs must be the same size, the second nested div must also have a background colour, or image, but is optional for the container div.
The speed of the in fade and out fade are set at variables fadeInStep and fadeOutStep
If you only want the onmouseover and onmouseout effect set variable enableClick to zero
<HTML>
<HEAD>
<TITLE>Text Fader 2</TITLE>
<script type="text/javascript">
//Jeff
//www.huntingground.freeserve.co.uk
enableClick=1 // 0 =no 1 = yes
fadeInStep=10
fadeOutStep=30
function initTF2(){
minOpac=0
maxOpac=100
lastNum=0
count=0
while(document.getElementById("tf2fade"+count)){
window["tf2Fader"+count]=new createTF2("tf2fade"+count)
parentEl=document.getElementById("tf2fade"+count).parentNode
parentEl.id="container"+count
parentEl.count=count
parentEl.onmouseover=function(){window["tf2Fader"+this.count].chkStatus(1,this.count)}
parentEl.onmouseout=function(){window["tf2Fader"+this.count].chkStatus(0,this.count)}
if(enableClick==1){
document.getElementById("tf2fade"+count).c=count
document.getElementById("tf2fade"+count).onclick=function(){window["tf2Fader"+this.c].chkClick(this.c)}
}
count++
}
}
lastClickNum=null
function createTF2(id){
this.id=id
this.isClicked=false
this.timer=null
this.running=0
if(document.getElementById(this.id).filters){
this.opac=document.getElementById(this.id).filters.alpha.opacity
}
else{
this.opac=document.getElementById(this.id).style.opacity*100
}
this.chkClick=function(clickNum){
if(this.isClicked==true){return}
this.isClicked=true
if(lastClickNum!=null){
window["tf2Fader"+lastClickNum].isClicked=false
window["tf2Fader"+lastClickNum].chkStatus(0,lastClickNum)
}
lastClickNum=clickNum
}
this.chkStatus=function(d,num){
if(this.isClicked==true){return}
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["tf2Fader"+num].animate('tf2Fader'+num)
if(lastNum!=num){
window["tf2Fader"+lastNum].chkStatus(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(document.getElementById(this.id).filters){
document.getElementById(this.id).filters.alpha.opacity=this.opac
}
else{
document.getElementById(this.id).style.opacity=(this.opac/100)-0.01
}
}
}
// add onload="initTF2()" to the opening BODY tag
</script>
<style type="text/css">
.tf2cont{
position:relative;
width:120px;
height:50px;
cursor:pointer;
}
.tf2nested{
position:absolute;
top:0px;
left:0px;
width:120px;
height:50px;
filter:alpha(opacity=0);
opacity:0;
}
</style>
</HEAD>
<BODY onload="initTF2()">
<h1><span>Text Fader 2</span></h1>
<div style="width:480px"></BODY> </HTML>