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

Flash баннер

Сегодня передо мной возникла одна небольшая проблемка: как сделать 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-го ответа от сервера.

Вот и все! Теперь у нас есть полноценный баннер, то есть флешка, которая является ссылкой. Надеюсь вам пригодится это решение :)

Теги: 

Добавить комментарий

Filtered HTML

  • Адреса страниц и электронной почты автоматически преобразуются в ссылки.
  • Разрешённые HTML-теги: <a> <em> <i> <strong> <b> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd> <p> <br>
  • Строки и параграфы переносятся автоматически.

Plain text

  • HTML-теги не обрабатываются и показываются как обычный текст
  • Адреса страниц и электронной почты автоматически преобразуются в ссылки.
  • Строки и параграфы переносятся автоматически.
CAPTCHA
CAPTCHA на основе изображений
Введите код с картинки