Как расположить блок над Flash
Опубликовано: 25 марта, 2009 | Рубрика: Кодинг | Тэги: flash, google, opaque, wmode, баги | 12 Комментариев »Проблема расположения блоков над flash-содержимым известна уже давно. Суть её заключается в следующем: если на сайте есть flash-ролик, то для расположения блока поверх него стандартных свойств CSS будет недостаточно. Указав для такого блока абсолютное позиционирование и z-index вы не добьётесь желаемого результата. Флэш всё равно окажется поверх него.
Всё дело в параметрах flash-ролика, внедряемого на веб-страницу. Один из таких параметров — Windows Mode (wmode). Данный параметр может принимать следующие значения:
- window: установлен по-умолчанию и отображает flash как бы в своём отдельном окне браузера, вынув его из общего потока html
- opaque: в этом режиме флэш становится частью документа и отрисовывается согласно всем правилам обычного элемента страницы
- transparent: похож на opaque, но вдобавок ещё и позволит фону html-страницы «проглядывать» через все прозрачные элементы флэш-ролика
Демонстрация режимов работы параметра wmode во flash
Думаю уже и так всё понятно, замечу лишь, что параметр нужно указать и для object и для embed. Совсем необязательно делать это при создании и публикации flash, вы можете указать параметры прямо в коде html-документа:
<object ...> <param name="wmode" value="transparent" /> <embed wmode="transparent" ...></embed> </object>
Вообще-то, решение этой проблемы известно уже очень давно даже начинающим веб-дизайнерам. Я бы не стал поднимать эту тему, если бы не разработчики сайта Google. Они буквально вынудили меня это сделать. Долгое время я мирился с этой ошибкой на сайте Youtube, там выпадающий список с навигацией перекрывается флэшкой, хотя и не очень сильно. (вам нужно войти на сайт под своим паролем и при просмотре видео-ролика навести курсор на свой логин в верхней навигации).
Но сегодня я обратил внимание на изменения на сайте Google Video. Сайт, очевидно, подвергся редизайну и в целом изменился в лучшую сторону. Однако и здесь присутствует эта досадная ошибка.
Взглянув в html-код, можно заметить, что исправить её пытались и у них это даже получилось, но только в одном браузере — Internet Exporer. Вызывает недоумение способ, которым это было сделано. Применён трюк с пустым iframe, который был «подложен» под позиционируемый блок. Этот способ имел бы смысл, если бы речь шла о перекрытии элемента формы select в Internet Explorer. Но зачем это сделано в данном случае, мне абсолютно не понятно, как и не понятно то, почему верстальщик такой компании как Google до сих пор не в состоянии справиться с такой простой проблемой. И вообще, он тестирует сайт в других браузерах? Например в Google Chrome…
Выяснил, что в Linux параметр wmode не решает проблему с перекрытием flash. Если для проекта это критично, можно воспользоваться трюком с iframe.
Встречался недавно с таким. Не знал. Спасибо!
В сафари 4 wmode не рабоает.
Если есть решение – буду рад если скинете на мыло
Режим wmode отлично работает и в Safari. Во всяком случае в версии для Windows. На других платформах не проверял. Какая у вас операционка, Chkalov?
ХП про. Safari 4.0.4
Пример из статьи не работает. Так же не работает меню на сайте adobe – оно залазит под флеш.
Даже не знаю что сказать. У меня тоже Windows XP и Safari этой же версии. Набросал быстренько пример: http://www.webcocktail.ru/sandbox/flash-and-z-index.html Если у вас блок с красной рамкой в примере расположен под обоими флеш-роликами (чего быть не должно), то… может быть стоит переустановить Safari?
Роман, поставил на другой машине заново скачанный Сафари – работает. Видимо что-то не в порядке конкретно с той версией. Спасибо.
to Роман
Проверял на линуксе, работает все нормально
jeka, ну значит исправили, слава богу. Обновлений браузера уже много было, теперь в Firefox под Windows блок отображается поверх flash даже без wmode, в отличии от других браузеров.
А вот какой баг всплыл в Chrome. При добавлении флешке wmode=”opaque”, в Хроме начинает глючить курсор – перестает превращатся в палец на ссылках и кнопках (стопицот часов убилось, прежде чем я допер, что виноват именно wmode)) . А заодно – если использовать свои курсоры, пряча при этом стандартный – то картинку курсора он подставляет, но дефолтовый курсор не убирает – он весело болтается над картинкой. Если убрать wmode – все отлично работает. Доктор, ЧЯДНТ? Как лечиться? Или это совсем глобальненько?
Teftelkin, видимо проблема действительно глобальная и решается она именно удалением параметра wmode. страница с обсуждением на форуме поддержки Google Chrome. Google был извещён об этой ошибке ещё в марте: багрепорт
Роман, спасибо за информацию!
Все бы хорошо, вот только wmode-то я ставил неспроста, а у заказчика оказался именно Chrome. Как всегда все через ж, но теперь хоть есть, чем апеллировать =)