FireFox y Opera: Transparencias?

[lag_0]

He hecho un script de Fade In y Fade Out con transparencias que en I.E funciona muy bien pero no consigo que funcione en Firefox ni en Opera ni Safari... Ahí va por si os interesa usarlo o se os ocurre la fantastica idea de como hacerlo funcionar (me haríais un gran favor):

var CountFadeID = new Array();
function FadeInEffect(FadeObject,max,mult) {
max = max+1;
document.getElementById(FadeObject.id).filters[0].opacity=(document.getElementById(FadeObject.id).filters[0].opacity+mult);
if ((document.getElementById(FadeObject.id).filters[0].opacity < max) && (CountFadeID[FadeObject.id] == 'in')) {
setTimeout('FadeInEffect('+FadeObject.id+','+(max-1)+','+mult+')', 5); }
}
function SetFadeIn(FadeObject,max,mult) {
CountFadeID[FadeObject.id] = 'in';
setTimeout('FadeInEffect('+FadeObject.id+','+max+','+mult+')', 5);
}
function FadeOutEffect(FadeObject,max,mult) {
max = max-1;
document.getElementById(FadeObject.id).filters[0].opacity=(document.getElementById(FadeObject.id).filters[0].opacity-mult);
if ((document.getElementById(FadeObject.id).filters[0].opacity > max) && (CountFadeID[FadeObject.id] == 'out')) {
setTimeout('FadeOutEffect('+FadeObject.id+','+(max+1)+','+mult+')', 5);
}
}
function SetFadeOut(FadeObject,max,mult) {
CountFadeID[FadeObject.id] = 'out';
setTimeout('FadeOutEffect('+FadeObject.id+','+max+','+mult+')', 5);
}

Implementación:
<img src="a.gif" id="imagen1" onmouseover="javascript:SetFadeIn(this,'100','5');" onmouseout="javascript:SetFadeOut(this,'65','5');" style="filter:alpha(opacity=35);-moz-opacity:.100;opacity:.100;" />

Las 2 ultimas cosas del style son para que se vea opaco o no en firefox y demás, si las bajais se verá más transparente lo único que el fade no lo hará...
Y respecto a las variables de la función... En la In, el máximo de opaco, en la out el minimo de transparente... y la segunda es el "multiplicador" contra más alto sea más prisa se da en llegar al minimo/maximo asignado...
El efecto fade in fade out queda muy bien y por más que busqué no encontré nada util ya hecho para todos los navegadores...
Ah y creo que en FF no funciona tampoco el setTimeout tal y como está puesto por que no pasa bien el objeto o no lo tengo muy claro... pero como no me funcionaba de ninguna forma la transparencia lo dejé estar.. A ver si alguien se anima

Un saludo!!!

[Ñuño Martínez]

El por qué funciona única y exclusivamente en Internet Explorer puede deberse a que la propiedad de estilo "opacity" sea una extensión de Microsoft que no forma parte de la norma (como el < marquee > en su día). O al menos eso dice mi tabla de VisiBone (http://www.visibone.com/) ni aparece en ninguna de las descripciones oficiales (http://www.w3.org/Style/CSS/). ¿O no es CSS? :confused:

[lag_0]

El por qué funciona única y exclusivamente en Internet Explorer puede deberse a que la propiedad de estilo "opacity" sea una extensión de Microsoft que no forma parte de la norma (como el < marquee > en su día). O al menos eso dice mi tabla de VisiBone (http://www.visibone.com/) ni aparece en ninguna de las descripciones oficiales (http://www.w3.org/Style/CSS/). ¿O no es CSS? :confused:
Si yo de estandares y quien se inventó que no tengo ni zorra, pero aún así no es culpa del opacity, sifuera por eso habría puesto un if y listo... el tema está en que el settimer no pasa bien el objeto

[lag_0]

http://brainerror.net/scripts/javascript/blendtrans/
:)

[lag_0]

var BrowserDetect = {
init: function () {
this.browser = this.searchString(this.dataBrowser) || "Other"; },
searchString: function (data) {
for (var i=0;i<data.length;i++) {
var dataString = data[i].string;
var dataProp = data[i].prop;
this.versionSearchString = data[i].versionSearch || data[i].identity;
if (dataString) {
if (dataString.indexOf(data[i].subString) != -1)
return data[i].identity; }
else if (dataProp)
return data[i].identity;
} },
dataBrowser: [ {
string: navigator.vendor,
subString: "Apple",
identity: "Safari"
}, {
string: navigator.vendor,
subString: "KDE",
identity: "Konqueror"
}, {
string: navigator.userAgent,
subString: "Firefox",
identity: "Firefox"
}, {
string: navigator.userAgent,
subString: "MSIE",
identity: "Explorer",
versionSearch: "MSIE"
}, {
string: navigator.userAgent,
subString: "Gecko",
identity: "Mozilla",
versionSearch: "rv"
}, {
string: navigator.userAgent,
subString: "Mozilla",
identity: "Netscape",
versionSearch: "Mozilla" } ],
dataOS : [ { } ] };
BrowserDetect.init();
var faderray = new Array();
function FadeIn(objectto,limit,speed) {
faderray[objectto.id] = 'i';
if (BrowserDetect.browser == 'Explorer') {
setTimeout("IEChangeOpacityFadeIn('"+objectto.id+"','"+ limit +"','"+ speed+"')",20);
} else if ((BrowserDetect.browser == 'Firefox') || (BrowserDetect.browser == 'Netscape') || (BrowserDetect.browser == 'Mozilla')) {
setTimeout("FFChangeOpacityFadeIn('"+objectto.id+"','"+ limit +"','"+ speed+"')",20);
} else if ((BrowserDetect.browser == 'Safari') || (BrowserDetect.browser == 'KDE')) {
setTimeout("KHChangeOpacityFadeIn('"+objectto.id+"','"+ limit +"','"+ speed+"')",20);
} else {
setTimeout("CSChangeOpacityFadeIn('"+objectto.id+"','"+ limit +"','"+ speed+"')",20);
}
}
function FadeOut(objectto,limit,speed) {
faderray[objectto.id] = 'o';
if (BrowserDetect.browser == 'Explorer') {
setTimeout("IEChangeOpacityFadeOut('"+objectto.id+"','"+ limit +"','"+ speed+"')",20);
} else if ((BrowserDetect.browser == 'Firefox') || (BrowserDetect.browser == 'Netscape') || (BrowserDetect.browser == 'Netscape')) {
setTimeout("FFChangeOpacityFadeOut('"+objectto.id+"','"+ limit +"','"+ speed+"')",20);
} else if ((BrowserDetect.browser == 'Safari') || (BrowserDetect.browser == 'KDE')) {
setTimeout("KHChangeOpacityFadeOut('"+objectto.id+"','"+ limit +"','"+ speed+"')",20);
} else {
setTimeout("CSChangeOpacityFadeOut('"+objectto.id+"','"+ limit +"','"+ speed+"')",20);
}
}
function IEChangeOpacityFadeIn(objectto,limit,speed) {
var object = document.getElementById(objectto);
actualop = eval(object.filters.alpha.opacity);
for (i=0;i<speed;i++) {
actualop++; }
if (actualop > limit) {
actualop = limit; }
if ((actualop <= limit) && (faderray[objectto] == 'i')) {
object.filters.alpha.opacity=actualop;
setTimeout("IEChangeOpacityFadeIn('"+objectto+"','"+ limit +"','"+ speed+"')",20);
}
}
function IEChangeOpacityFadeOut(objectto,limit,speed) {
var object = document.getElementById(objectto);
actualop = eval(object.filters.alpha.opacity);
for (i=0;i<speed;i++) {
actualop--; }
if (actualop < limit) {
actualop = limit; }
if ((actualop >= limit) && (faderray[objectto] == 'o')) {
object.filters.alpha.opacity=actualop;
setTimeout("IEChangeOpacityFadeOut('"+objectto+"','"+ limit +"','"+ speed+"')",20);
}
}
function FFChangeOpacityFadeIn(objectto,limit,speed) {
var object = document.getElementById(objectto);
actualop = object.style.MozOpacity*100;
for (i=0;i<speed;i++) {
actualop++; }
if (actualop > limit) {
actualop = limit; }
if ((actualop <= limit) && (faderray[objectto] == 'i')) {
object.style.MozOpacity=(actualop/100);
setTimeout("FFChangeOpacityFadeIn('"+objectto+"','"+ limit +"','"+ speed+"')",20);
}
}
function FFChangeOpacityFadeOut(objectto,limit,speed) {
var object = document.getElementById(objectto);
actualop = object.style.MozOpacity*100;
for (i=0;i<speed;i++) {
actualop--; }
if (actualop < limit) {
actualop = limit; }
if ((actualop >= limit) && (faderray[objectto] == 'o')) {
object.style.MozOpacity=(actualop/100);
setTimeout("FFChangeOpacityFadeOut('"+objectto+"','"+ limit +"','"+ speed+"')",20);
}
}
function KHChangeOpacityFadeIn(objectto,limit,speed) {
var object = document.getElementById(objectto);
actualop = object.style.KhtmlOpacity*100;
for (i=0;i<speed;i++) {
actualop++; }
if (actualop > limit) {
actualop = limit; }
if ((actualop <= limit) && (faderray[objectto] == 'i')) {
object.style.KhtmlOpacity=(actualop/100);
setTimeout("KHChangeOpacityFadeIn('"+objectto+"','"+ limit +"','"+ speed+"')",20);
}
}
function KHChangeOpacityFadeOut(objectto,limit,speed) {
var object = document.getElementById(objectto);
actualop = object.style.KhtmlOpacity*100;
for (i=0;i<speed;i++) {
actualop--; }
if (actualop < limit) {
actualop = limit; }
if ((actualop >= limit) && (faderray[objectto] == 'o')) {
object.style.KhtmlOpacity=(actualop/100);
setTimeout("KHChangeOpacityFadeOut('"+objectto+"','"+ limit +"','"+ speed+"')",20);
}
}
function CSChangeOpacityFadeIn(objectto,limit,speed) {
var object = document.getElementById(objectto);
actualop = object.style.opacity*100;
for (i=0;i<speed;i++) {
actualop++; }
if (actualop > limit) {
actualop = limit; }
if ((actualop <= limit) && (faderray[objectto] == 'i')) {
object.style.opacity=(actualop/100);
setTimeout("CSChangeOpacityFadeIn('"+objectto+"','"+ limit +"','"+ speed+"')",20);
}
}
function CSChangeOpacityFadeOut(objectto,limit,speed) {
var object = document.getElementById(objectto);
actualop = object.style.opacity*100;
for (i=0;i<speed;i++) {
actualop--; }
if (actualop < limit) {
actualop = limit; }
if ((actualop >= limit) && (faderray[objectto] == 'o')) {
object.style.opacity=(actualop/100);
setTimeout("CSChangeOpacityFadeOut('"+objectto+"','"+ limit +"','"+ speed+"')",20);
}
}

Esto es lo que pasa cuando TODOs los navegadores crean su standar... :D
Funcionar funciona de coña, lo tuve que hacer yo por que no encontraba ninguno que me gustase.. todos eran una basura (con perdon a los que lo programaran)...
Pero el codigo queda muy largo... El script de detectar navegador no es mio, y esta "capuzamente" resumido por que como es lógico lo haré desde PHP pero ahí queda por si alguien lo uqiere XD