Гиркало Вадим - программист фрилансер и разработчик (freelancer, developer) сайтов на TYPO3

Дорабатывая очередной свой сайт столкнулся с такой проблемкой. В шапке сайта есть две флэш вставки - банер, который вставлен через конструкцию 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, чего думаю вполне достаточно ;).