Главная » Все про HTML » Как сделать бегущую строку и бегущее изображение в HTML. Урок №12

Как сделать бегущую строку и бегущее изображение в HTML. Урок №12

2014-02-05 / Вр:22:45 / просмотров: 22936

Создать бегущую строку на сайте – проще простого.
Используют бегущую строку для различных целей, например, для рекламного сообщения, новостей, акций, объявлений и т.д.

Для создания бегущей строки используют тег:

Пример:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<META http-equiv="content-type" content="text/html; charset=windows-1251">
<title>Бегущая строка</title>
</head>
<body>
<marquee>Бегущая строка</marquee>
</body>
</html>

Атрибуты для бегущей строки

width="..." - ширина бегущей строки (в пикселях или процентах).
Пример:
<marquee width="500px">Бегущая строка</marquee>

height="..." - высота бегущей строки (в пикселях или процентах).
Пример:
<marquee height ="500px">Бегущая строка</marquee>

bgcolor="..." - цвет фона бегущей строки (цвет задается кодом или словом).
Пример:
<marquee bgcolor ="#cc0000">Бегущая строка</marquee>

behavior="..." поведение бегущей строки. Имеет такие значения:

scroll - обычная прокрутка (по умолчанию);

slide – строка начинает свой путь из одного края и останавливается у другого;

alternate – строка будет двигаться от края до края
Пример:
<marquee behavior=" alternate " >Бегущая строка</marquee>

direction="..." - направление бегущей строки. Имеет такие значения:

left – движение текста влево (по умолчанию);

right – движение текста вправо;

up – движение текста снизу вверх;

down - движение текста сверху вниз
Пример:
<marquee direction="down" >Бегущая строка</marquee>

scrollamount="..." - скорость движения строки (в пикселях).
Пример:
<marquee scrollamount="10">Бегущая строка</marquee>

scrolldelay="..." - временной интервал между шагами ( в миллисекундах).
Пример:
<marquee scrolldelay="300" >Бегущая строка</marquee>

loop="..." – сколько раз пробежит бегущая строка. Если в значение поставить «0»(По умолчанию), бегущая срока будет прокручивать текст бесконечное количество раз, если в значение поставить «2», тогда текст прокрутится 2 раза.
Пример:
<marquee loop="2" >Бегущая строка</marquee>

hspace="..." – отступ от левого и правого края бегущей строки (в пикселях).
Пример:
<marquee hspace="300" >Бегущая строка</marquee>

Если все собрать вместе, код бегущей строки в HTML будет выглядеть вот так:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<META http-equiv="content-type" content="text/html; charset=windows-1251">
<title>Бегущая строка</title>
</head>
<body>
<marquee bgcolor ="#ccc" behavior="alternate" direction="right" scrollamount="30" loop="5" hspace="300">Бегущая строка</marquee>
</body>
</html>

[пример]

Бегущее изображение

Так как перемещали текст в бегущей строке, так можно переместить и изображение.

Достаточно между тегами <marquee></marquee> вставить картинку:

<marquee><img src="/images/kolobok.png"></marquee>

Пример:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<META http-equiv="content-type" content="text/html; charset=windows-1251">
<title>Бегущая строка</title>
</head>
<body>
<marquee bgcolor ="#ccc" behavior="alternate" direction="right" scrollamount="30" loop="5" hspace="300">
<img src="/images/kolobok.png">
</marquee>
</body>
</html>

[пример]

Дополнение

В бегущую строку можно установить текст со ссылкой. Для этого нужно прописать следующий код в HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<META http-equiv="content-type" content="text/html; charset=windows-1251">
<title>Бегущая строка</title>
</head>
<body>
<marquee bgcolor ="#ccc" behavior="alternate" direction="right" scrollamount="30" loop="2" hspace="300">Бегущая строка на блоге <a href="/">BlogGood.ru</a></marquee>
</body>
</html>

[пример]

Вот и разобрались с бегущей строкой в HTML-документе.