РИТ: Клиентские технологии - профессиональная конференция веб-разработчиков

Перекрываем флеш всплывающими блоками

Необходимо создать всплывающий блок (например, тултип), который будет виден поверх флеша. Думаете просто? Ничуть. Вероятнее всего флеш начисто перекроет ваш блок, даже если выставить z-index:10000.

Для решения проблемы предлагаю 2 известных мне пути:

Изменение свойств самого флеша

Если добавить в код флеша параметр:

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

,то абсолютно (или относительно) позиционированный ДИВ с ненулевым z-index гарантировано окажется поверх флеша.

Использование iframe

Этот способ более трудоемкий и подразумевает использование IFRAME вместо DIV-a. Всплывающий iframe кроссбраузерно перекрывает флеш. Страницу для него можно генерить на сервере или заполнять HTML-кодом прямо из JavaScript-сценария.

Из минусов кроме трудоемкости:

  • При открытиии такого IFRAME с использованием загрузки страницы в ИЕ слышны характерные щелчки, как при переходе по ссылке.
  • Засоряется хистори.

Знаете еще способы? Ждем вас в комментах!

Александр Бурцев 25 июня 2007

© Все права на данную статью принадлежат порталу fastcoder.org. Перепечатка в интернет-изданиях разрешается только с указанием автора и прямой ссылки на оригинальную статью. Перепечатка в печатных изданиях допускается только с разрешения редакции.

Комментарии

helpers 26 сентября 2008, 14:26 #
это просто бичь нынче.
столкнулся с изложенной выше проблемой и не как не могу побороть
 
Bur 26 сентября 2008, 15:03 #
Вышеописанные способы не помогают?
 
SelenIT 3 ноября 2008, 21:31 #
Если не важна прозрачность флеш-ролика (т.е. чтоб фон странички просвечивал через него), в первом способе лучше вместо transparent использовать opaque — эффект тот же, но меньше нагружает проц. И если флеш вставлен "добрым старым" способом — комбинацией <object> и <embed> — для второго тоже нужно прописать атрибут wmode="opaque" (или transparent, если нужен именно прозрачный ролик).
 
 
Rambler's Top100 Flede HTML valid CSS valid Технологический конкурс сайтов WebHiTech