I'm trying to set an image to opaque on rollover, but haven't been able to make it to work in FF(2.0) unless I initially specify the opacity styles inline.

In this example, the first image has inline styles and the rollover works.
Styles for the second image are specified in the header and the rollover doesn't work.

HTML Code:
  <head>
    <script type="text/javascript" language="javascript">
      function makevisible(cur,which){
        strength=(which==0)? 1 : 0.2  
        if (cur.style.MozOpacity){
          cur.style.MozOpacity=strength;
        }
        else if (cur.filters){
          cur.filters.alpha.opacity=strength*100;
        }
      }
    </script>
    <style type="text/css">
      img{
        width: 93px;
        height: 144px;
        margin: 20px;
        }
      #img2{
        filter: alpha(opacity=20);
        -moz-opacity: 0.2;
        }
    </style>
  </head>
  <body>
    <img id="img1" src="nohandsKitten.jpg" onMouseOver="makevisible(this,0)" onMouseOut="makevisible(this,1)" style="filter: alpha(opacity=20);-moz-opacity: 0.2;" />
    <img id="img2" src="nohandsKitten.jpg" onMouseOver="makevisible(this,0)" onMouseOut="makevisible(this,1)" />
  </body>