Más opacidad en el contenido de un div en Safari

Lleoun · #1 (**permalink**) 16/07/2008, 09:48

Hola a todos,

El script de más abajo muestra con más opacidad los contenidos del div "myDiv" cuando pasas con el ratón por encima de él. Lo hace genial en FireFox e Internet Explorer pero en Safari no pasa nada. ¿Cómo tengo que cambiar el script para que funcione en Safari??

Muchas gracias de antemano!!

Código:

    

  <head>
<script type="text/javascript">
 
window.onload = init
function init()
{
 var d = window.document.getElementById("myDiv");
d.className="gradualshine";
d.onmouseover=function(){ slowhigh(this); };
d.onmouseout=function(){slowlow(this);};
}
 
var baseopacity=10
 
function slowhigh(which2){
imgobj=which2
browserdetect=which2.filters? "ie" : typeof which2.style.MozOpacity=="string"? "mozilla" : ""
instantset(baseopacity)
highlighting=setInterval("gradualfade(imgobj)",50)
}
 
function slowlow(which2){
cleartimer()
instantset(baseopacity)
}
 
function instantset(degree){
if (browserdetect=="mozilla")
imgobj.style.MozOpacity=degree/100
else if (browserdetect=="ie")
imgobj.filters.alpha.opacity=degree
}
 
function cleartimer(){
if (window.highlighting) clearInterval(highlighting)
}
 
function gradualfade(cur2){
if (browserdetect=="mozilla" && cur2.style.MozOpacity<1)
cur2.style.MozOpacity=Math.min(parseFloat(cur2.style.MozOpacity)+0.1, 0.99)
else if (browserdetect=="ie" && cur2.filters.alpha.opacity<100)
cur2.filters.alpha.opacity+=10
else if (window.highlighting)
clearInterval(highlighting)
}
 
</script>
 
    <style type="text/css">
 
.gradualshine{
filter:alpha(opacity=30);
-moz-opacity:0.3;
}
 
#myDiv{
width:200px;
height:200px;
border: 1px solid #be0002;
}
 
 
 
</style>
 
  </head>
  <body>
 
 
<div id="myDiv">
text<br>
<img src="picture.jpg" border="0">
</div>

buzu · #2 (**permalink**) 16/07/2008, 22:38

prueva con opacity: .5; para Safari en CSS y opacity = .5 en JS.

Lleoun · #3 (**permalink**) 17/07/2008, 02:26

¡Gracias! ¡Gracias! ¡¡Ahora funciona genial!!

Una última cosa a ver si se me puede ayudar de nuevo:

Para que el script funcione tengo que añadir al div: class="gradualshine" onMouseover="slowhigh(this)" onMouseout="slowlow(this)"
Y así termine siendo:

Código:

<div id="myDiv" class="gradualshine" onMouseover="slowhigh(this)" onMouseout="slowlow(this)">

En el código que posteé en mi primer mensaje, el div está en el mismo archivo que el resto de la programación, pero "en la vida real" no lo está, el div tiene que estar en un archivo separado del resto de la programación (al final todos los archivos son unidos y llamados desde un archivo index principal).
Por eso estoy usando:

Código:

window.onload = init
function init()
{
 var d = window.document.getElementById("myDiv");
d.className="gradualshine";
d.onmouseover=function(){ slowhigh(this); };
d.onmouseout=function(){slowlow(this);};
}

Esta función va genial en FireFox pero no funciona en absoluto para Internet Explorer y Safari. Sé que todo el script funciona en Internet Explorer y Safari porque lo he probado con el div en el mismo archivo, pero tan pronto como el div está en un archivo separado IE y Safari no lo pillan.
¿¿Alguna idea de como arreglar esa función para que vaya bien en IE y Safari??

¡¡Muchas gracias otra vez!!

buzu · #4 (**permalink**) 17/07/2008, 09:07

No deberías tener ese problema. Lo mas probable es que no sea la función init() sino la que une los elementos o alguna otra. Quizá estas tratando de cargar mas de una función con el evento onload del objeto window. La verdad que necesitaría ver mas para poder decirte con exactitud cual es el problema.