Io ho usato questo:
codice:
function initImage(objId){
image = document.getElementById(objId);
setOpacity(image, 0);
image.style.visibility = 'visible';
fadeIn(objId,0);
}
function setOpacity(obj,opacity){
opacity=(opacity==100) ? 99.999 : opacity;
obj.style.filter = "alpha(opacity:"+opacity+")"; // IE/Win
obj.style.KHTMLOpacity = opacity/100; // Safari<1.2, Konqueror
obj.style.MozOpacity = opacity/100; // Older Mozilla and Firefox
obj.style.opacity = opacity/100; // Safari 1.2, newer Firefox and Mozilla, CSS3
}
function fadeIn(objId,opacity){
if(!document.getElementById) return;
obj = document.getElementById(objId);
if(opacity <= 100){
setOpacity(obj,opacity);
opacity += 10;
window.setTimeout("fadeIn('"+objId+"',"+opacity+")", 100);
}
}
//la temporarizzazione e l' opacità finale sono state leggermente cambiate
function fadeOut(objId,opacity){
if(!document.getElementById) return;
obj = document.getElementById(objId);
if(opacity >= 30){
setOpacity(obj,opacity);
opacity -= 10;
window.setTimeout("fadeOut('"+objId+"',"+opacity+")", 50);
}
}
//funzione aggiunta: fadeOut e fadeIn al passaggio del mouse
function setFade(objId){
el=document.getElementById(objId);
el.onmouseover=function(){fadeOut(objId,100)};
el.onmouseout=function(){fadeIn(objId,40)};
}
articolo e sorgente: http://clagnut.com/sandbox/imagefades/
ciao