Mozilla -moz-opacity css rule and javascript access
Posted: Tue Jun 25, 2002 4:40 pm
Does anyone know how to access the -moz-opacity css rule from within javascript (since the "-" are not allowed in javascript var names)?
A community of PHP developers offering assistance, advice, discussion, and friendship.
http://forums.devnetwork.net/
Code: Select all
<script language="JavaScript" type="text/javascript">
// call the function with the object (not a string) and the
// new Opacity (in percentages, like 50 for 50 percent)
function fade(object, newOpacity) {
// I have to do this because if I don't the opacity will not change
// The problem is here. If I call this function onmouse over, the
// object (the image) will be set to hidden then back to visible.
// When that happens the browser forgets that the mouse is over
// the image, so when I mouseout the onmouseout call is not
// made. Does anyone know how to get the mouseout event to
// trigger after adjusting this property? Or does anyone know
// how to get the opacity to change (and second time, third, etc)
// without using this trick?
object.style.visibility = 'hidden';
object.style.visibility = 'visible';
object.style.setProperty("-moz-opacity",newOpacity+"%") ,"");
}
</script>
<!-- calling image -->
<img src="some/src.gif" width="117" height="27" name="b1" id="b1" border="0" onmouseout="fade(this,50)" onmouseover="fade(this,100)" style="filter: alpha(opacity = 50); -moz-opacity: 50%">Code: Select all
<script language="JavaScript" type="text/JavaScript">
<!--
function fadeGate(object, destOp, rate, delta, initOp, altImage, mozNum) {
if (typeof object.filters == "object") {
if (initOp) {
object.src = altImage;
object.filters.alpha.opacity = initOp;
}
nereidFade(object, destOp, rate, delta);
} else if (typeof object.style.getPropertyValue != "undefined"){
if (object.style.getPropertyValue("-moz-opacity") != '') {
if (initOp) {
object.src = altImage;
object.style.setProperty("-moz-opacity", initOp/100,'');
}
nereidFadeMoz(object, destOp, rate, delta, mozNum);
}
} else {
object.src = altImage;
}
}
nereidFadeObjects = new Object();
nereidFadeTimers = new Object();
function nereidFade(object, destOp, rate, delta) {
clearTimeout(nereidFadeTimers?object.sourceIndex]);
diff = destOp - object.filters.alpha.opacity;
direction = 1;
if (object.filters.alpha.opacity > destOp) {
direction = -1;
}
delta=Math.min(direction*diff,delta);
object.filters.alpha.opacity+=direction*delta;
if (object.filters.alpha.opacity != destOp){
nereidFadeObjects?object.sourceIndex] = object;
nereidFadeTimers?object.sourceIndex] = setTimeout("nereidFade(nereidFadeObjects?"+object.sourceIndex+"],"+destOp+","+rate+","+delta+")",rate);
}
}
function nereidFadeMoz(object, destOp, rate, delta, mozNum) {
clearTimeout(nereidFadeTimers?mozNum]);
startingOpacity = object.style.getPropertyValue("-moz-opacity") * 100;
diff = destOp-startingOpacity;
direction = 1;
if (startingOpacity > destOp) {
direction = -1;
}
delta=Math.min(direction*diff,delta);
object.style.setProperty("-moz-opacity",((direction * delta) + startingOpacity)/100,'');
object.onmouseout = object.parentNode.onmouseout;
if ((object.style.getPropertyValue("-moz-opacity")*100) != destOp) {
nereidFadeObjects?mozNum] = object;
nereidFadeTimers?mozNum] = setTimeout("nereidFadeMoz(nereidFadeObjects?"+mozNum+"],"+destOp+","+rate+","+delta+","+mozNum+")",rate);
}
}
//-->
</script>
<!-- the mouseout event disapears in both of these -->
<table width="466" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="78" background="images/navBar/about_off.gif"><a href="about.html" onMouseOut="fadeGate(document.about,0,50,10,false,'images/navBar/about_off.gif',3)" onMouseOver="fadeGate(document.about,100,25,20,1,'images/navBar/about_on.gif',3)"><img src="images/navBar/about_off.gif" name="about" id="about" border="0" width="78" height="27" style="filter: alpha(opacity = 100); -moz-opacity: 100"></a></td>
<td width="69" background="images/navBar/contact_off.gif" onMouseOut="fadeGate(document.contact,0,50,10,false,'images/navBar/contact_off.gif',4)" onMouseOver="fadeGate(document.contact,100,25,20,1,'images/navBar/contact_on.gif',4)"><a href="contact.html"><img src="images/navBar/contact_off.gif" name="contact" id="contact" border="0" width="69" height="27" style="filter: alpha(opacity = 100); -moz-opacity: 100"></a></td>
</tr>
</table>
Code: Select all
<html><head>
<style type="text/css">
#hover a{-moz-opacity:.50; filter:alpha(opacity=50); opacity:.50;cursor:default;}
#hover a:hover{-moz-opacity:1; filter:alpha(opacity=100); opacity:1;}
</style></head><body>
<div id="hover">
<a href="#" >
<img src="some/src.gif" name="b1" id="b1">
</a>
</div>
</body></html>
Code: Select all
document.getElementById('example_id').className='your_opacity_css_class_here';