Используйте многоуровневый подход: поместите элемент div поверх объекта flash, сделайте его одинаковым по размеру и прозрачным. Это все. JavaScript не требуется. И чтобы сделать IE6 / 7/8 счастливым, это, конечно, не работает, поэтому мы добавили хитрость: фон и непрозрачность. Возможно, вы захотите добавить CSS только для IE в отдельный файл, чтобы предотвратить аннулирование CSS.
Важно: , чтобы это работало, wmode
должно быть установлено на opaque
(как отмечалось ранее TheBrain), родительский элемент div
должен иметь установленную позицию, дочерний элемент div
должен иметь position:absolute
и width
/ height
флеш-анимации. opacity
, filter
и background-color
предназначены только для совместимости с IE6 / 7/8. Код «как есть» работает в кросс-браузерном режиме (для ясности опущены некоторые детали) и продемонстрирован на этой странице в полном объеме.
** Обновление: ** Ширина и высота родительского элемента div
должны быть установлены, чтобы предотвратить появление незакрытых границ. По умолчанию, div равен 100% ширины. IE добавляет левое поле, а FF добавляет нижнее поле для флеш-анимации. Задав размеры явно, это будет работать как ожидалось. Чтобы проверить правильность размещения обложки, измените цвет и непрозрачность обложки. Это изменение также обновляется на демонстрационной странице .
<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>