Use a layered approach: place a div element on top of the flash object, make it the same size and transparent. That's all. No JavaScript needed. And to make IE6/7/8 happy, this of course doesn't work, so we add a trick: a background and a zero-opacity. You may want to add the IE-only CSS in a separate file to prevent CSS invalidation.
Important: for this to work, wmode
must be set to opaque
(as noted by TheBrain earlier), the parent div
must have a position set, the child div
must have position:absolute
and the width
/height
of the flash animation. The opacity
, filter
and background-color
are for IE6/7/8 compatibility only. The code as-is works cross-browser (left out some details for clarity) and is demonstrated on this page in full.
Update:The width and height of the parent div
element must be set to prevent some uncovered borders to creep in. By default, a div is 100% width. IE adds a left-margin and FF adds a bottom margin to the flash animation. By setting the dimensions explicitly, this will work as expected. To proof the cover is placed correctly, change the color and the opacity of the cover-div. This change is also updated in the demo page.
<div style="position:relative;width:728px;height:90px;">
<div style="position:absolute;
width:728px;height:90px;
background-color:white;
opacity:0;filter: alpha(opacity=0);">
</div>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
width="728" height="90">
<... params etc ...>
<param name="wmode" value="opaque" />
<embed width="728" height="90"
type="application/x-shockwave-flash"
wmode="opaque"
etc-params=xyz>
</embed>
</object>
</div>