|
|
|
|
Swap between two images using onmouseover and onmouseout, the first image fades out as the second image fades in.
|
|
|
|
|
Each mouseover effect requires 2 image tags contained in a div.
Each div must be given the ID ir2div followed by an ordinal number starting from zero
<div id="ir2div0" class="ir2div imgsize">
<img class="img1opac imgsize" src="pic1.jpg">
<img class="img2opac imgsize" src="pic2.jpg">
</div>
The css classes must also be included in the relative tags
The script dynamically applies the appropriate mouse events to the image tags
<HTML>
<HEAD>
<TITLE>Image Rollerover 2</TITLE>
<script type="text/javascript">
<!--
//Jeff
//www.huntingground.freeserve.co.uk
fadeStep=10
function initIR2(){
isOk=0
elNum=0
idNum=0
elCount=0
divCount=0
lastNum=0
lastDiv=null
while(document.getElementById("ir2div"+divCount)){
for(var i=0;i<2;i++){
imgEl=document.getElementById("ir2div"+divCount).getElementsByTagName("IMG")[i]
imgEl.id="ir2EL"+idNum // assign ID to img tags
imgEl.divCount=divCount
imgEl.elNum=elNum
imgEl.onmouseout=function(){fadeIr2(this.divCount,this.elNum)} // assign mouse events to img tags
imgEl.onmouseover=function(){fadeIr2(this.divCount,this.elNum+1)} // assign mouse events to img tags
idNum++
}
for(var j=elCount;j<elCount+2;j++){
window["ir2Obj"+j]=new createIsfObj("ir2EL"+j)
}
elCount=j
elNum+=2
divCount++
}
isOk=1
}
function fadeIr2(divNum,n){
if(isOk==0){return}
window["ir2Obj"+n].chkIr2Status(1,n,divNum)
}
function createIsfObj(id){
this.id=id
this.timer=null
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.chkIr2Status=function(d,num,divNum){
this.dir=d
this.divNum=divNum
this.opacStep=fadeStep
window["ir2Obj"+num].ir2Fade('ir2Obj'+num)
if(lastNum!=num&&lastDiv==divNum){
window["ir2Obj"+lastNum].chkIr2Status(0,lastNum)
}
lastNum=num
lastDiv=divNum
}
this.ir2Fade=function(myobject){
if(this.dir==1){
this.opac=(this.opac+this.opacStep)*1
}
else{
this.opac=(this.opac-this.opacStep)*1
}
this.timer=setTimeout(myobject+".ir2Fade('"+myobject+"')",50)
if(this.dir==1&&this.opac>100-this.opacStep){
this.opac=100
clearTimeout(this.timer)
}
if(this.dir==0&&this.opac<this.opacStep){
this.opac=0
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="initIR2()" to the opening BODY tag
// -->
</script>
<style type="text/css">
.ir2div{
position:relative
}
.img1opac{
position:absolute;
left:0px;
top:0px;
filter:alpha(opacity=100);
opacity:1;
}
.img2opac{
position:absolute;
left:0px;
top:0px;
filter:alpha(opacity=0);
opacity:0;
}
.imgsize{
width:150px;
height:100px;
}
</style>
</HEAD>
<BODY onload="initIR2()">
<h1><span>Image Rollerover 2</span></h1>
<center>
<table border="1">
<tr>
<td>
<div id="ir2div0" class="ir2div imgsize">
<img class="img1opac imgsize" src="pic1.jpg">
<img class="img2opac imgsize" src="pic2.jpg">
</div>
</td>
<td>
<div id="ir2div1" class="ir2div imgsize">
<img class="img1opac imgsize" src="pic3.jpg">
<img class="img2opac imgsize" src="pic4.jpg">
</div>
</td>
<td>
<div id="ir2div2" class="ir2div imgsize">
<img class="img1opac imgsize" src="pic5.jpg">
<img class="img2opac imgsize" src="pic6.jpg">
</div>
</td>
<td>
<div id="ir2div3" class="ir2div imgsize">
<img class="img1opac imgsize" src="pic7.jpg">
<img class="img2opac imgsize" src="pic8.jpg">
</div>
</td>
</tr>
</table>
</center>
</BODY>
</HTML>