Forum Moderators: open
The following script was included with the gallery, but is only IE compatible. The script is called through this:
onmouseover="pick(this)" style="filter: alpha(opacity=80) gray()" onmouseout="unpick(this)"
opacity: .8;
filter: alpha(opacity=80);
-moz-opacity: .8;
////////////////////////////////////////////////////////////////////////////////////
// TURN TO B&W AND BACK
// Script for gallery
////////////////////////////////////////////////////////////////////////////////////function pick(obj) {
obj.filters.alpha.opacity=100;
obj.filters.gray.enabled=false;
}
function unpick(obj) {
obj.filters.alpha.opacity=80;
obj.filters.gray.enabled=true;
}
function lightup(imageobject, opacity){
if (navigator.appName.indexOf("Netscape")!=-1&&parseInt(navigator.appVersion)>=5)
imageobject.style.MozOpacity=opacity/100
else if (navigator.appName.indexOf("Microsoft")!=-1&&parseInt(navigator.appVersion)>=4)
imageobject.filters.alpha.opacity=opacity
}
How can I get this Mozilla friendly?
Why not just use js to swap css classes. If you put both style definitions (ie and moz) in each class, you should have a cross-browser (ie and moz) solution:
<head>
<script type="text/javascript">
<!--
//called for onmouseover and onmouseup, switches className
function lightup2(obj){
obj.className=(obj.className=='test'?'testHov':'test')
}
//-->
</script>
<style type="text/css">
/*non-hovered style*/
.test {
background-color: #000080;
color: #fff;
font-size: 1.4em;
width: 14em;
filter: alpha(opacity=80);
-moz-opacity: .8;
}
/*hovered style*/
.testHov {
background-color: #000080;
color: #fff;
font-size: 1.4;
width: 14em;
filter: alpha(opacity=100);
-moz-opacity: 1.0;
}
</style>
</head>
<body>
<div class="test" onmouseover="lightup2(this)" onmouseout="lightup2(this)" >The opacity should be set on this div</div>
</body>
Hope this helps,
ajkimoto
