Hi guys,

Not great at javascript, trying to learn.
I set up a page with a slideshow, when you mouseover a hidden div pops up below with caption. Fades in and out ok.
My problem is I am not sure how to clear the mouseover when the images rotate and it gets messed up.
Here is the code:

var fadeEffect=function(){
return{
init:function(id, flag, target){
this.elem = document.getElementById(id);
clearInterval(this.elem.si);
this.target = target ? target : flag ? 100 : 0;
this.flag = flag || -1;
this.alpha = this.elem.style.opacity ? parseFloat(this.elem.style.opacity) * 100 : 0;
this.si = setInterval(function(){fadeEffect.tween()}, 20);
},
tween:function(){
if(this.alpha == this.target){
clearInterval(this.si);
}else{
var value = Math.round(this.alpha + ((this.target - this.alpha) * .05)) + (1 * this.flag);
this.elem.style.opacity = value / 100;
this.elem.style.filter = 'alpha(opacity=' + value + ')';
this.alpha = value
}
}
}
}();

The HTML:

<a href="#" onMouseOver="fadeEffect.init('div1',1)" onMouseOut="fadeEffect.init('div1',0)"><img src="images/domestics.jpg"/></a>
<a href="#" onMouseOver="fadeEffect.init('div2',1)" onMouseOut="fadeEffect.init('div2',0)"><img src="images/world-woods.jpg" alt="" title="#htmlcaption2" /></a>
<a href="#" onMouseOver="fadeEffect.init('div3',1)" onMouseOut="fadeEffect.init('div3',0)"><img src="images/rustics.jpg" alt="" title="#htmlcaption3" /></a>
<a href="#" onMouseOver="fadeEffect.init('div4',1)" onMouseOut="fadeEffect.init('div4',0)"><img src="images/reclaimed.jpg" alt="" title="#htmlcaption4" /></a>
</div>

<div id="div2">
<h2>TESORO.Exotics</h2>
<p>From around the globe, we offer woods in grains and colors<br>
that only
species exotic to North America can provide.</p></div>
<div id="div1">
<h2>TESORO.Domestics
</h2>
<p>Offering temperate North American Species in various flooring formats. <br>
From the well known species to lesser known unique woods</p>
</div>
<div id="div3">
<h2>TESORO.Rustics
</h2>
<p>Offering a wide range of woods in varying rustic character filled grades<br>
along with various surface texture treatments to further enhance their beauty. </p>
</div>
<div id="div4">
<h2>TESORO.Reclaimed
</h2>
<p>Our reclaimed sources vary from post agricultural reuse <br>
to post industrial reclaimed sources, to post consumer re-purposing.</p></div>

Hoping someone can guide me to fix this!!
Thanks