Javascript: Más opacidad en el contenido de un div en Safari
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!!
<code>
<head>
<script>
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>
.gradualshine{
filter:alpha(opacity=30);
-moz-opacity:0.3;
}
#myDiv{
width:200px;
height:200px;
border: 1px solid #be0002;
}
</style>
</head>
<body>
<div>
text<br>
<img src="picture.jpg" border="0">
</div>
</code>
Usuario desconocido
Te dejo este html, mira el código fuente.
Espero que te sirva. Creo que es la mejor manera de hacerlo, nada intrusivo.
LINK
Saludos
hartum
"Me suena" a que haces referencía al div cuando aun no se ha cargado,
la solucion mas facil(y chapucera) es en el onload ponle un tipo de retardo, para que las funciones empiecen a ejecutarse 1.5 segundos despues de que se dispare el evento onload.
Ya que estamos proponiendo frameworks, yo soy de mootools y tiene un evento que se llama onDomReady precisamente para evitar este tipo de cosas.
lleoun
¡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:
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:
<code>
window.onload = init
function init()
{
var d = window.document.getElementById("myDiv");
d.className="gradualshine";
d.onmouseover=function(){ slowhigh(this); };
d.onmouseout=function(){slowlow(this);};
}
</code>
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!!
Usuario desconocido
Prueba con jquery, que está tirado y da muy buenos resultados. Además puedes utilizar una css válida.