Скроллирование 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="#000" width="3" style="height:50;"> (прим: в IE8 это уже не воспроизводится)
Для создания вертикальных линий, на сайтах посвящённых веб-дизайну, рекомендуют использовать контейнер Layer, так как в нём через таблицу стилей можно задавать вид для каждой из сторон рамки layer'а. Создадим стиль для "лежака" который назовём <div id="lezhak">:
#lezhak{width:200px;height:60px;border-bottom-style: dotted;border-bottom-color:#ff0;border-left-style:groove;border-right-style:dashed;border-right-width:5px;border-right-color:#30f;border-top-style:double;border-top-color:#0f0}И все эти декоративности прекрасно воспроизводятся в современных графических браузерах. Для помещения в наш Marquee, создадим ещё один леер, и установим стиль рамки, только для двух сторон (сделаем уголок)<marquee><div id="ugolok"></div>&</marquee>
#ugolok {width:40px; height:40px; border-left-style:ridge;border-left-color:#ff0;border-top-style:ridge;border-top-color:#ff0}
Уголок это всего один вариант, благодаря CSS вариантов может быть огромное количество.
Сделаем вариант: две параллельные вертикальные.
Layer перемещается с любым контентом, в том числе и с самой бегущей строкой. Делаем такой layer :
<div id="lezhak2"></div> / #lezhak2 {width:350px;height:60px;border:#000;border-style:solid}
<marquee><div id="lezhak2"align="center"> Layer с бегущей строкой в тэге<marquee>MARQUEE</marquee></div></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>
В таблице, в отличии от леера, внутренний скроллинг будет воспроизводиться во всех браузерах, в том числе и в Firefox'е. Но вариантов оформления рамки несколько меньше чем в леере, но всё равно их достаточно много и они воспроизводятся практически во всех графических браузерах.
Благодаря атрибута style оформление можно устанавливать в во всех управляющих тегах: параграф <p></p>, заголовок <H>, блок <pre>, слой <layer>, лейбл <label> и т.д. образующие прямоугольные блоки в HTML документах.
Параграф:
<marquee><p style="background:#9f0;border:#ff0;border-style:groove;">параграф (¶<p>) с CSS расширением </p></marquee>Заголовок:
<marquee bgcolor=" #0f0" >
<h3 style=" width:400;
background:#9f0;
border-bottom:#3cf;
border-bottom-style: double; ">
Декоративный заголовок <H>
</h3> </marquee>
Блок кода:
<marquee><pre style="width:350px;background:#99FFFF;border:#333; border-style:double;"><marquee bgcolor=" #0f0"> <h3 style=" width:400; background:#9f0;
border-bottom:#3cf; border-bottom-style: double;"> Декоративный заголовок <H> </h3> </marquee></pre></marquee>Декоративными элементами могут выступать знаки созданные спецсимволами, например круглый маркёр (•)
<marquee><!-- N количество •--></maqruee>
А так как спецсимволов много и их можно изменять с помощью таблицы стилей, вариантов становиться бесчисленно.(•◊)
Активные элементы в тэге MARQUEE.
Если декоративные элементы, возможно допустимы в скроллинге, та активные веб элементы, прокручивать не имеет смысла, но мы рассмотрим эти варианты "чиста из любопытства ". например такой элемент как кнопка.
<marquee scrollamount="2"> <input type="button" value="HTML-button" /></marquee>Еще два типа кнопок. Это радио-кнопка и чек-бокс. Для прокрутки мы создадим их с минимальным количеством атрибутов. Можно установить "флажки" в эти кнопки, но без активации, что-бы удобно было устанавливать "флажки" скорость скроллинга замедлена scrollamount="1"
<marquee scrollamount="1" bgcolor="#3f0">
<input type="radio" value="" />
<input type="checkbox" value="" />
</marquee>Продолжим любопытствовать и засунем в бегущую строку ещё один популярный элемент: селектор (меню), для разнообразия установим направление скроллинга (слева направо) атрибутом direction="right". Интересно понаблюдать поведение открывшегося меню. В Мозиле оно "оторвётся", а в Опере будет скроллироваться вместе с формой.
С помощью 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, сайта отечественного переводчика ПРОМТ.
Программисты предлагают множество вариантов этого эффекта, они же создали немало приложений в которых сделать ролловер просто может любой человек, не искушённый в программировании и в веб-дизайне. Таким приложением воспользовался автор для создания следующего примера. Вся работа свелась к открытию этой страницы, отметить место и указать картинки предварительно установленные в папку /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.
в начало статьи
Старт и стоп в бегущей строке Апокриф веб-дизайна Бегущая строка JavaScript Marquee в текстовых браузерах Скорость Marquee Направление Marquee
