Javascript assistance required

[m00nz00mer]

Hey, Ive never used Javascript before (well only for really basic things). Im wanting to create a rollover effect on my site that puts a slightly transparent colour layer over the top of an image.

I have this code here but im not sure how i can implement it or how it works?

// set image over states
$(".classname img").mouseover(function(){
$(this).fadeTo('fast',0.8).parents('.classname, li').css("background","#fe0002");
}).mouseout(function(){
$(this).fadeTo('fast',1).parents('. classname, li').css("background","none");
});

the image i want to apply the effect to is...

<li class="workCollection"><a href="#workSet1"><img src="images/work1.jpg" /></a></li>

can anyone help me?

or...

could i use? somthing like...

$$('div#mb1 img').each(function(e){
var fade = new Fx.Style(e, 'opacity', {wait:false});
fade.set(.5);
e.addEvent('mouseover', function(){
fade.start(1);
});
e.addEvent('mouseout', function(){
fade.start(.5);
});
});

but im not sure how to use it?

[m00nz00mer]

ok i actually have this....

window.addEvent('domready',function(){
var t = $$('img.mo');
t.each(function(item){
item.setStyle('opacity', 1);
var f = new Fx.Style (item,'opacity', {duration: 300, wait: false});
item.addEvents({
'mouseenter': function() {
f.start(0.01);
},

'mouseleave': function() {
f.start(1);
}
})
})
});

and its working however... i want to make the rollover have a red layer over the top with (50%) opacity. like a colour overlay effect. How can i do that?

[m00nz00mer]

found a solution! if you set the bg of the div behind the image to a colour then use javascript to reduce the opacity of the image it will look like it has a colour overlay.