-moz-opacity problems

[us...@domain.invalid]

Hi,

I have the folowing code, which changes the opacity of the images with a
certain id.I have tried the code in Mozilla,but simply nothing happens
when I move my mouse over the images.The JavaScript console doesn't show
any error, so I have no idea what could be wrong.
I wrote the code a while ago, and it used to work with Moz 0.9.8.And I
really have no idea why it doesnt work now,maybe its a bug?

<img border="2" id="pic1" style="-moz-opacity:30%" src="blah.gif">
<img border="2" id="pic2" style="-moz-opacity:30%" src="blah.gif">

<script>
var NormalOpacity=30;
var HoverOpacity=80;

var Objects=new Array();
var i=0;

function AddID(the_id)
{
Objects[Objects.length+1] = the_id
}

AddID("pic1");
AddID("pic2");

function MozOver(event)
{
for (i=0;i<Objects.length;i++)
if(Objects[i] == event.target.id)
{
document.getElementById(event.target.id).style.MozOpacity=HoverOpacity+"%";
}
}
function MozOut(event)
{
for (i=0;i<Objects.length;i++)
if(Objects[i] == event.target.id)
{
document.getElementById(event.target.id).style.MozOpacity=NormalOpacity+"%";
}
}

if(window.sidebar)
{
document.body.addEventListener('mouseover', MozOver, true);
document.body.addEventListener('mouseout', MozOut, true);
}
</script>

[Josh Santangelo]

Use ".3" instead of "30%".

-josh

On 5/10/02 3:14 AM, in article 3CDB9D8B...@domain.invalid,

[Seak, Teng-Fong]

Josh Santangelo wrote:
> Use ".3" instead of "30%".
>
> -josh

What's the reason behind this change? Something's wrong with
percentage?

Fong

[Boris Zbarsky]

Seak, Teng-Fong wrote:
>> Use ".3" instead of "30%".

> What's the reason behind this change? Something's wrong with
> percentage?

Yes, a few things:

1) The proposed CSS3 "opacity" property does not take percentage
values, only numbers. Hence when the property in Mozilla stops
being a -moz extension it will only support numbers, unless the
(in-progress) CSS3 spec changes before then (unlikely, in this
instance).

2) 30% and 0.3 mean totally different things in the Mozilla
implementation. In particular,

<div style="-moz-opacity: 0.5">
<div style="-moz-opacity: 30%">text</div>
</div>

The inner div has an opacity of 30% * 0.5 == 0.15. This is the
standard way percentage values are interpreted in CSS (taken as
percentages of that property of the parent).

3) Due to item #1 and the fact that people almost certainly want to be
using number-valued opacity, the %-valued -moz-opacity
implementation is not very well maintained. There's a number of
issues with it, most particularly the fact that in many cases it
either fails to repaint things correctly or repaints so slowly that
intermediate steps seem to disappear when the opacity is being
changed continuously.