Совет добавлен

Как вставить ссылку в баннер

Если у вас есть баннер, но нет готового html-кода для его вставки в страницу, то добавить нужную вам ссылку не так уж сложно. Даже если баннер выполнен по флэш-технологии. Ниже описаны возможные варианты организации в исходном коде страниц ссылок на баннеры, выполненные в графических и флэш-форматах.
Как вставить ссылку в баннер
Инструкция
1
Если баннер в одном из графических форматов (gif, jpg, png, bmp), то достаточно будет поместить тег изображения внутрь тега ссылки.Сначала сформируйте тег изображения. На языке разметки веб-страниц (HTML - HyperText Markup Language - «язык разметки гипертекста») самый простой его вариант выглядит так:<img src="banner.gif" />Здесь в атрибуте src указан «относительный адрес» изображения. В этом варианте браузер будет считать, что картинка лежит в той же папке вашего сервера, где и сама страница в которую вставлен баннер. Но лучше указать «абсолютный адрес»:<img src="http://kakprosto.ru/banner.gif" />
2
В этот тег следует добавить еще несколько атрибутов. Два атрибута будут указывать размеры баннера (высоту и ширину). Это не обязательные атрибуты - изображение отобразится и без них, если при загрузке страницы с сервера в браузер все пройдет нормально. Но если картинка почему-нибудь не будет загружена, то отсутствие размеров может привести к тому, что и все остальные элементы дизайна окажутся не на своих местах. Тег с указанием размеров будет выглядеть так:<img src="http://kakprosto.ru/banner.gif" width="468" height="60" />
3
По умолчанию браузер рисует синюю рамку вокруг картинок со ссылками. Чтобы этого избежать следует добавить в тег для баннера атрибут border с нулевым значением:<img src="http://kakprosto.ru/banner.gif" width="468" height="60" border="0" />
4
Добавьте и еще один атрибут (title), который будет содержать текст для всплывающей подсказки при наведении курсора мыши на баннер:<img src="http://kakprosto.ru/banner.gif" width="468" height="60" border="0" title="Это баннер!" />
5
Тег изображения с наиболее важными атрибутами вы подготовили, теперь его надо поместить внутрь тега ссылки. Каждая гиперссылка формируется двумя тегами - открывающим и закрывающим:<a href="http://kakprosto.ru"> </a>В открывающий тег помещен атрибут href, который содержит адрес для отправки запроса. Между этими двумя тегами ссылки и вставьте тег баннера:<a href="http://kakprosto.ru"><img src="http://kakprosto.ru/banner.gif" width="468" height="60" border="0" title="Это баннер!" /></a>HTML-код баннера со ссылкой готов, не забудьте только заменить:- в атрибуте href: "http://kakprosto.ru" на адрес вашей ссылки для баннера;- в атрибуте src: "http://kakprosto.ru/banner.gif" на адрес изображения для баннера;- в атрибуте width: "468" на ширину вашего баннера;- в атрибуте height: "60" на высоту вашего баннера;- в атрибуте title: "Это баннер!" на всплывающий текст для вашего баннера;
6
Все вышеописанное относилось к баннерам-картинкам, но существуют и баннеры, исполненные по флэш-технологии. Чтобы вставить ссылку в флэш-ролик стандартным способом надо иметь не только сам баннер, но и его исходный код. К тому же, редактировать исходный код, а затем компилировать флэш-ролик, можно только в специализированном редакторе - обычный текстовый редактор для этого не подходит. Однако есть способ обойти все эти трудности, ограничившись редактированием только HTML и CSS (Cascading Style Sheets — «каскадные таблицы стилей»). Язык CSS используется для более подробного (по сравнению с HTML) описания внешнего вида элементов страницы. С его помощью на страницах можно строить довольно сложные многослойные конструкции. Этим мы и воспользуемся, поместив флэш-баннер в нижний слой, а над ним разместив слой со ссылкой.HTML-код баннера будет выглядеть так:<div class="linkedFlashContainer">
<a target="_top" class="flashLink" href="http://kakprosto.ru"></a>
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="468" height="60" align="middle">
<param name="movie" value="banner.swf" />
<param name="wmode" value="opaque">
<embed src="banner.swf" quality="high" wmode="opaque" width="468" height="60" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
</div>Не забудьте заменить в нем атрибуты width и height (в двух местах), имя баннера banner.swf (в двух местах) и адрес ссылки http://kakprosto.ru (в одном месте).А код SCC, соответствующий этому HTML-коду должен быть таким:<style>
div.linkedFlashContainer {position: relative; z-index: 1; border: 0px; width: 468px; height: 60px}
a.flashLink {position: absolute; z-index: 2; width: 468px; height: 60px; background: url(spacer.gif) no-repeat;}
</style>Здесь использована прозрачная картинка (любого размера) с именем spacer.gif. И тут тоже не забудьте поменять размеры width и height (в двух местах).
Полезен совет?
Источники
  • как сделать баннер ссылкой
Найдите сами
Поделитесь:
1 комментарий к совету
Добавить комментарий
Aleksey-102250
Комментарий добавлен
Кто баннеры ставит, объясните мне пожалуйста как это правильно сделать!
У меня есть инструкции, но мне не ясно.
Сборку делаю на шаблонах от Темплэйтмонстер. Сейчас у меня Zen-cart. Официальный сайт вообще не идёт на контакты, отсылают на форум, а там американцы, и всё на английском.

Я знаю, что баннеры меняются легко, и ставятся сразу, а не получается. Движок стоит на английском, рисунок я сохраняю на английском, разрешение делаю 940х1002 пикселей. Общий вес баннеров шаблона 87-90 кб, у меня вес 140-150кб. Там, какие то ссылки надо указать, я в них не могу разобраться. Может из-за ссылок? Вообще сборку всю делаю на сервере через хостинг.

Открываю сайт через хостинг, а в браузере он не открывается, набираю по-разному - идёт сброс. Может мне изначально установку шаблона надо было делать не через хостинг, а сразу в браузере - в инструкции так, и написано: пишем в строке браузера..... и производим установку. Но у меня и через панель админ хостинга всё устанавливается хорошо. Рису
Добавить комментарий
Осталось символов: 500
Войти на сайт
или
Забыли пароль?
Еще не зарегистрированы?