How Did Dropbox Create Their Javascript Rollover Effect?

Question

https://www.dropbox.com/ - their play button, how do they create that effect? From what I can see they are using:

<script type="text/javascript" charset="utf-8">
    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();
        }
    });

    function play_screencast() {
        Home.showScreencast('commoncraft', true);
    }
</script>

But not sure how to create this effect on our site. I am running .NET. Thanks so much.

Answer 1

They have an anchor element with the id 'play_link', and the circle icon image inside of it. The opacity of that element is initially 0.5 (or 50 if IE). When the JavaScript 'mouseover' event fires, they animate the opacity to 1 (or 100 in IE). When the 'mouseout' event fires, they animate the opacity back to what it previously was. You can achieve the animation with almost any JavaScript framework.

Answer 2

They're using script.aculo.us. Browse through the docs for Effect.Opacity and you'll quickly figure out how to duplicate this behavior on your own site.