Как сделать и установить на сайте баннер растяжку

Поиски в интернете по этому вопросу почти ничего не дали. А лишнее рекламное место не помешает. Пришлось «изобретать» самому. Решил сделать растяжку с бегущей строкой. Делается всё очень просто, а для начала загляните на страницу «Бегущая строка». Результат, который получится, смотрите под шапкой этого сайта.

Начал с самого элементарного — с тегов, которые образуют бегущую строку < marquee > </marquee >:

Баннер растяжка

Далее, чтобы получить полноценную растяжку, необходимо добавить к тегам некоторые атрибуты. Начнём с того, что создадим сам блок растяжки и сразу зададим ему какую-то окраску.
Добавим к тегу атрибуты width, height и bgcolor, которые зададут длину, высоту и цвет блока:
< marquee width=»100%» height=»25″ bgcolor=»#99ADC2>Баннер растяжка </marquee >

Баннер растяжка

Длину блока width можно установить как в процентах так и в пикселях, на Ваше усмотрение

Сделаем бордюрную обводку блока с помощью атрибута border, так будет красивее смотреться:

< marquee style=»border: #000000 2px solid» width=»100%» height=»25″ bgcolor=»#99ADC2>Баннер растяжка </marquee >

Баннер растяжка

Теперь надо уменьшить скорость движения строки с помощью атрибута scrollamount и время между прорисовками строки с помощью атрибута scrolldelay

< marquee style=»border: #000000 2px solid» scrollamount=»2″ scrolldelay=»20″ width=»100%» height=»25″ bgcolor=»#99ADC2>Баннер растяжка </marquee >

Баннер растяжка

Изменяя значения в этих атрибутах, соответственно меняются параметры движения строки

Далее можно изменить цвет и размер шрифта текста в бегущей строке, добавив определённый код:

< marquee style=»border: #000000 2px solid» scrollamount=»2″ scrolldelay=»20″ width=»100%» height=»25″ bgcolor=»#99ADC2><b><font face=»Arial» size=»4″ color=»#CC3300″>Баннер растяжка</font></b></marquee >

Баннер растяжка

size — размер шрифта;
color — цвет шрифта

Остаётся сделать текст в строке кликабельным. Для этого его необходимо просто сделать в виде ссылки. Для примера я сделаю, чтобы при клике на текст можно было попасть на другой сайт

Сделаем ссылку: <a href=»http://thirdsite.ucoz.ru/» title=»полезные скрипты»></a>. Сделанную ссылку вставим в общий код:

Баннер растяжка

В основном это всё. Можно конечно еще добавить некоторых атрибутов, но это уже зависит от ваших потребностей.

Теперь о том куда вставить этот код, что бы он был под шапкой сайта. По логике код надо вставлять где-то в конце кода шапки. В моём случае я вставил код в конце файла header.php Поскольку внизу шапки находится горизонтальное меню, то я вставил код сразу после закрывающего тега </nav>

Статья была полезной?