Инструкция
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="/"> </a>В открывающий тег помещен атрибут href, который содержит адрес для отправки запроса. Между этими двумя тегами ссылки и вставьте тег баннера:<a href="/"><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="/"></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 (в двух местах).