пятница, 25 декабря 2009 г.

z-index для Flash object и SWFObject

Дорабатывая очередной свой сайт столкнулся с такой проблемкой. В шапке сайта есть две флэш вставки - банер, который вставлен через конструкцию object embed и меню за размещение которого отвечает скрипт SWFObject. Ниже всего этого находится картинка (это была схема проезда), которая увеличивается при клике мышки с помощью библиотеки lightbox. Так вот, проблема заключалась в следующем - при более детальном просмотре картинки серая вуаль, которая должна "зашторить" весь экран, не покрывала флэш - меню и банер, а сама картинка отображалась под ними. Выглядело это так:





В результате, у меня получилось следующее рабочее решение.
Для банера (object embed):
1. Сам тег object был взят в дополнительный div со следующими CSS-свойствами - style="position:absolute;z-index:0;"
2. Тегу embed добавлен параметр wmode="transparent" и <param name="wmode" value="opaque" />

Все вместе, на данный момент, выглядит так:
<div style="position:absolute;z-index:0;">
<div id="ack_banner" style="float:left;">
<object width="550" height="400">
<embed src="banner.swf" width="480" height="70" wmode="transparent"></embed>
<param name="wmode" value="opaque" />
</object>
</div>
</div>

Для меню (SWFObject):
1. Дописана лишь одна строка - so.addParam("wmode", "opaque")

Таким образом, получилась такая конструкция:

<script type="text/javascript">
var so = new SWFObject("menu.swf", "ack", "1024", "295", "7", "#ffffff");
so.addParam("allowFullScreen", "true");
so.addParam("wmode", "opaque");
so.write("menuflashcontent");
</script>

Как это выглядит в жизни можно посмотреть на сайте http://www.ack.biz.ua/contacts.html или на данном скриншоте:






Работоспособность проверял во всех браузерах - IE7, FF3, Opera9.27, Chrome и Safari, чего думаю вполне достаточно ;).

6 коммент.:

Анонимный комментирует...

Спасибо! Работает!!! Благодарю!!

Анонимный комментирует...

Спасибо, помогло :)

Анонимный комментирует...

Очень наглядно.

Спасибо автору!

Анонимный комментирует...

Благодарю - безценная инфа!

А куда схема проезда на сайте делась? И лучше ссылку сделать с target="_blank" :)

Lesav комментирует...

Потратил несколько часов на поиски решения! Спасибо!!!

Анонимный комментирует...

Блин! Спасибо!!!
Запарился - почти день убил изучая скрип highslide, а аказывается: "Вон оно че "Михалыч".
Спасибо!

Отправить комментарий

О себе

Моя фотография
Вадим Гиркало
Фрилансер, веб-разработчик сайтов на базе бесплатной, мощнейшей и очень гибкой CMS системы - TYPO3.
Просмотреть профиль

Позвонить мне в Skype

TOP - 3