Как flash-баннер сделать ссылкой - Web-article

Как flash-баннер сделать ссылкой - Web-article

08.06.2013 13:2619368

Думаю все знают в наше время что такое flash банненры. Еще бы не знать , ведь сегодняшний интернет предлагает нам очень широкий выбор всего что угодно , везде где угодно , но только не в области создания баннеров. И это неудивительно , ведь для того чтобы создать подходящий баннер , нужно всего лишь.. определиться в одном из двух форматов , swf или gif . Почему всего два - честно , не в курсе. Сам задаюсь этим вопросом периодически(apng не учитываю).

 
А теперь давайте разберем , какой из двух вариантов является более предпочтительным ? Думаю кроме меня эта мысль посещала еще не один ум. Итак , давайте выберем из того что есть более подходящего лично для вас , но как известно чтобы выбрать более лакомый кусочек , его изначально рекомендуется взвесить. Для взвешивания мы имеем два объекта , каждый из которых обладает своими , неповторимыми свойствами.

Окажу помощь в разработках или сайты под ключ, пишите запросы в комменты или контакты. Большое количество готовых сайтов, контент на разные тематики: интересно, качественно, недорого.

Формат который мы именуем как флеш , имеет свойства векторной графики , а это значит что изменяя его размер , качество не меняется , но привязка к флеш плееру намного понижает этот плюс. А если взять в расчет динамическую подстановку содержимого в готовый код , то тут уж баннер изготовленный при помощи технологии флеш нас очень разочарует. Думаю многим из вас приходилось испытывать трудности при попытке сделать флеш баннер ссылкой с помощью html. Эта трудность объясняется тем , что баннер созданный с помощью технологии флеш имеет максимальные параметры масштаба и z-index (коэффициента наложения слоев друг на друга). 

Отсюда и выливается это не всегда комфортное правило , что поверх баннера флеш нельзя ничего наложить. В связи с этим у многих пользователей появляется ошибочное мнение , что баннер создаваемый с помощью технологии флеш обязательно делать ссылкой средствами самого флеш , иначе он будет просто объектом , не имеющим адреса... Хочу сказать вам радостную новость сразу , это заблуждение. Любой баннер , созданный при помощи технологии флеш , не имеющий адреса при клике , можно сделать ссылкой средствами html. HTML велик , поэтому в его компетенции решать подобные вопросы.
Но прежде чем перейти к примеру использования флеш баннера в качестве ссылки средствами html , давайте разберем подробнее , что же из себя представляет форма gif , и чем он отличается от формата flash ?

Формат gif по сути своей является изображением (либо набором изображений) , с поддержкой покадровой прокрутки (анимации). Самый большой минус заключается в том , что формат gif поддерживает максимум 256 цветов(индексированных) , а это значит что красивые градиенты выполненные в других форматах будут выглядеть как бельмо при переводе в формат гиф.

Окажу помощь в разработках или сайты под ключ, пишите запросы в комменты или контакты. Большое количество готовых сайтов, контент на разные тематики: интересно, качественно, недорого.

Из этого напрашивается очевидный вывод , что серьезную анимацию с глубокой цветовой гаммой , в которой градиенты сменяют друг друга , реально делать в других форматах , но только не в gif. А учитывая что кроме gif остается swf(apng мы пока не затрагиваем ввиду недостаточной распространенности и частичной поддержки браузерами) выбор очевиден.

Значит в свойствах и отличиях двух вышеперечисленных форматов мы разобрались , теперь перейдем к главной проблеме. Что нужно делать если вдруг появилась необходимость сделать ссылкой swf баннер ?

Тут все не так сложно как могло бы показаться. Давайте рассмотрим сначала как будет выглядеть баннер(анимация) в формате gif , если мы захотим сделать его ссылкой ? Да очень просто , между тегами a href= будет заключено изображение , и при клике на него вас будет переводить на указанный адрес. В нашем примере это будет так:

<a href="адрес баннера"><img src="путь к изображению.gif" alt=""></a>

Но если взять флеш баннер , и заключить его между тегами <a></a> , ничего не произойдет в большинстве браузеров. Почему в большинстве ? да потому что некоторые все же поддержат такой синтаксис ! Но нам ведь нужно не некоторые , а все актуальные на сегодня.

Поэтому простым a href тут не обойтись , ему нужно дать определенные свойства , и еще добавить небольшой хак , благодаря которому флеш баннер станет подвластным обыкновеннму тегу a с атрибутом href , ведущему на определенный адрес при клике.

Окажу помощь в разработках или сайты под ключ, пишите запросы в комменты или контакты. Большое количество готовых сайтов, контент на разные тематики: интересно, качественно, недорого.

Итак , возьмем произвольный флеш баннер , с произвольным адресом. Наша задача - чтобы конечная остановка после клика была в нужном нам месте. Для этого в теге а ссылки(либо стилях) прописываются такие свойства: предварительно заключаем баннер в див контейнер , которому даем команду position:relative; самой ссылке а даем атрибут style="position:absolute;width:ширина;height:высота;background:url(/uploads/1.gif);

Прозрачный gif размером 1x1 px который будет перекрывать баннер сверху и являться ссылкой , но физически мы его не увидим , поэтому будет создаваться иллюзия клика на сам баннер. В самом флеш-коде прописывается параметр wmode="opaque" - чтобы избавить flash от бесконечного z-index'a.
В итоге мы получаем полностью кликабельный баннер формата swf , что и требовалось.
В итоге наш код может выглядеть так: 

 

 

<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Кликабельный баннер swf средствами html</title> </head> <body> <div style="position: relative"> <a href="//beget.ru?id=67156" target="_blank" style="position:absolute;width:480px;height:125px;background:url(1.gif);"></a> <embed src="prohtml-team.swf" quality="high" type="application/x-shockwave-flash" wmode="opaque" width="480"height="125" pluginspage="//www.macromedia.com/go/getflashplayer" allowScriptAccess="always"></embed> </div> </body> </html>

Окажу помощь в разработках или сайты под ключ, пишите запросы в комменты или контакты. Большое количество готовых сайтов, контент на разные тематики: интересно, качественно, недорого.

Также можно прозрачную гифку заменить на background: rgba(255,255,255,0);
В этом случае код может быть примерно таким:

 

 

<div style="position: relative;margin:0 auto;height:125px;max-width:480px;overflow:hidden;"> <a href="//beget.ru?id=67156" rel="nofollow" target="_blank" style="position:absolute;top:0;left:0;display:block;width:100%;height:125px;background:rgba(255,255,255,0);z-index:100;"></a> <embed src="prohtml-team.swf" quality="high" type="application/x-shockwave-flash" wmode="opaque" height="125" pluginspage="//www.macromedia.com/go/getflashplayer" allowScriptAccess="always" style="position:absolute;top:0;z-index:1;width:100%;"></embed> </div> swf-баннер-ссылкой-средствами-html.jpg swf баннер ссылкой средствами-html

демо

Вы не можете скачивать прикрепленные файлы.
Пожалуйста, включите JavaScript!

Swf , Swf Ссылкой , Флеш Через Html

Верстка / Веб решения PRoHtml

«Как сделать swf баннер ссылкой средствами html?» - Похожие страницы

+ Автозапчасти. Как сделать выбор? В наше время на рынке запчастей практически не осталось их нехватки, возможно купить любую деталь. При этом, без сомнения, эти запчасти можно условно поделить на 3 группы. О них и будет идти речь в данной с...

Разное по теме 1020

Как сделать красивый шаблон сайта У Вас появилось желание создать красивый шаблон для веб-сайта, но вы никогда не слышали и вообще не интересовались как это качественно сделать? Тогда эта статья именно для Вас! Ниже представлена краткая поша...

Создание сайта 1033

Как сделать маникюр гель-лаком самостоятельно Ухоженные ногти Аккуратный и долговечный маникюр - это мечта любой девушки. Шеллак в домашних условиях является прекрасной альтернативой обычным лакам и избавит вас от необходимости посещать салоны красоты ...

Разное по теме 3195

Комментарии отсутствуют

Добавление комментариев доступно только зарегистрированным пользователям

Как flash-баннер сделать ссылкой - Web-article 70
Как вставить свою партнерскую ссылку в любой баннер и
Как flash-баннер сделать ссылкой - Web-article 29
Как сделать картинку ссылкой буквально за минуту
Как flash-баннер сделать ссылкой - Web-article 72
Как сделать swf баннер ссылкой средствами html? - t
Как flash-баннер сделать ссылкой - Web-article 100
Как сделать картинку ссылкой - Нео блоггер
Как flash-баннер сделать ссылкой - Web-article 98
15 правил создания кликабельного баннера
Как flash-баннер сделать ссылкой - Web-article 48
Как flash-баннер сделать ссылкой m
Как flash-баннер сделать ссылкой - Web-article 20
Вязаные свитера и пуловеры для детей - Вязание для. - Страна рукоделия
Как flash-баннер сделать ссылкой - Web-article 60
День пожилых людей: вышиваем подарок своими руками
Как flash-баннер сделать ссылкой - Web-article 30
Идеальные брови: как сделать самой
Как flash-баннер сделать ссылкой - Web-article 66
Как в реальной жизни стать магом огня, воды, воздуха в
Как flash-баннер сделать ссылкой - Web-article 84
Как flash-баннер сделать ссылкой - Web-article 25
Как flash-баннер сделать ссылкой - Web-article 24
Как flash-баннер сделать ссылкой - Web-article 12
Как flash-баннер сделать ссылкой - Web-article 90
Как flash-баннер сделать ссылкой - Web-article 98
Как flash-баннер сделать ссылкой - Web-article 41
Как flash-баннер сделать ссылкой - Web-article 34