Javascript assistance required

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?