Aiuto per correzione script fade in/out: funziona su FF ma non su IE

[superpelo]

Ciao a tutti,
come da titolo mi servirebbe un aiutino per correggere questo script che sono riuscito a far funzionare su FF ma non su IE dove ottengo l'errore js "filters.alpha è nullo o non è un oggetto".. ma non riesco a capire perchè..

var browserdetect = null;

function increaseOpacity(image){
	clearTimer();
	obj = image;
	setOpacity(obj,0);
	highlighting = setInterval("fade(obj,1)",50);
}

function decreaseOpacity(image){
	browserdetect = ( image.filters ) ? "ie" : typeof image.style.MozOpacity == "string" ? "mozilla" : "";
	clearTimer();
	obj = image;
	setOpacity(obj,100);
	highlighting = setInterval("fade(obj,0)",50);
}

function setOpacity(obj,value) {
	if ( browserdetect == "mozilla" )
		obj.style.MozOpacity = value/100;
	else if ( browserdetect == "ie" )
		obj.filters.alpha.opacity = value;
}

function clearTimer(){
	if ( window.highlighting )
		clearInterval(highlighting);
}

function fade(obj,in_out){
	if ( in_out == 1 ) {
		if ( browserdetect == "mozilla" && obj.style.MozOpacity < 1 )
			obj.style.MozOpacity = Math.min(parseFloat(obj.style.MozOpacity)+0.1, 0.99);
		else if ( browserdetect == "ie" && obj.filters.alpha.opacity < 100 )
			obj.filters.alpha.opacity += 10;
		else
			clearTimer();
	}
	else {
		if ( browserdetect == "mozilla" && obj.style.MozOpacity > 0 )
			obj.style.MozOpacity = Math.max(parseFloat(obj.style.MozOpacity)-0.1, 0.00);
		else if ( browserdetect=="ie" && obj.filters.alpha.opacity > 0 )
			obj.filters.alpha.opacity -= 10;
		else
			clearTimer();
	}
}

Il js lo utilizzo in questo modo:

[img]img.jpg[/img]

Grazie a tutti!

[Xinod]

ma l' immagine si ritrova originariamente assegnato lo style
filter:alpha(opacity=100);
?
se non vado errato non puo' funzionare altrimenti

[superpelo]

Grazie! Non sai quanto quanti scleri ci ho fatto sopra!

Al posto di associare questo style alle immagini attraverso CSS non posso in qualche modo farlo in questa funzione?

function setOpacity(obj,value) {
	if ( browserdetect == "mozilla" )
		obj.style.MozOpacity = value/100;
	else if ( browserdetect == "ie" ) {
		obj.filters[0].opacity = value;
	}
}

[Xinod]

siamo sempre li', lo assegni via javascript

ci sono anche i commenti condizionali che ti permettono di scrivere regole css solo IE,
per puro esempio, questo setterebbe tutte le immagini del documento a opacita' 100

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

e dovrebbe passare anche la validazione

altrimenti, prima di cercare di animare l' opacita' via javascript
puoi provare a settare l' opacita' come un css in linea con un imbroglio del genere

riferimentoTuaImmagine.style.cssText="filter:alpha(opacity=100);"

chiaramente da far eseguire solo se il browser e' IE

ciao

[superpelo]

Grazie mille, sono riuscito a fare quello che mi hai consigliato.

Però è nato un altro problema; ti spiego cosa vorrei ottenere: una serie di bottoni che passandoci sopra hanno un effetto di fade in/out.. praticamente puoi vedere il risultato qua: http://www.ccalambro.it/. Appena caricata la pagina, se vai sopra al primo bottone in alto a sinistra vedi che funziona tutto correttamente. Se invece passi da un bottone all'altro vedi che vanno in bambola.. E' come se si infastidissero a vicenda.. eppure ho separato i timer.. non capisco dov'è il problema..



Ecco il codice:

var browserdetect = null;
var opacity = null;
var timerID = new Array();

function increaseOpacity(image){
	obj = image;
	clearTimer(obj.src);
	setOpacity(obj,0);
	timerID[obj.src] = setInterval("fade(obj,1)",50);
}

function decreaseOpacity(image){
	obj = image;
	clearTimer(obj.src);
	setOpacity(obj,opacity);
	timerID[obj.src] = setInterval("fade(obj,0)",50);
}

function setOpacity(obj,value) {
	if ( browserdetect == "mozilla" )
		obj.style.MozOpacity = value/100;
	else if ( browserdetect == "ie" ) {
		obj.style.cssText = "filter:alpha(opacity="+opacity+");";
		obj.filters[0].opacity = value;
	}
}

function clearTimer(index){
	if ( timerID[index] )
		clearInterval(timerID[index]);
}

function fade(obj,in_out){
	if ( in_out == 1 ) {
		if ( browserdetect == "mozilla" && obj.style.MozOpacity < 1 )
			obj.style.MozOpacity = Math.min(parseFloat(obj.style.MozOpacity)+0.1, (opacity/100) );
		else if ( browserdetect == "ie" && obj.filters[0].opacity < opacity ) {
			obj.filters[0].opacity += 10;
		}
		else
			clearTimer(obj.src);
	}
	else {
		if ( browserdetect == "mozilla" && obj.style.MozOpacity > 0 )
			obj.style.MozOpacity = Math.max(parseFloat(obj.style.MozOpacity)-0.1, 0.00);
		else if ( browserdetect == "ie" && obj.filters[0].opacity > 0 ) {
			obj.filters[0].opacity -= 10;
		}
		else
			clearTimer(obj.src);
	}
}

window.onload = function() {
	opacity = 50;
	node = document.getElementsByTagName('body');
	listaBottoni = getElementsByClass('bottone',node[0],'img');
	if ( listaBottoni.length > 0 )
		browserdetect = ( listaBottoni[0].filters ) ? "ie" : typeof listaBottoni[0].style.MozOpacity == "string" ? "mozilla" : "";
	for (i = 0; i < listaBottoni.length; i++) {
		listaBottoni[i].src = 'b_'+(i+1)+'.gif';
		setOpacity(listaBottoni[i],opacity);
	}
}

function getElementsByClass(searchClass,node,tag) {
	var classElements = new Array();
	if ( node == null )
		node = document;
	if ( tag == null )
		tag = '*';
	var els = node.getElementsByTagName(tag);
	var elsLen = els.length;
	var pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)");
	for (i = 0, j = 0; i < elsLen; i++) {
		if ( pattern.test(els[i].className) ) {
			classElements[j] = els[i];
			j++;
		}
	}
	return classElements;
}