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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Если флэшка вставлена стандартным способом, то где-нибудь перед тэгом </object> добавьте  непарный тэг:
[code][/code]
Либо замените значение value если он уже есть.

В тэг <embed … > (если он есть) перед «>» добавьте:
[code]mode=»opaque»[/code]
Если уже есть, измените значение на указанное.

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, возможно вам оно и не надо, но для тех, кого угораздило — пишу кратко.

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

[code]

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

[/code]

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

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

[code]

so.addParam(«wmode», «opaque»);

[/code]

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

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

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

 

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

Mr.Grey
Ответ написан 11 марта 2011 в 18:01. · Изменить грАватар

В примере с елфом — флэша нет )

Ответ написан 11 марта 2011 в 22:44. · Изменить грАватар

В примере с эльфом (на главной), эльф — сделан на флеше, календарь наложен поверх.

Игорь
Ответ написан 21 сентября 2011 в 23:21. · Изменить грАватар

Спасибо! Статейка выручила — то что надо

Ответ написан 22 сентября 2011 в 06:55. · Изменить грАватар

Наздоровье)) Пользуйтесь.

Следить за темой по RSS

Напишите комментарий