Image Rollerover 1

Onmouseover the second image fades in, onmouseout the second image fades out.
Onclick the second image remains until another image is clicked and the previously clicked image fades out.

Two divs are used for this effect, one as the container for a nested div, the container is given the background of the first image while the second nested div is given the background of the second image.

The container div is coded into the page and must be given the class name ir1cont this is used by the script to assign ID's to the appropriate divs.

The script dynamically creates the nested div and applies the backgrounds to both the divs, the background images are coded into the array as pairs.

The divs and the images should all be the same size, the div sizes can be changed to suit in the css rules
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 clickEnabled to zero

<HTML>
<HEAD>
<TITLE>Image Rollerover 1</TITLE>

<script type="text/javascript">
//Jeff
//www.huntingground.freeserve.co.uk

ir1Arr=[
["pic01sm.jpg","pic02sm.jpg"],
["pic03sm.jpg","pic04sm.jpg"],
["pic05sm.jpg","pic06sm.jpg"],
["pic07sm.jpg","pic08sm.jpg"]
]

clickEnabled=1 // 0 =no 1 = yes

fadeInStep=10
fadeOutStep=20

function initIr1(){

minOpac=0
maxOpac=100
lastNum=0

getDivs=document.getElementsByTagName("DIV")
for(var i=0;i<getDivs.length;i++){
if(/ir1cont/.test(getDivs[i].className)){ // test for class name ir1cont
getDivs[i].id="ir1_"+i // and assign id
}
}

count=0
while(document.getElementById("ir1_"+count)){

parentEl=document.getElementById("ir1_"+count)
parentEl.style.backgroundImage="url("+ir1Arr[count][0]+")"

nestedDiv=document.createElement("DIV")
nestedDiv.className="ir1nested"
nestedDiv.style.backgroundImage="url("+ir1Arr[count][1]+")"
nestedDiv.id="ir1fade"+count

parentEl.appendChild(nestedDiv)

window["ir1Fader"+count]=new createIr1("ir1fade"+count)

parentEl.count=count
parentEl.onmouseover=function(){window["ir1Fader"+this.count].chkStatus(1,this.count)}
parentEl.onmouseout=function(){window["ir1Fader"+this.count].chkStatus(0,this.count)}

if(clickEnabled==1){
document.getElementById("ir1fade"+count).c=count
document.getElementById("ir1fade"+count).onclick=function(){window["ir1Fader"+this.c].chkClick(this.c)}
}

count++
}

}

lastClickNum=null
function createIr1(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["ir1Fader"+lastClickNum].isClicked=false
window["ir1Fader"+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["ir1Fader"+num].animate('ir1Fader'+num)

if(lastNum!=num){
window["ir1Fader"+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="initIr1()" to the opening BODY tag

</script>


<style type="text/css">

.ir1cont{
position:relative;
width:100px;
height:50px;
}

.ir1nested{
position:absolute;
top:0px;
left:0px;
width:100px;
height:50px;
display:block;
opacity:0;
}

</style>

<!--[if IE]>
<style type="text/css">
.ir1nested{
filter:alpha(opacity=0);
}
</style>
<![endif]-->

</HEAD>
<BODY  onload="initIr1()">
<h1>Image Rollerover 1</h1>

<div class="ir1cont"></div>
<div class="ir1cont"></div>
<div class="ir1cont"></div>
<div class="ir1cont"></div>

</BODY>
</HTML>