Как разместить HTML-контент над Flash-роликом?
На сайте, над которым я работаю, есть заголовки Flash (для их встраивания используется swfobject). Теперь мне нужно написать небольшой фрагмент HTML-кода, который должен перекрывать Flash-ролик.
Я пробовал установить z-index в контейнере Flash-элемента и (абсолютно позиционированном) div, но он продолжает «исчезать» за Flash-фильмом.
Я надеюсь на решение CSS, но если есть немного JS-магии, которая поможет, я готов.
Обновлять: Спасибо, установка wmode на "transparent" в основном это исправила. Только Safari / Mac все еще прятал div за вспышкой при первом показе. Когда я переключался на другое приложение и возвращался обратно, оно было впереди. Я смог исправить это, установив начальные стили div на display: none; и сделав его видимым через JS через полсекунды после загрузки страницы.
Ответы 6
Убедитесь, что для FlashVar "wmode" установлено значение "transparent" или "opaque", но НЕ по умолчанию, "оконный" ... тогда вы сможете использовать z-index CSS.
wmode похож на золотого идола, похороненного в самых глубоких джунглях Южной Америки. Помню, я был в восторге, когда впервые услышал об этом.
Просто имейте в виду, что он не работает с браузерами Linux, за исключением бета-версии Flash 10 и самых последних браузеров (Fx 3.0.0+, Opera 9.50+, не знаю о других).
Сколько пользователей Linux НЕ обновляют свои браузеры и связанные программы? Это смекалистая по определению демографическая группа.
Некоторое довольно большое количество пользователей Linux также в принципе запускают плагины для браузера, убивающие flash / swf, поэтому я стараюсь не слишком беспокоиться о них при разработке. </semisnark>
Отличия этих режимов: stackoverflow.com/questions/886864/…
Последующее примечание: как вы обнаружили в своем обновлении, отображение HTML поверх Flash в настоящее время является сложной задачей, и даже с магией JS, которую вы обнаружили, вы должны ожидать, что Flash заблокирует ваш HTML для некоторых зрителей, использующих отключение -браузеры, старые версии и т. д.
Если для вас важно охватить произвольно большую аудиторию просмотра (например, мобильные устройства), то изменение дизайна вашего контента, чтобы избежать дублирования, может избавить вас от головной боли в долгосрочной перспективе.
Вы, конечно, правы. В этом случае клиенту все равно, но в целом это разумный совет.
Однако в данном случае возникает другой вопрос: сколько мобильных устройств поддерживают Flash? IPhone, я уверен, может быть, некоторые из смартфонов Windows Mobile, но после этого? (Кроме того, я плохо разбираюсь в мобильных веб-разработчиках, поэтому я действительно не знаю ...)
Стив: удари, переверни это! Большинство современных смартфонов поддерживают Flash, за исключением iPhone, который не поддерживает. В частности, большинство современных телефонов (то есть с веб-браузерами) имеют Flash Lite, обычно версии 2.x или 3.x. Flash Lite 2.x примерно похож на Flash 6, а Lite 3.x похож на Flash 8.
Набор эта флэш-переменная вроде этой
s1.addParam("wmode","transparent");
потом в теге div используйте этот стиль
style = "z-index:inherit;
Проблема будет решена.
Как сказал Стив Пауло, затем начинается самое интересное, когда HTML, который находится поверх вашей флеш-памяти, вызывает больше флеш-памяти ...
О, мы получили удовольствие от этого, который включал в себя установку z-index, чтобы он был на самом деле ниже, чтобы учесть вспышку, думая, что это колени пчел и, следовательно, всегда должен быть наверху.
Я хотел бы добавить, что вы должны не забыть установить параметры WMODE («прозрачный») как в тегах OBJECT, так и в EMBED!
Подробности смотрите по ссылке: http://kb2.adobe.com/cps/142/tn_14201.html
используйте код в следующем стиле, он работает в 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>
Не могли бы вы собрать рабочий пример, потому что у меня такая же проблема, и я не могу заставить ее работать, было бы неплохо увидеть, это я или мой браузер ...