Как сделать Flash ссылкой. Как обернуть .swf-файл в ссылку

Воскресенье, 27 Ноя 2011 17:43

Пару раз уже приходится потеть над не совсем стандартной задачей: есть флеш-баннер (файл в формате .swf), который нужно сделать ссылкой... Вообще по феншую подобные вещи делаются в самом флеше еще во время разработки баннера, и ссылкой выступает непосредственно баннер без никакого оборачивания его в тег <a>. Но, видимо, часто флешеры забывают спросить заказчика, куда должен вести баннер, и сиё дело перекладывается на плечи верстальщика. И вот здесь возникает проблема.

Вариант 1 (нерабочий). С ходу приходит идея тупо обернуть баннер ссылкой. Но если просто обернуть код самого флеш-баннера в тег ссылки <a href="ссылаемый адрес">код флеш-баннера</a>, то, как это ни странно, ничего у вас не выйдет: при наведении на баннер курсора ссылка в строке состояния будет не видна, и клик по баннеру ничего не даст.

Вариант 2 (нерабочий). Изощренный верстальщик пойдет дальше и попробует сделать ссылку блочной и спозиционировать её абсолютно прямо поверх баннера, задав её z-index побольше. Но, как ни странно, и это ничего не даст. Самое время очертить проблему: flash-объекты по-умолчанию обладают бесконечным z-index'ом, перекрывая любой, даже абсолютно позиционированный над ними объект.

Вариант 3 (частично рабочий). Чтобы избавить flash от бесконечного z-index'a, разработчики flash'a дали нам удобный параметр: <param name="wmode" value="opaque"> или же просто wmode="opaque", если встраиваете flash через <embed>.

Здесь у нас получается следующий вариант:

<div style="position: relative;">
	<a style="position: absolute; width: 100%; height: 250px; left: 0; top: 0;" href="http://blogto4ka.ru" target="_blank"></a>
	<object type="application/x-shockwave-flash" data="banner1.swf" width="300" height="250">
		<param name="wmode" value="opaque"> //тот самый ключевой параметр, который убирает у flash бесконечный z-index
		<param name="movie" value="banner1.swf" />
		<param name="quality" value="high" />
	</object>
</div>

Но и это еще не все! Ведь данный вариант, если в ссылке нет никакого текста, странным образом отказывается работать в IE 6-9 (если в ссылке все же будет текст, то этот текст поверх flash-баннера будет вполне кликабельным в IE), и как обычно для осла нам потребуется специальный костыль...

Вариант 4 (100% рабочий)

Чтобы вариант 3 работал и в IE, необходим уникальный костыль — задать для ссылки прозрачный бэкграунд при помощи однопиксельной прозрачной картинки (в данном случае s.gif):

<div style="position: relative;">
	<a style="position: absolute; width: 100%; height: 250px; left: 0; top: 0; background: url(images/s.gif) left top no-repeat;" href="http://blogto4ka.ru" target="_blank"></a>
	<object type="application/x-shockwave-flash" data="banner1.swf" width="300" height="250">
		<param name="wmode" value="opaque">
		<param name="movie" value="banner1.swf" />
		<param name="quality" value="high" />
	</object>
</div>

Данный вариант работает во всех популярных браузерах. Я лично проверил на IE7-9, актуальных на сегодня версиях FF, Safari, Opera.

http://blogto4ka.ru

RSS комментариев

22 комментария Комментировать

  1. Max1mus пишет:

    27 Ноя 2011 в 20:52 Reply to this comment

    1

    Проблема также в том, что непойми как организовать отслеживание переходов по флэшу

  2. nikolas_sharp пишет:

    27 Ноя 2011 в 21:25 Reply to this comment

    2

    @Max1mus: если ты над ним повесил абсолютно позиционированную ссылку, то на флеш уже тупо пофиг — отслеживаешь любым методом отслеживания клика по ссылке. Если ссылка «зашита» во флеше, то как-то так:

    on (release) { getURL (clickTag, "_blank"); }

  3. Елена пишет:

    26 Янв 2012 в 23:48 Reply to this comment

    3

    БЛАГОДАРЮ ЗА ИНСТРУКЦИЮ! НАКОНЕЦ-ТО, ПОЛУЧИЛОСЬ!:)

  4. Мага пишет:

    11 Фев 2012 в 9:46 Reply to this comment

    4

    классный пост, моя давняя проблема решена!:smile:

  5. Юрий пишет:

    10 мая 2012 в 11:24 Reply to this comment

    5

    А у меня это толком не заработало! Флешка получается как будто перед «костылем» и по прежнему по ней не кликается, зато по границе полей работает исправно, как Flash запихать на задний план?

  6. Squirr пишет:

    13 Июн 2012 в 9:47 Reply to this comment

    6

    Спасибо за решение. Пробовал в 6 браузерах, всё работает. Лишняя картинка, но зато какая проблема сразу решена.

  7. Ольга пишет:

    20 Июн 2012 в 10:57 Reply to this comment

    7

    Согласна с автором комментария №5 (Юрий). Кроме хрома и ИЕ нигде не пробовала, но в этих конкретно не работает — флэш перед костылем...((( А счастье было так возможно... :roll:

  8. Василий пишет:

    04 Июл 2012 в 14:33 Reply to this comment

    8

    Сенкью! очень помогло!

  9. nthanter пишет:

    12 Авг 2012 в 2:23 Reply to this comment

    9

    Спасибо, как раз смог решить вопрос, респект за статью!

  10. rinat пишет:

    06 Сен 2012 в 18:46 Reply to this comment

    10

    Работает! Спасибо!

  11. Рустем пишет:

    10 Дек 2012 в 1:54 Reply to this comment

    11

    Спасибо большое! помогло,не знаю как ты до этого додумался) но блин жесть

  12. Андрюха пишет:

    10 Фев 2013 в 14:25 Reply to this comment

    12

    Спасибо тебе. Ты СИЛА. Я 15 часов трудился над решением, ну думаю придется AdobeFlashCS3.Pro качать- изучать, флеш-ролик переделывать. А оказалось так просто с твоей помощью.

  13. Сергей пишет:

    21 Мар 2013 в 15:14 Reply to this comment

    13

    не работает. Флеш все равно выше ссылки

  14. murrzik777 пишет:

    31 Мар 2013 в 4:36 Reply to this comment

    14

    Большое спасибо! Всё работает  :grin:

  15. Денис пишет:

    13 Июл 2013 в 19:31 Reply to this comment

    15

    Все работает, спасибо автору!! 

  16. Александр пишет:

    31 Июл 2013 в 11:22 Reply to this comment

    16

    Спасибо, все работает) :smile:

  17. Сергей пишет:

    25 Дек 2013 в 14:16 Reply to this comment

    17

    Все работает, но столкнулся со следующей проблемой: Если swf по каким то причинам не доступен то s.gif сползает вниз, приблезительно наполовину height, закрывая тем самым очень важные ссыли на моем сайте! Как победить данный недуг?

  18. brigdans пишет:

    24 Фев 2014 в 15:23 Reply to this comment

    18

    Всё работает Больное спасибо!  :grin:

  19. Artem пишет:

    07 Ноя 2014 в 9:28 Reply to this comment

    19

    :shock: АВТОР ГЕНИАЛЕН!!! Работает как и хотелось, если бы не Ваша статья не за что б не догадался... Только вот в IE 7 банер залит всем белым, но клик работает. Подскажите пожалуйста.

  20. Artem пишет:

    07 Ноя 2014 в 10:14 Reply to this comment

    20

    Немного поразмыслив решил проблему!

    Что бы в IE 7 ваш swf банер был виден, в

    добавим атрубит overflow:hidden.

    Еще раз спасибо автору за статью!

  21. Максим пишет:

    07 Апр 2015 в 14:21 Reply to this comment

    21

    только теперь флеш не реагирует на hover мылки. вариант рабочий 50%

  22. Александр пишет:

    20 Апр 2015 в 14:29 Reply to this comment

    22

    Спасибо большое за решение!

Оставьте свой комментарий о материале
(Комментарии со ссылками попадают на модерацию. Остальные не попадают, но я могу удалять те, которые посчитаю бесполезными, не несущими смысловой нагрузки)