onmouseover javascript opacity for IE8 and IE7

Question

This is what I have so far:

<img src="images/test.jpg" 
class="black" 

onmouseout="this.style.opacity=1;
this.filters.alpha.opacity=100;
this.style.filter='progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"

onmouseover="this.style.opacity=0.3;
this.filters.alpha.opacity=30;
this.style.filter='progid:DXImageTransform.Microsoft.Alpha(Opacity=30)'" 
/>

It's works in FF and Safari, but not IE 7 or 8.
Suggestions?

Answer 1

Have you considered using a framework like YUI or JQuery to help you normalize cross-browser inconsistencies like this?

Answer 2

Ugh! CSS for the win!

<style>
img.black:hover {opacity: 0.3; filter:alpha(opacity=30);}
</style>

Answer 3

Lose the this.filters.alpha.opacity=30 line. Corrected code:

<img src="images/test.jpg" class="black"  
    onmouseout="this.style.opacity=1; 
      this.style.filter='progid:DXImageTransform.Microsoft.Alpha(Opacity=100)'" 

    onmouseover="this.style.opacity=0.3
      this.style.filter='progid:DXImageTransform.Microsoft.Alpha(Opacity=30)'"  
/>