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


9

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

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

Я надеюсь на решение для CSS, но если есть какая-то манера JS, которая будет делать трюк, я за нее.

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

  0

Не могли бы вы собрать рабочий пример, потому что у меня такая же проблема, и может «Надеюсь, это сработает, было бы неплохо увидеть, что это я или мой браузер». 21 янв. 092009-01-21 16:31:57

20

Убедитесь, что FlashVar «Режим окна» установлен на «прозрачный» или «непрозрачные», но не по умолчанию, «оконного» ... то вы должны быть в состоянии использовать CSS Z-индекс

+1

wmode похож на золотого идола, погребенного в самых глубоких джунглях южной америки. Я помню, я был в восторге, когда впервые услышал об этом. 23 сен. 082008-09-23 21:13:20

+1

Просто имейте в виду, что он не работает с браузерами Linux, за исключением бета-версии Flash 10 и очень последних браузеров (Fx 3.0.0+, Opera 9.50+, не знаю о других) 24 сен. 082008-09-24 05:46:37

+3

Сколько пользователей Linux НЕ ДОЛЖНЫ обновлять свои браузеры и связанные с ними программы? Это демографическая характеристика подкованного определения. 24 сен. 082008-09-24 16:22:25

  0

Некоторые довольно большие подмножества пользователей Linux также запускают плагины для браузера flash/swf, поэтому я стараюсь не слишком беспокоиться о них при разработке.</semisnark> 29 сен. 082008-09-29 15:12:51

  0

Различия между этими режимами: http://stackoverflow.com/questions/886864/differences-between-using-wmode-transparent-opaque-or-window-for-an-embe 08 дек. 142014-12-08 15:07:45

  0

Это действительно работает ... 25 фев. 152015-02-25 13:18:32


4

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

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

  0

Вы Конечно, конечно. В этом случае клиенту все равно, но это здравый совет в целом. 24 сен. 082008-09-24 11:00:21

  0

Другой вопрос в этом случае, однако, в том, сколько мобильных устройств поддерживает Flash? Возможно, iPhone, возможно, некоторые из смартфонов Windows Mobile, но после этого? (также, я не разбираюсь в мобильных веб-разработчиках, поэтому я действительно не знаю ...) 24 сен. 082008-09-24 16:21:36

  0

Стив: ударьте, отмените! Большинство современных смартфонов поддерживают Flash, за исключением iPhone, чего нет. В частности, у большинства современных телефонов (т. Е. У веб-браузеров) есть Flash Lite, обычно версия 2.x или 3.x. Flash Lite 2.x примерно похож на Flash 6, а Lite 3.x похож на Flash 8. 25 сен. 082008-09-25 03:21:44


0

Установить эту флешку переменную как этот

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

затем в использовании DIV тегов этот стиль

style="z-index:inherit; 

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


0

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

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


1

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

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


1

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

<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>