Валидность HTML — святое. В ней и лежит залог правильного отображения сайта во всех браузерах. Будем считать, что валидный html это абсолютно правильный html.
Под валидностью, в данном посте, мы будем понимать такое написание HTML- и CSS-кода, которое не противоречит действующим стандартам W3C и полностью проходит тест валидатором.
Хотя тема стара как мир, но все же периодически на разных программерских форумах возникают вопросы по валидной вставке флэш объектов на странички сайтов.
И так приступим, для отображения flash объектов в документах типа XHTML 1.0 Transitional (большинство CMS на нем написано).
Валидная вставка Flash
Вариант 1. Для прямой вставки рецепт от w3c (если нет плеера у клиента, то облом, ничего не крутится):
<object type="application/x-shockwave-flash" data="flash.swf" width="400" height="300">
<param name="movie" value="flash.swf" />
</object>
Вариант 2. При таком коде вставленный флеш валиден, и если у посетителя отключен просмотр флеша, то вместо него будет отображаться фоновое изображение dummy.jpg (в примере изображения берутся из папки images, а флеш из папки swf). Режим wmode установленный в opaque дает возможность не закрывать флэшем всплывающие окна, то есть убирается баг верхнего слоя.
<object type="application/x-shockwave-flash" data="swf/flash.swf" width="400" height="300">
<param name="movie" value="swf/flash.swf" />
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<img src="images/dummy.jpg" alt="Без флеша" height="300" width="400" />
</object>
Размещаем что-либо поверх flash блока
Html код
<div class="flash-box">
<a class="flash-link" href="#">Ваша ссылка</a>
<object type="application/x-shockwave-flash" data="swf/flash.swf" width="180" height="220">
<param name="wmode" value="opaque" />
<param name="movie" value="swf/flash.swf" />
<param name="quality" value="high" />
</object>
</div>
Блок flash-box - нужен для того что бы размещенная ссылка была именно там где нужно нам, а не там где хочет она.
flash-link - ссылка которая будет поверх флешки, вместо ссылки может быть что угодно.
<param name="wmode" value="opaque"> - Флеш ведет себя так как нам надо. Если он лежит в body, то слои будут его закрывать, если в слое - то он закрывает нижние (по z-index) слои и закрывается верхними. Фон имеет фоновый цвет. Без этой штуки работать ничего не будет.
Css свойства
.flash-box{
position: relative;
}
.flash-link{
position: absolute; top:0px; left:0px;
}
Думаю объяснять не надо, что Вы можете дописывать свои свойства, такие как: ширина, высота и т.д.
Пример посложнее
Иногда требует нечто более сложное. Например, нужно сделать чтобы баннер с активной ссылкой (то есть уже вшитой в код самого флеша), вел на другой адрес
Html код
<div class="flash-box">
<a class="flash-link" href="#"></a>
<object type="application/x-shockwave-flash" data="swf/flash.swf" width="180" height="220">
<param name="wmode" value="opaque">
<param name="movie" value="swf/flash.swf" />
<param name="quality" value="high" />
</object>
</div>
Css код
.flash-box{
position: relative;
}
.flash-link{
position: absolute; top:0px; left:0px;
width:180px;
height:220px;
background: url('images/0.gif') no-repeat; /*Особенный костыль для всех IE. Если фона нет, то воспринимается ссылка вшитая во флеш, а не наша. Думаю понятно, что 0.gif это прозрачный однопиксельный гиф.*/
}