Как разместить контент HTML над фильмом Flash?

Question

Сайт, на котором я работаю, имеет заголовки Flash (используя swfobject для их встраивания). Теперь мне нужно кодировать немного HTML, который должен перекрывать Flash-ролик.

Я пытался установить z-index для контейнера элемента Flash и (абсолютно позиционированного) элемента div, но он продолжает "исчезать" за Flash-фильмом.

Я надеюсь на CSS-решение, но если есть немного JS-магии, которая поможет, я готов к этому.

Обновление: Спасибо, установив wmode в "прозрачный", в основном это исправлено. Только Safari / Mac все еще скрывали div за вспышкой на первом шоу. Когда я переключусь на другое приложение и вернусь, оно будет впереди. Я смог это исправить, установив начальные стили div на display: none; и сделав его видимым через JS через полсекунды после загрузки страницы.

Answer 1

Убедитесь, что FlashVar "wmode" установлен на "прозрачный" или "непрозрачный", но НЕ по умолчанию "оконный" ... тогда вы сможете использовать CSS z-index

Answer 2

Замечание: как вы обнаружили в своем обновлении, заставить HTML отображаться поверх Flash в настоящее время является хитрым предложением, и даже с волшебством JS, которое вы обнаружили, следует ожидать, что Flash заблокирует ваш HTML для некоторых зрители, использующие сторонние браузеры, старые версии и т. д.

Если для вас важно охватить сколь угодно большую аудиторию просмотра (например, мобильные устройства), то изменение дизайна контента во избежание дублирования может избавить вас от головной боли в долгосрочной перспективе.

Answer 3

используйте код в следующем стиле, он работает в Firefox и Chrome

<object id='myId'  width='700' height='500'>
            <param name='movie' value='images/ann/$imagename' />
            <param name='wmode' value='transparent' />
            <!--[if !IE]>-->
            <object type='application/x-shockwave-flash' data='images/ann/$imagename' width='700' height='500' wmode='transparent'>
            <!--<![endif]-->
            <div>
                <h1>Please download flash player</h1>
                <p><a href='http://www.adobe.com/go/getflashplayer'><img src='http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif' alt='Get Adobe Flash player' /></a></p>
            </div>
            <!--[if !IE]>-->
            </object>
            <!--<![endif]-->
        </object>

Answer 4

Я хотел бы добавить, что вы должны помнить, чтобы установить параметры WMODE («прозрачные») в тегах OBJECT и EMBED!

Для получения подробной информации перейдите по ссылке: http://kb2.adobe.com/cps/142/tn_14201.html

Answer 5

Как сказал Стив Пауло, начинается самое интересное, когда HTML-код, который находится на вершине вашей флеш-памяти, вызывает больше флеш-памяти ...

О, что мы веселились с этим, который включал установку z-индекса на самом деле ниже, чтобы учесть вспышку, думая, что это колени пчелы и, следовательно, всегда должна быть на вершине.

Answer 6

Set эта переменная вспышка, как это

s1.addParam("wmode","transparent");

, то в теге div используйте этот стиль

style="z-index:inherit; 

Проблема будет решена.