Интернетчик » site » Ротатор баннеров

Ротатор баннеров

Сайты, как люди – они рождаются, растут и развиваются. Наполняются материалом, толстеют, жиреют и обрастают солидностями... И вот, рано или поздно – на каждом сайте возникает вопрос об установке ротатора баннеров для экономии места на веб-странице и более компактного её отображения.

Вертолёт для баннераВертолёт для баннера

Когда пришло время мне устанавливать ротатор баннеров на свой сайт, я выбирал самые простые варианты, справедливо полагая, что истина – она в простоте.

  1. Простейший ротатор баннеров
  2. Бегущий ротатор баннеров

Простейший ротатор баннеров

Простейший ротатор показывает баннеры в произвольном порядке, каждый раз изменяя отображаемую картинку при открытии или обновлении (кнопка F5) страницы браузера. Показ (ротация) баннеров в случайном порядке иногда приводит к повторению одних картинок и игнорированию других, что особенно заметно при частом обновлении (кнопка F5) страницы. Если этим дефектом пренебречь, то в целом – это довольно простой и неплохой ротатор баннеров. Для установки этого ротатора баннеров надо установить в нужное место страницы этот код:

<script>
var banner = new Array();
banner[0] = '<a href="Страница-1" target="_blank" rel="nofollow"><img src="Изображение-1" alt="Название-1" title="Название-1" width="250" height="400"></a>';
banner[1] = '<a href="Страница-2" target="_blank" rel="nofollow"><img src="Изображение-2" alt="Название-2" title="Название-2" width="250" height="400"></a>';
banner[2] = '<a href="Страница-3" target="_blank" rel="nofollow"><img src="Изображение-3" alt="Название-3" title="Название-3" width="250" height="400"></a>';
var n = ~~(Math.random()*3);
document.write(banner[n]);
</script>

Пояснения для кода:

Параметры ссылок и картинок простейшего ротатора баннеров
href="Страница-1" – ссылка на направляемую страницу, например:
href="http://tehnopost.info/"
target="_blank" – открывать страницу в новом окне
rel="nofollow" – запрет поисковым роботам переходить по баннерной ссылке
src="Изображение-1" – путь до изображения баннера, например:
src="/uploads/posts/2014-09/1410938044_vertolet-dlya-bannera-1.jpg"
alt="Название-1" – альтернативное название картинки баннера, которое будет отсвечивать на её месте до загрузки кода баннера в браузер. (например, если баннер не доступен по Сети или отключен рекламодателем)
title="Название-1" – название картинки баннера, которое будет появляться при наведении курсора мыши на картинку баннера
width="250" height="400" – ширина и высота картинки в пикселях.

Принципиально, баннерную ссылку, зачастую даёт и оформляет сам рекламодатель. Нужно только вставить её непосредственно в код.

Параметры скрипта простейшего ротатора баннеров
Если потребуется добавить в простейший ротатор больше баннеров, то – нужно увеличить количество строк со ссылками на баннеры, вида banner[n] – до необходимого количества. Т.е., нужно добавить строки со ссылками на баннеры, вида banner[3], banner[4], banner[5] и т.д. При этом, ОБЯЗАТЕЛЬНО! – в нижней строке кода, вида var n=~~(Math.random()*3); вместо числа «3» нужно указать свое количество баннеров. Указывание количества баннеров в строке кода, вида var n=~~(Math.random()*3); принципиально важно, поскольку здесь указывается поле чисел (пределы массива) для выбора номера случайного баннера (в данном случае – от 1 до 3). Если это поле не изменить, то добавленные баннеры не будут показываться (находиться вне поля выбора).

Смотреть пример работы простейшего ротатора баннеров

Прим. Данный код я нашёл на сайте online-dohod.ru, где автор утверждает о его подлинности. Чуть-чуть доработал авторский код, добавил от себя теги rel и title.

Бегущий ротатор баннеров

Бегущий ротатор баннеров имеет более привлекательный вид. В отличие от предыдущего, простейшего ротатора баннеров, этот ротатор показывает баннеры в упорядоченном списке, листая его до бесконечности. В основе работы кода бегущего (листающего) ротатора баннеров лежит тег marquee, который создаёт эффект бегущей строки или перемещения иного объекта по экрану в заданных для него пределах. Например, заключённый в теги marquee текст бегает по странице не далее отведённого ему места.

Код для бегущей строки имеет вид:
<marquee>Бегущая строка</marquee>

Смотреть пример бегущей строки

Что даёт нам бегущая строка?

Ну, во-первых, бегущая строка – повышает информативность рекламного места, на котором появляется возможность показать бесконечное количество рекламно-ссылочного материала на ограниченном поле веб-страницы. Во-вторых, бегущая строка – это динамическое движение, акцентирующее и привлекающее внимание пользователя. И, в-третьих – у тега marquee есть целый набор атрибутов, который делает процесс привлечения внимания пользователя управляемым и контролируемым.

Атрибуты тега marquee

На самом деле, действие тега marquee не ограничивается листанием текста и образует некий контейнер, который позволяет перемещать вверх и вниз (скроллировать) заключенные в него элементы веб-страницы по полю перемещения (скроллирования). При этом, элементы оформления могут быть любыми (изображения, таблицы, формы) и перемещаться вертикально или горизонтально. Эти свойства тега marquee положены в основу работы бегущего (листающего) ротатора баннеров. Единственным недостатком этого ротатора баннеров является тот факт, что тег marquee не входит в спецификацию HTML, что даёт нам невалидный код, который впрочем – прекрасно работает во всех браузерах.

Смотреть пример работы атрибутов бегущей строки

Создаём бегущий ротатор баннеров

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

Смотреть пример работы атрибутов бегущей строки