Формы в Marquee. Скроллирование html форм

Формы в Marquee

Атрибуты Marquee Текст в Marquee Графика в Marquee Непрерывная бегущая строка

Скроллирование html форм в тэге marquee

Февраль 2009 г.

Тэг <marquee> используется для создания бегущей строки (прокрутка текста) или скроллирования графических файлов. Но этот тэг позволяет скроллировать практически все формы гипертекстовой разметки. В подавляющем большенстве случаев, прокрутка html-форм не имеет практического смысла, поэтому нижеприведённые варианты рассматриваются, только, как примеры возможностей, тэга <marquee>.
Для первого примера возьмём статичный декоротивный элемент "горизонтальная линия" создаваемый тэгом <HR>


Черта над этой строкой создана с атрибутами:<hr align="center" width="300">, где align="center"-местополжение по-центру, а width="300"-ширина черты (длина) в пикселях. Поместим эту черту в тэг marquee, но без align, он необходим при статичном размещении, впрочем наличие этого атрибута не помешает скроллированию, просто лишний код.

<marquee><hr width="300"></marquee>

Кстати тэг горизонтальной черты имеет множество атрибутов для создания различных видов, цвет, высоту (толщину), форму (выпуклость, гавировку, прерывание) и многое другое, в том числе и с помощью таблицы стилей. Например:
<hr color="red" width="50" style="height:50;" />
где color="red"-цвет, style="height:50;"-высота (ширина), цвет можно было задать и в стиле (style="height:50;color:red;", эта конструкция более правильная, но далеко не все браузеры выполнят её), вставим в MARQUEE и получим скроллирование красного квадрата.


Впрочем по большому счёту, квадрат получиться, только в IE, а в Firefox или Opera это будет короткая черта, (в Opera серого цвета). HTML не имеет специального тэга для создания вертикальной черты (т.е. <VR> не существует). Конечно для Internet Explorer можно создать вертикальную из <HR>: <hr color="#000000" width="3" style="height:50;"> (прим: в IE8 это уже не воспроизводится)


Для создания вертикальных линий, на сайтах посвящённых веб-дизайну, рекомендуют использовать контейнер Layer, так как в нём через таблицу стилей можно задавать вид для каждой из сторон рамки layer'а. Создадим стиль для "лежака" который назовём <div id="lezhak">:

#lezhak { width: 200px; height: 60px; border-bottom-style: dotted; border-bottom-color: #FF0000; border-left-style: groove; border-right-style: dashed; border-right-width: 5px; border-right-color: #3300FF; border-top-style: double; border-top-color: #00FF00; }

И все эти декаративности прекрасно воспроизводяться в современных графических браузерах. Для помещения в наш Marquee, создадим ещё один леер, и установим стиль рамки, только для двух сторон (сделаем уголок)<marquee><div id="ugolok"></div>&</marquee>

#ugolok {width:40px; height:40px; border-left-style:ridge; border-left-color:#FF0000; border-top-style:ridge; border-top-color:#FF0000;}

Уголок это всего один вариант, благодаря CSS вариантов может быть огромное количество.
Сделаем вариант: две параллельные вертикальные.

Layer перемещается с любым контентом, в том числе и с самой бегущей строкой. Делаем такой layer :

<div id="lezhak2"></div> / #lezhak2 {width: 350px; height: 60px; border: #000000; border-style: solid;}

<marquee><div id="lezhak2" align="center"> Layer с бегущей строкой в тэге<marquee&gtMARQUEE</marquee></div></marquee>

Layer с бегущей строкой в тэгеMARQUEE

Правда в браузерах от "Mozilla", скроллинг внутри лежака может не воспроизводиться.
Но надо отметить, что прокрутка лежака, возможна, только без указания для него абсолютного положения в html -документе. #div {z-index:N;position:absolute;left:Ypx;top:Xpx;} - с такими параметрами лежак не прокручивается так как left:Ypx; - абсолютное положение леера относительно левого края страницы документа, top:Xpx; -абсолютное положение леера относительно верхнего края страницы, z-index:N; - порядковый номер блока созданного леером.

Табличная ячейка тоже скроллируестя и также имеет декаративный элемент border (рамка). Сделаем такую таблицу и поместим её в marquee:

<marquee><table width="250" border="3"> <tr> <td>Таблица с бегущей строкой в тэге<marquee> MARQUEE </marquee> </td> </tr> </table></marquee>

Таблица с бегущей строкой в тэгеMARQUEE

В таблице, в отличии от леера, внутренний скроллинг будет воспроизводиться во всех браузерах, в том числе и в Firefox'е. Но вариантов оформления рамки несколько меньше чем в леере, но всё равно их достаточно много и они воспроизводятся практически во всех графических браузерах.

Блогодоря атрибута style оформление можно устанавливать в во всех управляющих тегах: параграф <p></p>, заголовок <H>, блок <pre>, слой <layer>, лейбл <label> и т.д. образующие прямоугольные блоки в HTML документах.

Параграф:

<marquee><p style="background:#99ff00;border:#ff0000;border-style:groove;">параграф (¶<p>) с CSS расширением </p></marquee>

параграф (¶<p>) с CSS расширением

Заголовок:

<marquee bgcolor=" #00ff00" >
<h3 style=" width:400;
background:#99ff00;
border-bottom:#33ccff;
border-bottom-style: double; ">
Декаративный заголовок <H>
</h3> </marquee>

Декаративный заголовок <H>

Блок кода:

<marquee><pre style="width:350px;background:#99FFFF;border:#333333; border-style:double;"><marquee bgcolor=" #00ff00"> <h3 style=" width:400; background:#99ff00;
border-bottom:#33ccff; border-bottom-style: double;"> Декаративный заголовок <H> </h3> </marquee></pre></marquee>
<marquee bgcolor=" #00ff00">
<h3 style=" width:400;
background:#99ff00;
border-bottom:#33ccff;
border-bottom-style: double;">
Декаративный заголовок <H>
</h3> </marquee>

Декаративными элементами могут выступать знаки созданные спецсимволами, например круглый маркёр (&bull;)

<marquee><!-- N количество &bull;--></maqruee>

•••••••••••••••••••••••••••••••••••••••••••••

А так как спецсимволов много и их можно изменять с помощью таблицы стилей, вариантов становиться бесчисленно.(&bull;&loz;)

•◊•◊•◊•◊•◊•◊•◊•◊•◊•◊•◊•

Активные элементы в тэге MARQUEE.

Если декаративные элементы, возможно допустимы в скроллинге, та активные веб элементы, прокручивать не имеет смысла, но мы рассмотрим эти варианты "чиста из любапытсва". наример такой элемент как кнопка.

<marquee scrollamount="2"> <input type="button" value="HTML-button" /></marquee>

Еще два типа кнопок. Это радио-кнопка и чек-бокс. Для прокрутки мы создадим их с минимальным количеством атрибутов. Можно установить "флажки" в эти кнопки, но без активации, что-бы удобно было устанавливать "флажки" скорость скроллинга замедлена scrollamount="1"

<marquee scrollamount="1" bgcolor="#33ff00">
<input type="radio" value="" />
&nbsp;&nbsp;&nbsp;&nbsp;
<input type="checkbox" value="" />
</marquee>

Продолжим любопытствовать и засунем в бегущую строку ещё один популярный элемент: селектор (меню), для разнообразия установим направление скроллинга (слева направо) атрибутом direction="right". Интересно понаблюдать поведение открывшегося меню. В Мозиле оно "оторвётся", а в Опере будет скроллироваться вместе с формой.

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

в интернете

Если записать вопрос в строке запроса (запись можно вести в любой фазе скроллинга), и кликнуть кнопку "апорт!", то мы получим вызов всплывающего окна со страницей результата поиска Апортом.
Поисковые формы бесплатно предлагают почти все поисковые системы. Форма Апорта, замечательна тем, что видимые элементы (кнопка, поле записи) выводятся с использованием CSS.
Обычно коды, предлагаются в так, как называемых <textarea>. Вставим код поисковой формы Апорта и заодно подставим <textarea> в marquee и убедимся, в том, что и этот элемент скроллируется.

<marquee scrollamount="2" onmouseover="this.stop()" onmouseout="this.start()"> <textarea cols="50" rows="6"><!--Код поисковой формы Апорта--></textarea></marquee>

Скроллирование внедряемых форм

Скроллировать можно и внедряемые объекты, воспроизведение которых не поддерживается браузерами и для их просмотра необходимы дополнительные приложения (plug in), например Flash кнопку, но она будет отображаться только при наличии интегрированного в браузер проигрывателя флешей. При отсутствии флеш-плеера на странице будет "пустышка".

<marquee scrollamount="2">
<object type="application/x-shockwave-flash" data="/flash/button1.swf" width="107" height="18">
<param name="movie" value="/flash/button1.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#e0edf6" />
</object>
</marquee>

Flash- кнопка тоже может содержать гиперссылку.
Для примера установим в скроллинг три флеш информера с сервера GisMeteo выполненых в размер кнопок 88x31, и сообщающих о погоде в городах Витебск, Одесса, Владимир. А для того что-бы их удобно было активизировать добавим в marquee скрипт останова скролирования наведением курсора на поле пробега.

<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="3">
<!--Начало кода внедрения информера для Витебска-->
<object type="application/x-shockwave-flash" data="http://img.gismeteo.ru/flash/fw88x31.swf?index=26666"
width="88" height="31">
<param name="movie"
value="http://img.gismeteo.ru/flash/fw88x31.swf?index=26666" />
<param name="menu" value="false" />
<param name="FlashVars" value="city=26666" />
<param name="quality" value="high" />
<param name="menu" value="false" />
</object>
<!--Конец кода внедрения информера для Витебска-->
<!--Код внедрения информера для Одессы-->
<!--Код внедрения информера для Владимира-->
</marquee>

Эти информеры во первых находятся на другом сервере в отличии флеш кнопки взятой из готового набора и помещёного в папку с картинками сайта А-СТО, Во вторых информация на них ежесуточно обновляется, и после активации клик вызывает страницу GisMeteo с информацией о погоде в указаном городе.


С помощью JavaScript можно выводит грфику, текст и формы, и создают множество различных эффектов, в том числе и эффект бегущей строки. Найти такие скрипты не составляет труда. Зайдём на сайт JavaPortal посвящённого Яве и Ява скриптам в веб-дизайне, на странице http://www.javaportal.ru/javascript/examples/runstr1.html возьмём код скриптов, которые вставим в контейнер marquee, (кстати на этой же странице подробно описывается сам код, очень удобно, для тех кто осваивает JavaScript). Ниже приведённый код имеет, небольшое косметическое отличие от исходного на JavaPortal'e: изменены имена функций и понижен регистр части кода.

<marquee>
<script type="text/javascript">
<!--
function tekst(msg,ctrlwidth)
{
msg = " "+msg
newmsg = msg
while (newmsg.length < ctrlwidth) {newmsg += msg}
document.write ('<form name="Tekst">')
document.write ('<input name="tekst" value= "'+newmsg+'" size= '+ctrlwidth+' />')
document.write ('</form>')
prokrutka()
}
function prokrutka()
{
NowMsg=document.Tekst.tekst.value
NowMsg=NowMsg.substring(1,NowMsg.length)+NowMsg.substring(0,1)
document.Tekst.tekst.value = NowMsg
bannerid=setTimeout("prokrutka()",90)
}
//-->
</script>
<script type="text/javascript">
tekst("Бегущая строка в JavaScript",40)
</script>
</marquee>

Собственно мы видим два скрипта первый выводит на страницу форму <form name="Tekst"> и второй создаёт скроллинг текста в этой форме, ну а мы поместим всё это в тэг marquee. По сути, бегущую строку помещаем в бегущую строку.

Использование JavaScript очень распространён в веб-дизайне. С помощью этой технологии создаётся множество эффектов, для примера возмьём один из самых популярных, так называемый "роловер", когда, при наведении мышкой на картинку она заменяется на другую. Например берут две одинаковых по размеру и содержанию картинки одну с тёмным фоном, её ставят первой, второй ставят со светлым фоном, тем самым создаётся впечатление, что картинка начинает светиться. Много интересных решений получаетcя при использовании анимированных картинок или картинок различных размеров. Но мы для примера возьмём две картинки, баннеры 88х31, сайта отечественного переводчика ПРОМТ.

promtpromt

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

<head>
<script type="text/javascript">
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>

В дискрипторе тела для кодеров, конечно всё понятно, но если воспользоваться переводчиком ПРОМТ, вставив в него onload preload images получится, что-то вроде предварительная загрузка картинки при загрузке, а так как указан путь ко второй картинке, которая должна показываться при наведении курсора, значит она загружается одновременно с первой, кстати путь к графическому файлу может быть и абсолютным, т.е. можно установить его с другого сервера.

<body onload="MM_preloadImages('/img/promt2.gif')">

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

<marquee>
<a href="http://www.promt.ru/" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('roller','','/img/promt2.gif',1)"> <img src="/img/promt1.gif" alt="Промт" id="roller" width="88" height="31" border="0" /></a>
</marquee>
Промт

В коде видна ссылка на индексную страницу сайта ПРОМТ, на котором можно ознакомится с новиками, приобрести этот замечательный переводчик, а так же воспользоваться его онлайн версией. При отключении JavaScrip'a будет показыватся только первая картинка (Компания Промт) без эффекта ролловера и ссылка будет вызывать указаный URL, получиться обычный баннер 88х31.

Наиболее востребованный вариант комбинации MARQUEE и JavaScript, это создание бегущей строки с новостями или курсами валют, с постоянной актуализацией, т.е. с обнавлением, возьмём информер с популярного сайта форекс брокера Pro Finance Service, Inc, на странице Информеры, выбираем вариант информера с бегущей строкой курсов валют, настраиваем параметры строки, копируем код и вставляем в страницу:

Курсы валют:<<>>

Получаем бегущую строку с курсом российского рубля к евро и доллару, и курсы основных валют на forex: японская йена, швейцарский франк, фунт стерлингов и евро. Обратим внимание на то, что в теге marquee, используется метод изменения направления движения валют, можно назвать это реверсом перемещения контента. Для чего необходимо, изменять привычное движение строки, справа налево, на непривычное слева направо, для того что бы, быстро вернуться к показаниям какой либо валютной пары, не дожидаясь её появления при повторном проходе, особенно когда валютных пар много и бегущая строка получается достаточно длинной. Кстати можно использовать не только, уже готовый информер ввиде бегущей строки, но и создать динамичную ленту биржевых или финансовых новостей, поместив код предлагаемых информеров в контейнер, тэга marquee. Впрочем на большинстве новостных сайтов, предлагают готовые информеры трекеры с мировыми новостями, прогнозом погоды или результатами спортивных матчей. Как мы убедились скроллировать в Marquee, можно любой веб-объект, форму, текст, но с одним условием: форма или объект, содержащие контент, не должны иметь абсолютного позиционирования в документе, а именно: указатели стиля не содержат position:absolute или position:fixed.


в начало статьи

Старт и стоп в бегущей строке Апокриф веб-дизайна Бегущая строка JavaScript Marquee в текстовых браузерах Скорость Marquee Направление Marquee

eXTReMe Tracker Карта сайта