Как сделать flash-ку ссылкой

Пользовательского поиска

"Опасайтесь программистов, носящих с собой отвертки!"

Леонард Брендвайн

Публикаций —	121
Комментариев —	607
Пользователей —	46

Сегодня передо мной возникла одна небольшая проблемка: как сделать flash-ку ссылкой. Поясню - у меня есть флешевый баннер, в котором не зашит getUrl(), и нужно, не пересобирая, сделать его ссылкой.

Игры со css-стилями и код вида:
<a href=...><object...>...</object></a>
ни к чему не приводят - флешка все равно поверх ссылки.

Единственный способ, который сработал у меня во всех браузерах - достаточно неуклюжий, но задачу решает. А состоит он в том, чтобы разместить ссылку в виде блока поверх флешки. Использовать можно как абсолютное позиционирование, так и отрицательные margin-ы.

Флеш-элементы в html всегда располагаются выше всех (по оси z). Нам нужно от этого избавиться - давно известное кроссбраузерное решение: добавить параметр wmode со значением opaque и прописать аналогичный аттрибут тегу embed:

<object...>
   ...
   <param name="wmode" value="opaque">
   <embed wmode="opaque".../>
</object>

Кстати, этот способ также решает проблему выпадающего меню - с ним меню будет выпадать поверх флешевого блока.

Итак, добавим div-контейнер и в нём позиционируем абсолютно наши элементы, указав нужные z-индексы:

<style type="text/css">
   .banner {
      position:absolute;
      left: 0; top: 0;
      z-index:1;
   }
   .link {
      position:absolute;
      left: 0; top: 0;
      z-index:2;
      width: ???; height: ???;
   }
   .container {
      position: relative;
      width: ???; height: ???;
   }
</style>

<div class="container">
   <object... class="banner">
      ...
      <param name="wmode" value="opaque">
      <embed wmode="opaque".../>
   </object>
   <a href="..." class="link"></a>
</div>

Вместо вопросов здесь должны стоять размеры баннера.

Если вам достаточно браузера Safari - дальше можно не читать, в нём все уже работает. В остальных браузерах ссылка все так же не фурычит. Последний шаг на пути к успеху - добавить нашему ссылочному боксу прозрачный фон. Например так:

.link {
   ...
   background: url('n.gif') repeat;
}

Интересно, что наличие картинки n.gif не обязательно. Достаточно будет только вышеприведенного кода. Правда, хорошим тоном будет сделать прозрачный гифик, чтобы не было лишнего 404-го ответа от сервера.

Вот и все! Теперь у нас есть полноценный баннер :)

Да вы извращенец, уважаемый

Полно вам пустословить, милейший!
Предложите решение поизящней..

Спасибо, помогло

Спасибо, полезный материал. Почти готовое решение. Хвалю.

Супер!
Долго искал данное решение.

Почти всё получилось..ток с эксплорером как всегда проблемы=((

достаточно
background: none;
читай css лучше)

>> Флеш-элементы в html всегда располагаются выше всех (по оси z).
смысл такой же, но - неверно.

Флеш-элемент такого не существует понятия. Есть тег object/embed. Располагается в браузере он РОВНО там где вы его написали. на том же уровне по Z оси.

Реальная причина кроется в способе работы флеш-плеера, а именно то, как он рисует графику на экран. А делает он это следующим образом: он берет браузерский graphic surface (это то что вы видите глазами - графическое полотно, куда браузер помещает отрендеренный html) и в координаты, где расположен object/embed напрямую рендерит свою картинку, с частотой N FPS (обычно делают 20-30). Т.к. браузер рендерит контент только 1 раз после ресайза или изменений в DOM модели, то флеш уже через 1/20-30 секунды замещает на графическом полотне html-изображение своим. При этом, этом, очевидно, вообще никак не учитываются никакие z-index и прочие правила наложений браузеров. Вы можете это понаблюдать - если поверх большой флеши (чтобы тормозило побольше) поместить html контент и ресайзить браузер постоянно - вы увидите как этот контент проклевывается из-под флеша, мигает (это те моменты когда браузер отрендерил html и засунул на полотно, а флеш еще не успел новый кадр туда записать) - возможно не на всех браузерах это видно (зависит от его механизма работы с этим).

Когда вы говорите wmode=opaque, то стиль работы меняется. Флеш плеер не просто кладет свой кадр на полотно, а уже учитывает z-index и прочее, и если есть чтото над ним, он берет эту прямоугольную область и накладывает на свой кадр. При этом естессно, производительность ухудшается (но не особо сильно).

Самый тормознутый режим это wmode=transparent. Когда плеер берет все что снизу, накладывает себя (высчитывая прозрачность еще себя самого), а потом накладывает все что сверху. Т.е. при этом режиме еще видно html под флешом (если в нем графика есть прозрачная конечно).

Однако при wmode=opaque|transparent есть офигенный баг - при этом во флешку, если там есть textinput'ы, не введешь нормально больше русских букв)

Этот баг есть как в 9-м так и в 10-м плеере.

Очень познавательно, спасибо

вы развернуто мыслите, хорошо! и спасибо!

хоть бы бб какойнить повесили в комменты, пока дошло что тэги мешают ... :)

Статьи и справочные
материалы

Поискать на сайте

Навигация

Цитаты и афоризмы:

Туча тегов

Вход в систему