Главная / Верстка / Веб решения / Как сделать swf баннер ссылкой средствами html?

Как сделать swf баннер ссылкой средствами html?


08.06.2013 13:2617445

Думаю все знают в наше время что такое 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>


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

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





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

Как быстро создать собственный баннер из любой картинки + Не расстраивайтесь, все проще, чем кажется. Попробуйте сделать это сами, следуя дальнейшим инструкциям. Я уже рассказывал о простом графическом редакторе picpick и о том, как с его помощью редактировать карт...
+ Автозапчасти. Как сделать выбор? В наше время на рынке запчастей практически не осталось их нехватки, возможно купить любую деталь. При этом, без сомнения, эти запчасти можно условно поделить на 3 группы. О них и будет идти речь в данной с...
Как сделать красивый шаблон сайта У Вас появилось желание создать красивый шаблон для веб-сайта, но вы никогда не слышали и вообще не интересовались как это качественно сделать? Тогда эта статья именно для Вас! Ниже представлена краткая поша...
Как сделать маникюр гель-лаком самостоятельно Ухоженные ногти Аккуратный и долговечный маникюр - это мечта любой девушки. Шеллак в домашних условиях является прекрасной альтернативой обычным лакам и избавит вас от необходимости посещать салоны красоты ...

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