Menu
Hi all,
Please someone who understands Safari behaviour:
The script below gradually shows with more opacity the contents of the div “myDiv” when you put your mouse over it.
And works great for IE and Firefox but does not work for Safari. What can be changed for it to get on well with Safari??
I thought that the way Safari deals with opacity was the same as Firefox’s..
Thanks a zillion in advance!
[CODE]
<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>