Как поставить Div поверх flash

При верстке иногда хочется вставить flash в background, т.е. фоном, а поверх flash вставить что-нибудь другое.

Ну хотя-бы как на этом сайте на главной, если навести на эльфа в правой колонке, появится календарь публикаций… Эм… появлялся…

Эльфа там уже нет. Уехал в отпуск вместе со старым дизайном…

ОК. Включаем фантазию. Представьте себе флешку с эльфом, который смотрит на вас, а под ногами дышит и слетится туман. Вот вы навели на него курсор, и на переднем плане появился календарь публикаций в квадрате с закругленными уголками.

Даты, в которые были опубликованы посты, являются ссылками на оные. Ну с календарем все как везде. Разница только в том, что он находится в div’е, который находится поверх флешки.

Как это выставить блочный элемент поверх FLASH?

Скажу сразу сделать flash бэкграундом, увы, нельзя. Не поддерживается браузерами.

Выход из положения

1. Отключаем нечувствительность flash к слою

По умолчанию flash-объект всегда вылезает в передний слой.

Сказать ему свое «ай-ай-ай» можно через параметр wmode.

Чувствительны к слою два его значения:

• transparent (убирает у флэш-объекта фон, но притормаживает графику)
• opaque (самое оно)

Как передать эти значения flash-объекту?

Если флэшка вставлена стандартным способом, то где-нибудь перед тэгом </object> добавьте  непарный тэг:

<param name="wmode" value="opaque" />

Либо замените значение value если он уже есть.

В тэг <embed … > (если он есть) перед «>» добавьте:

mode="opaque"

Если уже есть, измените значение на указанное.

2. Накладываем элемент  верхнего слоя

Путем позиционирования (position:absolute;top:X;left:Y;z-index:9999;) накладываем div с тем содержимым, которое должно быть поверх flash.

Если ваш сайт не привязан к краю, а, как у меня, находится в контейнере с фиксированной шириной по центру экрана, делаем так:

Один div позиционируем абсолютно  (position:absolute;) и в качестве позиции right (если флешка слева) или left (если она справа).

В этот div вставляем еще один div с такой-же шириной и позиционированием position:relative;, которое наложит наш внутренний div (с элементом) поверх flash. Его позиционируем в пикселях от центра с помощью top и left (или right).

Как видите DIV и пр. поверх FLASH — это вполне реально.

Для тех, кто пользует SWFobject

Если вы не знаете что такое SWFobject, возможно вам оно и не надо, но для тех, кого угораздило — пишу кратко.

Допустим у вас вот такая конструкция:

var so = new SWFObject("/fleha.swf","int001r","200","40","8","#ffffff");

Т.е. все скорее всего здорово отличается, но суть в том, что у вас «so =».

В этом случае после строки подобной той, что в примере пишем вот что:

so.addParam("wmode", "opaque");

Сие краткое заклинание прибавляет тот самый  «opaque», о котором я уже порядком устал говорить.

С ним, все остальные манипуляции со стилями такие-же, как описано выше.

Вот теперь тему считаю раскрытой))

А с вами был доктор Лексиум.
До встречи))