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>