Бегущая строка на web-странице

Информация, представленная на этой странице ориентирована в первую очередь для начинающих web-мастеров.

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

Итак, сегодня на повестке дня новая тема: как сделать бегущую строку на web-странице? Да очень просто! Этот урок будет, наверное, самым лёгким из всех, которые Вы видели на моём сайте. Делается строка при помощи html-тега marquee. Содержимое бегущей строки помещается в контейнер из тегов <marquee></marquee>. Строка создаётся без применения скриптов, поэтому не оказывает влияния на время загрузки страницы. Есть мнение, что бегущая строка может вызывать раздражение у посетителей сайта и в профессиональном web-дизайне применяется не часто.

Вариант №1 (самый простой)

Необходимый материал заключаем в тег marquee:

<marquee>
<a href="//www.test.ru" target="_blank" title="Ваш текст">Ваш текст
</a>
</marquee>

В этом варианте в бегущую строку вставлена самая обычная ссылка, поэтому, сделав щелчок мышью по строке, посетитель вашего сайта попадает на страницу с адресом, заявленным в этой ссылке.

Если скопировать код и вставить на страницу своего сайта, заполнить атрибуты ссылки и содержание контейнера между тегами <a></a>, которое называется элементом привязки, у Вас получится следующее:

Моя любимая поисковая система

В итоге мы видим не что иное, как бегущую ссылку.

Вариант №2

Можно попробовать вариант бегущей строки только лишь с картинкой (баннером) или с картинкой (баннером) вместе с текстом. Для этого нужно вставить html-код картинки (баннера) или сочетания картинки и ссылки внутрь тега marquee:

<marquee>
<a href="//www.site.ru" target="_blank" title="Название">
<img src="img/img.png" border="0" width="XXX" height="XX" 
align="middle" alt="картинка" title="картинка">
Вариант бегущей строки с картинкой и ссылкой</a>
</marquee>

Смотрим результат:

На выставке картин мадам в возрасте желает произвести впечатление на молодого красивого смотрителя музея. -Это, конечно же, Тициан, говорит она ему. -Что вы, мадам, это Моне. - Ну, а это несомненно, Рембрандт... - Нет, мадам, это Ренуар. -Ну а это уж точно Пикассо!!! -Увы, мадам, это зеркало...

Помимо всего, картинка здесь работает как баннер, а бегущая строка так же является ссылкой, при клике на которую Вы переходите на страницу анекдотов.

Вариант №3

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

<marquee width="600" height="80" bgcolor="#ADD8E6" direction="down" 
scrollamount="2">
<a href="//www.test.ru" target="_blank" 
title="Бегущая строка с расширенным набором параметров">
Бегущая строка с расширенным набором параметров</a>
</marquee>

• width="600" - ширина поля бегущей строки в пикселах. Когда мы её не проставляли, строка занимала максимум ширины страницы.
• height="80" - высота поля в пикселах.
• bgcolor="#ADD8E6" - цвет фона.
• direction="down" – направление движения строки, в нашем случае сверху вниз.
  Возможны варианты:
  right – слева направо;
  left – справа налево;
  up – снизу вверх, down – сверху вниз. Если этот атрибут не указан, по умолчанию будет подразумеваться атрибут left.
• scrollamount="2" – определяет скорость строки. Зависимость прямо пропорциональная, чем больше значение, тем больше скорость.