2008-09-23 5 views
9

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

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

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

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

+0

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

ответ

20

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

+1

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

+1

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

4

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

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

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> 
Смежные вопросы