IE9 prototype mouseover and mouseout mismatch

I'm facing a strange behaviour by IE9 dealing with a prototype script. Here I'm setting two different opacity styles depending on mouseover / out:

window.onload = function(){
var freccia1 = $($$('.next_button')[0]);
freccia1.setStyle({opacity: '0.20'});       
freccia1.setStyle({filter: 'alpha(opacity=20)'});   
var freccia2 = $($$('.previous_button')[0]);
开发者_高级运维freccia2.setStyle({opacity: '0.20'});       
freccia2.setStyle({filter: 'alpha(opacity=20)'});
}

This is working fine in all browsers, including previous IE versions, nut not in IE9 which doesn't low the opacity..its console returns me:

Not possible to get the property 'setStyle' value: object null or undefined

does anyone know why ? thank you

If you're going to use Prototype, you might as well use as much functionality as it offers since it takes browser compatibility into consideration so you don't have to.

Try this (untested):

document.observe('dom:loaded', function() {
    [$$('.next_button')[0], $$('.previous_button')[0]].each(function(ele) {
        $(ele).setStyle({
            opacity: '0.20',
            filter: 'alpha(opacity=20)'
        });
    });
});

You didn't mention which version of prototype you are running. I ran into a similar problem that may be similar on one of my pages using prototype 1.5.0 (please don't judge). In 1.5.0 the setStyle and getStyle functions do a browser check for IE specifically when dealing with opacity/alpha(opacity).

/MSIE/.test(navigator.userAgent)

In my case, setStyle calls getStyle('filter').replace(). Unfortunately getStyle('filter') returns null with IE9 so .replace throws an exception.

Some relevant notes from the IE team: http://blogs.msdn.com/b/ie/archive/2010/08/17/ie9-opacity-and-alpha.aspx