Ротатор баннеров
Сайты, как люди – они рождаются, растут и развиваются. Наполняются материалом, толстеют, жиреют и обрастают солидностями... И вот, рано или поздно – на каждом сайте возникает вопрос об установке ротатора баннеров для экономии места на веб-странице и более компактного её отображения.
Когда пришло время мне устанавливать ротатор баннеров на свой сайт, я выбирал самые простые варианты, справедливо полагая, что истина – она в простоте.
Простейший ротатор баннеров
Простейший ротатор показывает баннеры в произвольном порядке, каждый раз изменяя отображаемую картинку при открытии или обновлении (кнопка F5) страницы браузера. Показ (ротация) баннеров в случайном порядке иногда приводит к повторению одних картинок и игнорированию других, что особенно заметно при частом обновлении (кнопка F5) страницы. Если этим дефектом пренебречь, то в целом – это довольно простой и неплохой ротатор баннеров. Для установки этого ротатора баннеров надо установить в нужное место страницы этот код:
<script> |
Пояснения для кода:
Параметры ссылок и картинок простейшего ротатора баннеров Принципиально, баннерную ссылку, зачастую даёт и оформляет сам рекламодатель. Нужно только вставить её непосредственно в код. |
Параметры скрипта простейшего ротатора баннеров Если потребуется добавить в простейший ротатор больше баннеров, то – нужно увеличить количество строк со ссылками на баннеры, вида 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, из которых самыми
Смотреть пример работы атрибутов бегущей строки