Saluti a tutti,
mi sono messo in testa di alfabetizzarmi in js... per cui sto smanettando con scriptini e
altri esempi da personalizzare... insomma smonto un po' il giocattolo...

Ho personalizzato uno script per il fading di immagini e sono incappato in questo strano comportamento...

Ho una pagina composta da un div contenitore con altri div al suo interno...

  • Caricando la pagina, un .js provvede a creare un effetto fading dei contenuti del div contenitore...
  • Tutto bene... ma se a uno dei contenuti imposto nel css l'attributo position:relative, con IE lo script smette di avere effetto su di esso...
  • Con FF invece continua a funzionare tutto perfettamente...


Quando mi trovo davanti a comportamenti inspiegabili mi incaxxo

Da cosa può dipendere? Avete qualche dritta/consiglio/spiegazione?

Ecco una DEMO ON LINE della pagina...

Ed ecco il .js:
codice:
<script type="text/javascript">
<!--
document.write("<style type='text/css'>#div_che_subisce_il_fading {visibility:hidden;}</style>");

function initImage() {
	imageId = 'div_che_subisce_il_fading';
	image = document.getElementById(imageId);
	setOpacity(image, 0);
	image.style.visibility = "visible";
	fadeIn(imageId,0);
}
function fadeIn(objId,opacity) {
	if (document.getElementById) {
		obj = document.getElementById(objId);
		if (opacity <= 100) {
			setOpacity(obj, opacity);
			opacity += 10;
			window.setTimeout("fadeIn('"+objId+"',"+opacity+")", 100);
		}
	}
}
function setOpacity(obj, opacity) {
	opacity = (opacity == 100)?99.999:opacity;
	// IE/Win
	obj.style.filter = "alpha(opacity:"+opacity+")";
	// Safari<1.2, Konqueror
	obj.style.KHTMLOpacity = opacity/100;
	// Older Mozilla and Firefox
	obj.style.MozOpacity = opacity/100;
	// Safari 1.2, newer Firefox and Mozilla, CSS3
	obj.style.opacity = opacity/100;
}
window.onload = function() {initImage()}
// -->
</script>