1 октября 2009 г.

Как сделать, чтобы Flash-ролик не перекрывал другие элементы веб-страницы

Делая кое-какое задание на работе, столкнулся с проблемой – флеш-ролик, помещенный на страницу, начал перекрывать всплывающее меню (которое выводится с помощью блоков <div>, css и JavaSript. Выглядит паскудно – так что поискал, нашел и решил.

Но поскольку это – на работе, то вроде и показать нету как. Так что сделал и забыл.

Однако, как говорится «свежо предание». Захожу (опять же, по работе) на русский сайт компании Wacom – и на тебе, та же ерунда! :)

На этом сайте, на главной, стоит внедренное видео с YouTube. А оно, как известно, сделано на Flash.

И закрывает собой всплывающее меню.

Выглядит это безобразие вот так:

А решается очень просто.

В Flash IDE (Macromedia Flash, или Adobe Flash – какая у Вас там версия…), в окне настройки параметров публикации (Publish Settings, вызывается по Ctrl-Shift-F12), на вкладке HTML надо установить для параметра Windows Mode значение Opaque Windowsless (по умолчанию там стоит Window).

Вот так вот:

 

При публикации – уже с учетом данной установки – в html-файле, в теге <embed> появляется новый параметр  – wmode="opaque"

А в теге <object><param name="wmode" value="opaque" />

Так что можно и не делать повторную публикацию клипа, а просто вставить нужный параметр – в тег <embed>, или <object> (или в оба – что вы там используете; а если вы встраиваете Flash через JavaSript, то разработчики скрипта, по идее, должны были тоже предусмотреть смену данного параметра).

После того, как данный параметр вставлен, браузер начинает отображать все так, как и ожидалось с самого начала – никакие блоки <div> под Flash уже не прячутся.

8 комментариев :

  1. Спасибо за статью, очень кстати :)

    ОтветитьУдалить
  2. Да не за что, пользуйтесь на здоровье. Там, кстати, есть и третий параметр (он тоже устанавливается как параметр тегов object и embed). При его установке Flash не будет иметь цветной подложки - той, что выставлена в самом Flash IDE. Имеется в виду - при вставке на веб-страницу. Полезно, если флешина хитрой формы, и под ней должна просвечиваться сама страница.

    ОтветитьУдалить
  3. Александр! Большое спасибо!
    Вы просто спасли мне сайт!
    Я абсолютный чайник, и даже у меня все получилось сразу! (жаль что таких роликов у меня штук 150, но ничего постепенно исправлю)
    с ув. Лариса
    www.odyvanchik.at.ua

    ОтветитьУдалить
  4. У меня в проекте www.moidagestan.ru уже интегрировано куча флеш-объектов. Поэтому подстановку решил сделать на JS. Повесил обработчик на domready. Атрибут вставляется, но чуда не происходит. Если же правишь руками объект, то всё работает. Чё делать не знаю: парсить выдаваемое через ПХП не хочется.

    Кстати, ИЕ8 положительно реагирует на wmode="opaque" в теге embed. Даже object править не надо.

    ОтветитьУдалить
  5. Анонимный15 мая 2011 г., 15:19

    Спасибо, отлично работает.

    ОтветитьУдалить
  6. Огромное спасибо за пост, он меня просто спас!

    ОтветитьУдалить
  7. Спасибо, дружище! Помог, до этого с помощью javascript просто тупо ролик прятал.

    ОтветитьУдалить