How do Dropbox make their transparent PNG + opacity work on IE?

I see that on www.dropbox.com, the watch_a_video2.png image is a transparent PNG image with an opacit开发者_JAVA技巧y set to 0.5. When you mouse over it the opacity change.

How are they doing to not have a dark outline around the watch_a_video2.png image with IE7/8?

I don't see any filter or specific IE fix library...

I try to reproduce their style with Jquery and it works fine with Firefox/Safari but I get a dark outline with IE.

Thanks for your help.

They are using prototype (a JavaScript framework kinda like JQuery). This code appears to achieve the effect (in other words they are not simply using css):

document.observe("dom:loaded", function () { 

    var play_link = $("playvideo");

    play_link.observe("mouseover", function () {
        new Effect.Opacity(play_link.down("img"), { duration: 0.2, to: 1.0 });
    });

    play_link.observe("mouseout", function () {
        new Effect.Opacity(play_link.down("img"), { duration: 0.2,  to: 0.5 });
    })


    if (!FlashDetect.versionAtLeast(9)) {
        $("has_flash").hide();
        $("no_flash").show();
    }
});

The HTML that this code applies to:

<a href="#" id="playvideo" onclick="play_screencast(); return false;">
    <img src="images/watch_a_video2.png"  alt="Watch a video about Dropbox."/><br />
    Watch a Video
</a>

You would probably have to set something like this in the css as well:

a {text-decoration:none;}
img { border:none;}
/* of course you'd probably want to use a class or id on these elements */

The above css will remove the underline from the link, and the border from the image.

Lastly, if you could post your actual code it may be helpful (I was unable to see the blue outline in IE8).