Статьи о Marquee
Атрибут и значения направления бегущей строки
Трудности перевода
Май 2008 г.
В 1996 году корпорация MicroSoft представила релиз интернет браузера Internet Explorer 3, среди прочих новшеств, а их было немало, разработчики мелкомягкого обозревателя, предложили веб мастерам тег marquee, в контейнере которого, помещённый контент, автоматически скроллируется. Первоначально скроллирование выполнялось только в двух направлениях справа налево и слева направо. Значение направления определяет атрибут direction. C указанным значением left (скроллирование справа налево) определено дефолтным т.е. <marquee direction="left"></marquee> равнозначно отсутствию атрибута <marquee> </marquee>, и во многих случаях в установке атрибута с этим значением нет необходимости.
При необходимости изменить направление на противоположное устанавливается атрибут со значением <marquee direction="right">Непривычная бегущая строка</marquee>:
Мы видим, что направление бегущей строки изменилось, а вот читаемость текста существенно ухудшилась, такое ракообразное скроллирование противоестественно, для большинства языков мира, в том числе русского, привычное нам, написание и чтение слева направо. Но, существуют ряд языков в которых читать и писать принято справа налево. Это группа семитских языков: арабский, фарси, пушту, арамейский, древнееврейский: иврит, современный еврейский: идиш и некоторые другие (всего около 20 языков). Конечно такой способ письма связан не с тем, что арабы и евреи поголовно левши (согласитесь для леворуких писать справа налево было бы гораздо удобнее), нет, процент левшей у этих народов такой же как у европейцев, индусов или китайцев. Версий развития такой манеры письма существует несколько. Например объяснение иудейских и исламских теологов: Бог это Право, всё что от Бога правильное, правое, т.е. и писать необходимо справа, потому, что грамота это божественное знание. Автору более приемлема версия: что семитские языки происходят от финикийского, а финикийский от ещё более древнего шумерского. Шумеры не знали бумаги и писали на сырой глине – знаменитая клинопись, возможно писать на глине было удобнее именно справа налево. Но как бы там ни было на самом деле, но для семитских языков бегущая строка справа налево вполне естественна. В этом мы убеждаемся при просмотре новостных телепрограмм Ближнего Востока, с горячими новостями в бегущей строке, а горячих новостей из этого региона всегда предостаточно. Чаще всего цитируется независимый канал Аль Джазира, на котором обязательно присутствует бегущая строка. Кстати и на официальном сайте Аль Джазира имеется строка новостей, но не бегущая, а выполнена скриптом: побуквенной печати. А вот на египетском новостном портале خبرى دوت كو (Харибд датт кэу - Новостной эксперт) бегущая строка, но с перемещением слева направо. На странице с адресом: http://5bre.com/newsline.php нам предлагают коды виджетов с новостями этого сайта в том числе, имеется вариант с бегущей строкой. Скопируем этот код: <"iframe src="http://5bre.com/700x35-no.php" frameborder="0" scrolling="no" width="100%"></iframe> и вставим исходный код этой статьи:
При желании можно пройти по ссылке указанной во фрейме к php-скрипту, и мы увидим, что бегущая строка создана в jquery, а не marquee. Ну, а если вдруг, по какой нибудь причине веб-верстальщику необходимо создать бегущую строку с арабским текстом, в русскоязычном веб-документе? Всё достаточно просто если кодировка документа задана в Юникоде utf-8. Достаточно зайти на любой онлайн переводчик например: Translate Google. Запишем два слова в левое поле: "бегущая строка", и дадим команду перевести в правом поле на арабский, получим: مبرقة كاتبة, скопируем арабскую вязь и вставим в контейнер бегущей строки <marquee direction="right" lang="ar" dir="rtl">مبرقة كاتبة</marquee>, для выделения поля скроллинга добавим в тэг style="background-color:#0f9;width:600px;":
Итак, получаем бегущую строку на арабском, движущуюся в направлении принятом для этого языка, и в этом случае атрибут направления обязателен, в коде добавлены ещё два атрибута lang="" - указывающий, что в контейнере содержится текстовый контент отличный от языка документа, в нашем примере документ русскоязычный, а в тэге арабский, так как в арабском чтение справа налево, то добавлен dir="rtl" - написание текста справа налево(в случае внедрения европейского языка dir="ltr" слева направо, но это значение дефолтно, т.е. необязательно к записи). На работоспособность, вернее на основную функцию marquee: перемещение контента, эти атрибуты не влияют, и в приведённом примере они не обязательны. Покажем это на примере, повторим действия на Гугле переводчике, но с другим языком правостороннего написания идиш. Вот такой текст мы увидим в поле перевода טיקער, копируем и вставляем в marquee: <marquee direction="right">טיקער</marquee>, без lang и dir:
В большинстве современных браузеров разницы Вы не заметите. Но, автор предлагает посмотреть страничку арабоязычного форума, на которой, описывается как, сделать marquee в HTML, TahaSoft. Вы обязательно почувствуете себя на этой странице, как бы не в своей тарелке, и вовсе не потому, что текст на арабском языке, а потому, что скроллбар (полоса прокрутки), не справа, как мы привыкли, а слева. Как это сделано? Смотрим исходный код страницы, вторую строку после доктипа: <html xmlns="http://www.w3.org/1999/xhtml" dir="rtl" lang="ar" id="vbulletin_html">, видим атрибут dir="rtl", именно он, и указал браузеру установить скроллбар на странице слева, а текст сместить вправо. Обратим внимание, что скроллбары в div (division) на этой страницы с правой стороны (привычно для нас). Ну, а мы сделаем для нашей страницы наоборот: скролл div с левой стороны. Создадим div и определим для него класс (скрипт CSS), который назовём rd, #rd{width:600px; height:80px; background-color:#00FFFF; overflow:scroll;}, главное это то, что мы установим для этого леера обязательный скроллбар overflow:scroll;, а <DIV> установим атрибут направления: <div dir="rtl" class="rd">, и поместим в этот контейнер два параграфа, первый: <p>Строка первого параграфа</p>, второй: <p dir="ltr">Строка второго параграфа</p>, и две бегущие строки, первая бегущая <marquee>Первая бегущая</marquee>, вторая <marquee dir="ltr">Вторая бегущая</marquee>:, и что бы их посмотреть, используем скроллбар (прокрутку) с левой стороны:
Строка первого параграфа Строка второго параграфа |
Строка в первом параграфе унаследовала направление леера <DIV>, а во втором параграфе, что бы получить привычное написание установлен dir="ltr", для marquee, этот атрибут в большинстве браузеров не внесёт никаких изменений, обе строки движутся в одном направлении. Но в браузерах с движком Chromium (Google Chrome, Opera 15, Yandex и т.п.), dir интерпретируется, как direction, и мы видим встречное движение в бегущих строках.
Тэг lang используется для отображения графических особенностей внедрённого языка, например правил пунктуации, действует он во всех html-контейнерах, которые содержать текст, в том числе и marquee, но для демонстрации действия этого атрибута удобен тег устанавливающий кавычки <q>text</q> («text»>). Для примера возьмём испанский язык, в вопросительных предложениях испанского языка, записывают два вопросительных знака, в конце предложения обычный знак вопроса, как в русском языке, а вот перед предложением, знак вопроса перевёрнутый. Вопрос: Что это?, на испанском выглядит так: ¿Qué es esto?. Ну и как это сделать если на клавиатуре отсутствует подобный знак. Применяем тег кавычек, а в качестве кавычек используем знаки вопросов. Создаем CSS-скрипт стиля тега <q> кавычек: <style type="text/css"> q:lang(es){quotes:"\00BF" "\003F";}</style>, значения 00BF - шестнадцатеричный код перевёрнутого знака вопроса, и соответственно 003F - обычный вопросительный знак, (коды можно посмотреть в таблице символов, например в Word'e через функцию Вставка), записываем код в голову документа (head), и помещаем текст в кавычках в контейнер marquee, без атрибута направления, т.е. разрешаем дефолтное направление: <marquee><q lang="es">Qué es esto</q></marquee>:
Получаем нужный нам результат - вопросительное предложение, по правилам испанской пунктуации. Но, эти действия с CSS, несколько заморочены. При небольшом объёме иноязычного текста в бегущей строке, удобнее использовать коды символов Юникода. Эти коды очень помогут в случае когда, документ создаётся в локализованной кодировке. Повторяем вопрос, но уже с использованием Юникода: ¿Que es esto? вставляем в текст и получаем: ¿Que es esto? (так как обычный знак вопроса проще ввести с клавиатуры, можно записать и вот так: ¿Que es esto?). Для некоторых символов существуют мнемонические коды - алиасы. Вот код с алиасом перевёрнутого вопросительного знака: ¿Que es esto?. В конце концов можно и весь текст вопроса записать символами Юникода: ¿Qué es esto? - а в результате всё тот же вопрос по-испански (и с надстрочным знаком над буквой e в первом слове): ¿Qué es esto?. Юникодом можно записать любой текст, на любом языке мира, в том числе и на русском, английском, мадагаскарском, китайском. В таблице Юникода более миллиона знаков, и не только буквы всех алфавитов, но и множество других знаков: математических символов, геометрических фигур, смайликов, зодиакальных глифов, нотных знаков, карточных мастей, шахматных фигур, звёзды, стрелки и ещё множество различных графических символов, даже такие как: череп с костями, серп и молот, зонтик, телефон, снеговик. Полные таблицы юникодов, есть почти во всех Linux-дистрибьютивах. В Интернете несложно найти сайты с таблицами наиболее популярных символов, например автор использовал для этой статьи сайт tehnopost.info
Думаю, что мой уважаемый читатель догадался, почему автор уделил внимание кодам Юникода. Потому, что в бегущей строке можно использовать не только текст, но и знаки, а так как это не всегда текст, то направление скроллирования не влияет на восприятие контента. Возьмём для примера символы основных мировых валют (евро, доллар, фунт стерлингов, йена):
Такая строка, вполне уместна как, динамический декор на сайте обмена валют, интернет-магазине, брокерской фирме и т.п.. Направление движения слева направо, не мешает зрителю понять смысл этих знаков. Знаки валюты это образный посыл посетителю: эта страница связана с денежными операциями, торговлей, покупкой, продажей, обменом, кредитом и т.д.. Воздействие создаваемого образа зависит, уже от креативности веб-дизайнера. Автор этой статьи, не замахиваясь на серьёзные дизайнерские изыски, всё таки позволит себе, чуть-чуть покреативить. Итак сделаем две строки с карточными мастями, которые поместим в табличные ячейки в левой marquee смещает масти по дефолту: справа налево, а в правой с атрибутом direction="right" слева направо, теперь смотрим созданный образ.
Свойства таблицы в этом примере: <table width="200" border="0" cellspacing="0" cellpadding="0" bgcolor="#33CC66" align="center"> - границы таблицы скрыты (border="0"), фон зелёный для ассоциации с ломберным столиком (bgcolor="#33CC66"). По умолчанию цвет текста чёрный, по этой причине цвет черви и бубны через тег <big> установлен красным: <big style="color:#ff0">♦</big>(бубны), а черные масти просто помещены в тег big <big>♠</big> (пики) и не более того. И... почему собственно, этот простенький сюжет, может быть неуместен на сайте посвящённом карточным играм. Но, как всегда есть одно, но.... Не все символы Юникода интерпретируются различными версиями браузеров. Значки валют и карточные масти, воспроизводят все современные браузеры, а вот угловые скобки например, не отображаются в Internet Explorer 8, они заменяются на квадратики, что означает отсутствие вызываемого символа, в некоторых обозревателях, если символ не найден, вместо квадратов выводиться знаки вопроса. А вот в Internet Explorer 10, угловые скобки отображаются:
В этом примере неважно, что увидит зритель, скобки или квадратики, при движении во встречном направлении фигур, возникает некий визуальный эффект, который в определённом контексте документа, способен стать графическим образом дополняющий дизайн сайта. Возможно следующий пример, в некоторых обозревателях, тоже получится с квадратиками, но если браузер воспроизводит символы шахматных фигур, то пользователь этого браузера, увидит четырёх коней в двух параллельных marquee с разнонаправленным перемещением, в бекграунд (фон), для стилизации, записаны картинки с чёрно-белыми шахматными клетками:
Так, что устоявшееся в русском языке выражение: "бегущая строка", явно не подходит к блокам с мастями и скобками (квадратами), шахматными конями. Бегущая - ассоциируется с быстрым движением, но атрибуты marquee, позволяют сделать строку медленной - ползущей, очень быстрой - летящей. Да, и собственно "строка" то же, не совсем уж верное слово в этих примерах. Вариантов обозвать этот эффект, очень много: движущийся текст, плывущие буквы, перемещающиеся слова, анимированное письмо и т.д. и т.п. И в других языках для этого эффекта существует множество синонимов, в том же английском это и ticker, и marquee, и flying text, и electronic moving text, и scrolling. Забавно бывает поиграть с переводчиком Google, например перевести обратно с идиш טיקער, на русский... И, шо Ви себе думаете, смастыриться с того: туда-сюда? Таки, это будет: БОЛЕЕ ТОЛСТЫЕ???. Вот ведь они, какие трудности перевода. И всё таки запишем эту комбинацию символами Юникода (прим: в идише и иврите один и тот же алфавит), сделаем это выражение вопросительным (возможно это и недопустимо в идиш, но мы же не лингвистикой тут занимаемся), т.е. установим знак вопроса, даже три знака для наглядности, но это будет арабский знак вопроса (да уж, есть и такой) - ؟: <marquee direction="right" lang="id">טיקעד؟؟؟</marquee>:
Обратим внимание, что знаки вопроса в коде записаны справа, а в бегущей строке слева, это определено тем, что эта страница в формате utf-8, порядок букв изменён автоматически. Но если документ в другом формате текст более объёмный, при использовании юникодов с правописными текстами, вполне можно запутаться при заполнении контейнера. Для облегчения задачи используем модуль СSS: unicode-bidi, a для наглядности сделаем пример на русском языке. Создаем класс: .obr{unicode-bidi:bidi-override;direction:rtl;} и напишем такой код <marquee width="150" class="obr" direction="right">Бегущая строка</marquee>, ну а для создания визуального зеркального эффекта сделаем обычную бегущую строку, которую направим в противоположную сторону, и наблюдаем результат.
Конечно можно набрать такой обратный текст и с клавиатуры, но даже в родном языке такая обратная запись вызывает затруднение, не говоря уже об еврейском или арабском. Но верстальщику надо быть внимательным при выполнении вставок правосторонних текстов и использование unicode-bidi, если документ уже определён с utf-8 текст может быть развёрнут дважды, и не владея языком немудрено просмотреть подобный двойной перевёртыш.
Кстати в фильтрах CSS от Microsoft, имеются средства сделать полностью зеркальный текст: filter:fliph - поворот по горизонтали и filter:flipv - поворот по вертикали. Cделаем один контейнер с таким стилем <marquee style="filter:fliph;">, этот фильтр зеркально разворачивает текст, изменяет направление смещения, аналогично direction.
Но, работает это при разрешении выполнения Active X, и только в IExplorer и браузерах на основе его движка: Avant, Maxthon, Deepnet, Green, Slim и т.п.: Имеется ещё и такой фильтр filter:progid:DXImageTransform.Microsoft.Matrix(M22=-1, SizingMethod='auto expand'); разворот текста на 180°, вертикальное зеркалирование (для горизонтального зеркалирования, как в предыдущем примере: M11=-1), расположим строки одну над другой, в нижней установим направление слева направо и вставим этот длиннющий код фильтра в атрибут стиля:
Но, в популярных FireFox, Opera, Google Chrome, Safari, Android, да и в Internet Explorer с запретом Active X, мы увидим две одинаковые строки, и не более того. А ведь было бы неплохо использовать многочисленные фильтры от Microsoft, для украшательства контента, как текстового, так и графического. Например фильтр устанавливающий тень: filter:progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=45);:
В СSS2 имеется модуль text-shadow, так же создающий тени в контенте например: style="text-shadow: 1px 1px 2px black, 0 0 2px red; color:#33CC33;". Создадим строку с указанным стилем, но и это срабатывает далеко не во всех веб-обозревателях, конечно самые современные Огнелисы, Сафари, Оперы, Андроиды, Хромы, даже Internet Explorer 10 это исполняют. И в CSS имеются и другие модули, но либо уступают фильтрам MSCSS например в эффекте зеркалирования, либо вообще не выполняются, ну или скажем так, пока не исполняются. Свои фирменные фильтры стилей есть и у Mozilla, Opera, WebKit, и действуют они только в браузерах самих производителей, хотя лучше было бы, когда все браузеры унифицированно принимают модули CSS3: и верстальщик не мучился бы вопросом, увидит пользователь, красные тени, или нет, под этими зелёными буковками?:
Слова плывущие в небо
В версии Internet Explorer 4, разработчики из MicroSoft добавили в Marquee вертикальное направление перемещение контента, атрибут направления получил ещё два значения: direction="up" - бегущая строка направлена вверх, direction="down" - бегущая строка направлена вниз.
Вертикальный скроллинг вполне привычен, ведь большие по объёму страницы просматриваемых сайтов, мы постоянно скроллируем вверх и вниз. А благодаря marquee, прокрутку контента вполне можно автоматизировать, учитывая то обстоятельство, что в контейнер marquee помещается любой объём контента (можно целую веб страницу, если только в ней не установлены блоки с фиксированной позицией position:absolute; или position:fixed). Всю страницу скроллировать не будем, а для примера сделаем блок в который поместим первый абзац этой статьи. И, что бы облегчить чтение текста, замедлим движение контента атрибутом монтирования scrollamount="1", (прим: значение 1, это смещение отрисовки контента на один пиксель, т.е. минимально возможное значение), и добавим в тэг, возможность останавливать скроллирование, а для этого применим метод onmouseover="this.stop()" onmouseout="this.start()" останов и запуск движения бегущей строки, при наведении мышки в поле блока. Такой же скрипт кстати, применён и в новостном информере Харибд датт кэу. Это самый известный метод стартстопа, но не самый лучший. Пользователь не знает о заложенной в блок функции останова. В статье Старт и стоп в Marquee описывается, как организовать останов скроллинга в удобной для пользователя форме.
В 1996 году корпорация MicroSoft представила релиз интернет браузера Internet Explorer 3, среди прочих новшеств, а их было немало, разработчики предложили веб мастерам тег marquee html, в котором помещённый контент, автоматически скроллируется. Первоначально скроллирование выполнялось только в двух направлениях справа налево и слева направо. Значение направления определяет атрибут direction. C указанным значением left (скроллирование справа налево) определено дефолтным т.е. <marquee direction="left"></marquee> равнозначно отсутствию атрибута <marquee> </marquee>, и во многих случаях в установке атрибута с этим значением нет необходимости.
При необходимости изменить направление на противоположное устанавливается атрибут со значением <marquee direction="right">Непривычная бегущая строка</marquee>:
Забавы ради, автор оставил, два первых примера c бегущей строкой. В Internet Explorer любой версии эти примеры отобразятся. Но, это уже будет не движение вправо, влево. получиться некая сложная траектория (подробно о вложении тэгов бегущей строки можно посмотреть в статье Поведение Marquee в главе "Кенгуру"). Но, для большинства браузеров, это конечно неприемлемо, даже недопустимо, вложение тэгов <marquee> один в другой. Поэтому отобразится, эти строки могут, как угодно, или вообще не отобразятся, автор затрудняется сказать, как это будет выглядеть в Android, Firefox, Safari или Хроме.
Что касается внедрения иноязычных текстов, то вертикальное письмо, сверху вниз, существует во многих азиатских языках дальневосточной группы: японский, монгольский, китайский, корейский и некоторые другие. Вообще то, в азиатских языках используется и правосторонние написание, как и в европейских и это закреплено в правилах. В европейских языках тоже иногда используется вертикальное написание, но в отличии азиатских, грамматических правил не существует, и вертикальное написание принято не к текстам, а к словам, обычно в рекламных целях. Автор уверен, что моим уважаемым читателям приходилось сталкиваться с такими рекламными надписями на зданиях, типа: гостиница, кафе, магазин, гастроном, булочная, ресторан, hotel, MacDonalds и т.п.. Вполне приемлемо подобное рекламное написание и на сайтах, например в тех же интернет магазинах, аукционах. Сделаем такую бегущую строку с вертикальным направлением вверх (direction="up"), а после каждой буквы установим тег перевода строки <br>, т.е. в каждой строке будет по одной букве, и обязательно укажем высоту блока скроллирования, это можно сделать и атрибутом height="N" или установкой стиля style="height:Npx", где значение N количество пикселей (использование стиля удобнее, так как можно задать значение высоты и процентах, и в миллиметрах, или других единицах:<marquee style="width:16px;height:100px;background-color:#0f9;" direction="up">Б<br />е<br />г<br />у<br />щ<br />а<br />я<br /><br />в<br />в<br />е<br />р<br />х</marquee>, и стилевое указание более кроссбраузерно:
Гораздо естественнее в вертикальной строке не европейские слова, а иероглифы. Давайте снова зайдём в Переводчик Google, и попросим его перевести с русского на японский вот такую фразу: слова плывущие в небо. Получаем результат, вместо пяти русских слов, семь японских иероглифов: 空 に 浮 か ぶ 言 葉, (кстати в отличии от идиш, при обратном переводе смысл не теряется, только фраза будет чуть короче: слова в небо). Копируем иероглифы, помещаем в бегущую строку с указанием смещения контента вертикально вверх, ставим после каждого знака перелом строки, ну и для большей японости, делаем жёлтый бэкграунд:
Но, с иероглифами в отличии от арабской вязи, часто возникают проблемы, даже если кодировка utf-8, далеко не все браузеры смогут отобразить иероглифы, вполне может быть и такое Opera 15 в Windows 7, отобразит квадраты, но та же пятнадцатая Опера портированная под Linux, в Ubuntu 8 прекрасно отобразит текст на японском. Использование Юникода, не выход, особенно если Вы имеете дело с китайским языком. В отличии от арабского алфавита в котором 28 буквы, или еврейского в котором всего 23, иероглифы - это смысловые конструкции, иногда целые слова или словосочетания, поэтому иероглифов существует несколько сотен. Даже небольшой по объёму текст при хорошем знании китайского языка, весьма затруднительно набрать спецсимволами, и не факт, что браузеры его отобразит. Выход из подобного положения, это графический файл (картинка) с изображением текста. Сделать такой файл несложно: например любой программой захвата изображения экрана (если это скриншот, то вырезаем из него необходимый фрагмент с текстом). Создать код бегущей с картинкой внутри контейнера очень просто: <marquee direction="up" width="22" height="120" scrollamount="2"> <img src="/img/nippon.gif" alt="" /></marquee>, где <img src="/img/nippon.gif" alt="" /> тег вызова картинки с японским текстом nippon.gif, размещённого в папке img, и alt="" - атрибут альтернативного текста, для текстовых браузеров или при запрете отображения графики, обычно в это поле записывают текст о содержании картинки, атрибут является обязательным при создании валидного кода html, но для соблюдения валидности достаточно вставить пустой атрибут как в нашем примере. А если учитывать, что marquee в принципе невалиден, то атрибут альтернативного текста вообще можно не записывать.
Хорошо, что времена когда пользователи отключали выгрузку картинок для экономии трафика, уже в прошлом. А так, как все современные браузеры одинаково отображают графический контент, то этот пример одинаково выглядит в любом типе и версии, веб-обозревателя. Кстати картинки чередующиеся с текстом, мы видим и всё в той же бегущей строке с новостями египетского сайта. Но автор советует обратить внимание, что перед тэгом картинки записан спецсимвол пробела. Дело в том, что браузерах IE старших версий, при указании границ поля скроллирования, графический файл без пробела не уходит за границу поля, а исчезает как только её достигает, в браузерах других производителей этот эффект отсутствует.
Если вернуться к примерам с зеркально отображаемыми строками, которые мы делали через CSS, заведомо зная что не все браузеры их отобразят, с графикой становиться простой задачей. Сделать картинку с отображением очень просто даже в штатном Paint. В одну строку поместим картинку с обычным отображением текста, в другую с зеркальным (для этих примеров желательно использовать графику с прозрачным фоном).
Вариант №1 (зеркальность по горизонтали)
Вариант №2 (зеркальность по вертикали)
В модулях CSS третьего уровня (lavel 3), предлагается модуль writing-mode определяющий направление написание текста, для разных типов языков, для азиатских вертикальных, используется значение: tb-rl. Этот модуль до сих пор не поддерживается основными браузерами Opera, Safari, Google Chrome, Firefox, а вот Internet Explorer интерпретирует этот модуль уже с 6-й версии, хотя это не фильтр от MS и естественно не требует Active X. И если в блоковый тэге записать стиль style="writing-mode:tb-rl;", то Ишачок, развернёт контент на 90° по часовой стрелке, <marquee style="writing-mode:tb-rl;" scrollamount="3" width="20" height="100">Бегущая строка</marquee>, атрибут направления не указан, т.е. дефолтное справа налево, но с учётом углового поворота, строка будет двигаться вверх, а для перемещения вниз страницы устанавливаем direction="right", это мы видим в двух левых примерах, а в два правых установим атрибуты направления вертикального скроллинга и посмотрим, что из этого получится:
Но, автор вынужден повторить, работает это только в IE6 и более младших версиях, хотя учитывая с какой невероятной частотой выходят релизы Chrome и Firefox, и официальное объявление о переходе Opera на движок WebKit, не исключено, что этот модуль будет поддерживаться названными браузерами в ближайшее время, и уважаемому читателю нет необходимости для просмотра этого примера, закрывать свой любимый быстрый веб-обозреватель и запускать тормозного Ишачка, но если Вы наблюдаете короткое поле скроллинга (ведь width="30") в котором мелькают буквы, потому, что длина слов шире поля скроллирования, это означает: браузер не интерпретирует данный модуль CSS. Но картинки помогут нам сделать те же эффекты, и даже более того, что сделано через каскадную таблицу стилей, ведь изображение картинки можно развернуть как нам угодно.
Итак, как используется графика, пишем значения уже наоборот, теперь установлены значения up и down, а для следующих примеров right и left:
Реверс
Человеческая фантазия не имеет границ, то вполне возможно у дизайнера возникнет желание создать сюжет с изменением направления движения контента пользователем. Такие действия возможны в теге marquee при использовании методов активных скриптов, воздействия на объект, (DOM - объектная модель документа). В предлагаемом ниже примере: направления скроллинга, пользователь может изменит кликом на правую или левую стрелку:
<<>>
Аналогично мы можем создать изменения скроллинга в вертикальном направлении, ну а контентом послужит код предыдущего примера:
| ∧ ∨ |
В технике обратное движение называют реверсом, в нашем случае это реверс в направлении движения контента. Событие onclick="document.getElementById('levo-pravo').setAttribute('direction','right') - в данном примере это один клик, условно говоря воздействует на объект с именем levo-pravo, а с таким именем идентифицируется контейнер marquee, и в этом случае 'direction','right' становятся не атрибутом и значением, а значением метода установки атрибута setAttribute. Клик в поле метода со значением 'direction','right' указывает интерпретатору начать отрисовку контента слева направо, а клик в поле со значением 'direction','left', соответственно изменяет направление справа налево, т.е. по дефолту. Для вертикального реверса мы просто используем up и down. Думаю, что мой уважаемый Читатель, наверно уже догадался: следующим примером будет изменение направления во всех четырёх направлениях, соответственно и кнопок будет четыре, кнопки исполним в виде стрелок:
↑ |
в начало статьи
Текст в Marquee Графика в Marquee Графика в Marquee Невалидность Marquee
