На разных сайтах в Интернете я часто сталкиваюсь с тем, что на них расположены Flash-объекты, например, видеоплееры с YouTube или фрагменты оформления дизайна на Flash. И при этом различные элементы - плавающие или с абсолютным позиционированием, например, раскрывающиеся меню или всплывающие подсказки, перекрываются областью, занимаемой Flash-объектами. Причем использование атрибута стиля z-index ситуацию не спасает, и в итоге все смотрится очень некрасиво. А ведь решение проблемы очень простое: достаточно в описании Flash-объекта указать параметр wmode со значением opaque:

<param name="wmode" value="opaque">

Получится что-то вроде такого:

<div style="position:relative;">
    <div style="position:absolute;">Hello, World!</div> 
 
    <object type="application/x-shockwave-flash" data="flash.swf">
        <param name="menu" value="false" />
        <param name="quality" value="high" />
        <param name="wmode" value="opaque">
        <param name="movie" value="flash.swf" />
    </object>     
</div>

В приведенном примере плавающий элемент div с текстом "Hello, World!", позиционированный относительно общего контейнера, будет расположен поверх Flash-ролика. Этот способ валидный и кроссбраузерный, а расположение Flash-объекта на странице теперь можно регулировать с помощью атрибута z-index.

Добавлено: 22 Сентября 2013 01:00:14 Добавил: Андрей Ковальчук Нравится 0

Добавить