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):

Código PHP:

  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:

Código PHP:

  <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!!!

[Panino5001]

Mirate esto: http://brainerror.net/scripts/javascript/blendtrans/

[lag_0]

Gracias jeje pero más bien buscaba una manera mágica de adaptarlo... esa web el problema que tiene es que aún funcionando (y no en todos) dará error...

Código PHP:

  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

[derkenuke]

Hola lag_0:

Sólo por ahorrarte código (creo que hay muchisimas cosas duplicadas... demasiadas funciones. En todo caso el browser detection lo tendrías que hacer en una función llamada changeOpacityFadeXX(), que sea única para todos los navegadores.


También creo recordar que firefox soporta .style.opacity a secas.. no estoy seguro.

Bueno, mira a ver si algo como esto da errores. Es aunar las 4 instrucciones en la misma función. Te ahorras un montón de funciones y la detección de navegador:

Código PHP:

  var faderray = new Array();
function FadeIn(objectto,limit,speed) {
  faderray[objectto.id] = 'i';
  setTimeout("changeOpacityFadeIn('"+objectto.id+"','"+ limit +"','"+ speed+"')",20);
}
function FadeOut(objectto,limit,speed) {
  faderray[objectto.id] = 'o';
  setTimeout("changeOpacityFadeOut('"+objectto.id+"','"+ limit +"','"+ speed+"')",20);
}
function getOpacity(obj) {
    // Tenemos que mirar los 4 metodos, a ver cual contiene datos:
    // 1. object.filters.alpha.opacity
    // 2. object.style.MozOpacity*100
    // 3. object.style.KhtmlOpacity*100
    // 4. object.style.opacity*100
}
function changeOpacityFadeIn(objectto,limit,speed) {
  var object = document.getElementById(objectto); 
  actualop = getOpacity(object);
  for (i=0;i<speed;i++) {
    actualop++; }
  if (actualop > limit) {
    actualop = limit; }
   if ((actualop <= limit) && (faderray[objectto] == 'i')) {
     object.filters.alpha.opacity=actualop;
     object.style.MozOpacity=(actualop/100);
     object.style.KhtmlOpacity=(actualop/100);
     object.style.opacity=(actualop/100);
     setTimeout("changeOpacityFadeIn('"+objectto+"','"+ limit +"','"+ speed+"')",20);
   }
}  
   

Luego te quedaría el changeOpacityFadeOut() que funciona igual.



Un saludo