Как сделать 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.
27 Ноя 2011 в 20:52
1Проблема также в том, что непойми как организовать отслеживание переходов по флэшу
27 Ноя 2011 в 21:25
2@Max1mus: если ты над ним повесил абсолютно позиционированную ссылку, то на флеш уже тупо пофиг — отслеживаешь любым методом отслеживания клика по ссылке. Если ссылка «зашита» во флеше, то как-то так:
on (release) { getURL (clickTag, "_blank"); }
26 Янв 2012 в 23:48
3БЛАГОДАРЮ ЗА ИНСТРУКЦИЮ! НАКОНЕЦ-ТО, ПОЛУЧИЛОСЬ!:)
11 Фев 2012 в 9:46
4классный пост, моя давняя проблема решена!:smile:
10 мая 2012 в 11:24
5А у меня это толком не заработало! Флешка получается как будто перед «костылем» и по прежнему по ней не кликается, зато по границе полей работает исправно, как Flash запихать на задний план?
13 Июн 2012 в 9:47
6Спасибо за решение. Пробовал в 6 браузерах, всё работает. Лишняя картинка, но зато какая проблема сразу решена.
20 Июн 2012 в 10:57
7Согласна с автором комментария №5 (Юрий). Кроме хрома и ИЕ нигде не пробовала, но в этих конкретно не работает — флэш перед костылем...((( А счастье было так возможно...
04 Июл 2012 в 14:33
8Сенкью! очень помогло!
12 Авг 2012 в 2:23
9Спасибо, как раз смог решить вопрос, респект за статью!
06 Сен 2012 в 18:46
10Работает! Спасибо!
10 Дек 2012 в 1:54
11Спасибо большое! помогло,не знаю как ты до этого додумался) но блин жесть
10 Фев 2013 в 14:25
12Спасибо тебе. Ты СИЛА. Я 15 часов трудился над решением, ну думаю придется AdobeFlashCS3.Pro качать- изучать, флеш-ролик переделывать. А оказалось так просто с твоей помощью.
21 Мар 2013 в 15:14
13не работает. Флеш все равно выше ссылки
31 Мар 2013 в 4:36
14Большое спасибо! Всё работает
13 Июл 2013 в 19:31
15Все работает, спасибо автору!!
31 Июл 2013 в 11:22
16Спасибо, все работает)
25 Дек 2013 в 14:16
17Все работает, но столкнулся со следующей проблемой: Если swf по каким то причинам не доступен то s.gif сползает вниз, приблезительно наполовину height, закрывая тем самым очень важные ссыли на моем сайте! Как победить данный недуг?
24 Фев 2014 в 15:23
18Всё работает Больное спасибо!
07 Ноя 2014 в 9:28
1907 Ноя 2014 в 10:14
20Немного поразмыслив решил проблему!
Что бы в IE 7 ваш swf банер был виден, в
добавим атрубит overflow:hidden.
Еще раз спасибо автору за статью!
07 Апр 2015 в 14:21
21только теперь флеш не реагирует на hover мылки. вариант рабочий 50%
20 Апр 2015 в 14:29
22Спасибо большое за решение!