Image Fade 1

When the page has loaded the minimum opacity value is applied to the appropriate images.
The maximum and minimum opacity values are set at variables maxOpac and minOpac.
Mousing over an image fades the image in to the maximum opacity setting, mousing out fades the image out to the minimum opacity setting.
The mouse events are dynamically applied to the fading images, clicking on an image will show the larger image or go to a url depending on how you code the array.

Create your image as normal using the img tag, any image that is required to fade must be given the id imgfade followed by an ordinal number starting from zero.

The array, imgArr, must have the same number of indexes as there are fading images and are populated with the larger image or a url.
If no larger image or url is require the appropriate array index should be left empty.

imgArr=new Array()
imgArr[0="pic01.jpg" // show image
imgArr[1]="page2.htm" // go to url
imgArr[2]="", // no image or url
imgArr[3]="pic04.jpg"
imgArr[4]="pic05.jpg"
imgArr[5]="pic06.jpg"

<HTML>
<HEAD>
<TITLE>Image Fade 3</TITLE>

<script type="text/javascript">
<!--

imgArr=new Array()
imgArr[0]="pic01.jpg" // show image
imgArr[1]="page2.htm" // go to url
imgArr[2]="", // no image or url
imgArr[3]="pic04.jpg"
imgArr[4]="pic05.jpg"
imgArr[5]="pic06.jpg"

maxOpac=100
minOpac=30
step=10

preload=new Array()
for(var i=0;i<imgArr.length;i++){
if(imgArr[i].indexOf(".htm") == -1){
preload[i]=new Image()
preload[i].src=imgArr[i]
}
}

function initObjectsAndEvents(){
imgEl = document.getElementsByTagName("img")

i = 0

while(i<imgEl.length){
imgEl[i].i=i

window["myObject"+imgEl[i].i]=new fadeFunctions("imgfade"+imgEl[i].i)

imgEl[i].onmouseover=function(){window["myObject"+this.i].chkStatus(this.i,'fadein')}
imgEl[i].onmouseout=function(){window["myObject"+this.i].chkStatus(this.i,'fadeout')}
imgEl[i].onclick=function(){newLocation(imgArr[this.i])}

if(imgEl[i].filters){imgEl[i].style.filter="alpha(opacity="+minOpac+")"}
else{imgEl[i].style.opacity = minOpac/100}

i++

}

}

function fadeFunctions(id){
this.id=id
this.timer=null
this.running=0
this.opac=minOpac

this.chkStatus=function(num,fadeMode){
this.mode=fadeMode
if(this.dir=="fadeout"){this.running=0}
if(this.mode=="fadein"&&this.running==1){return}
this.running=1

window["myObject"+num].fade('myObject'+num)

}

this.fade=function(myobject){
if(this.mode=="fadein"){this.opac+=step}
else{this.opac-=step}
this.timer=setTimeout(myobject+".fade('"+myobject+"')",50)

if(this.mode=="fadein"&&this.opac>maxOpac){
this.running=0
this.opac=maxOpac
clearTimeout(this.timer)
}

if(this.mode=="fadeout"&&this.opac<minOpac){
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
}
}

}

alwaysCenter=1 // 0 = no 1 = yes
popLeft=0 // popup default left, use if not centering
popTop=0 // popup default top, use if not centering

IEoffsetWidth=20
IEoffsetHeight=25

newWin=null

function newLocation(url){
if(newWin&&!newWin.closed){
newWin.close()
}

if(url.indexOf(".htm") != -1){
//location=url
newWin=window.open(url,'win1')

}
else{

currentImage= new Image()
currentImage.src=url

popWidth=currentImage.width+IEoffsetWidth
popHeight=currentImage.height+IEoffsetHeight


if(alwaysCenter==1){
popLeft = (screen.availWidth - popWidth) / 2
popTop = (screen.availHeight - popHeight) / 2
}

newWin=window.open(url,'win1','left='+ popLeft +',top='+ popTop +',width='+ popWidth +',height='+ popHeight +',scrollbars=0,resizable=0')
newWin.document.body.style.backgroundColor="#000000"
newWin.focus()

}

}

// add  onload="initObjectsAndEvents()" to the opening BODY tag
// -->
</script>

</HEAD>
<BODY  onload="initObjectsAndEvents()">
<h1><span>Image Fade 3</span></h1>

<img id="imgfade0" src="pic1sm.jpg">
<img id="imgfade1" src="pic2sm.jpg">
<img id="imgfade2" src="pic3sm.jpg">
<img id="imgfade3" src="pic4sm.jpg">
<img id="imgfade4" src="pic5sm.jpg">
<img id="imgfade5" src="pic6sm.jpg">

</BODY>
</HTML>