Воспроизведение мультимедиа

Специальные эффекты

Кроме воспроизведения аудио- и видеофайлов, существуют другие способы создания специальных визуальных эффектов на странице Web и присоединения к внешним источникам информации для контента страницы. Существуют, например, некоторые теги XHTML, которые могут прокручивать текст; другие источники информационного содержимого можно встраивать в страницу или присоединять с удаленных сайтов с помощью специальных сценариев, написанных на языке JavaScript.

Тег <marquee>

(Примечание: Тег marquee не считается допустимым элементом согласно стандартам XHTML 1.1. Он представлен здесь в связи с его сохраняющейся популярностью и поддержкой в браузерах. Страницы Web с прологом XHTML 1.1 будут выполняться правильно, даже хотя они и не будут полностью проходить проверку на правильность.)

Тег <marquee> применяется для автоматической прокрутки текста на экране. Текст можно прокручивать влево, вправо, вверх или вниз в определяемой области прокрутки. Он может использовать шрифт с любыми характеристиками. Следующий тег marquee имеет связанные с ним кнопки, чтобы можно было видеть направления прокрутки. Можно сделать паузу в прокрутке, помещая курсор над областью marquee.

Рис. 9.16. Использование тега <marquee>

Тег <marquee> определяется следующим общим форматом

<marquee
  direction="left|right|up|down"
  loop="n|-1"
  scrollamount="n" ( 6 пикселей по умолчанию)
  scrolldelay="n"  (85 миллисекунд по умолчанию)

    Исключены:

    bgcolor="color""
    height="n"
    width="n"
    hspace="n"
    vspace="n"
>

    Текст для прокрутки

</marquee>

В своей простейшей форме тег может использовать все значения по умолчанию для создания прокручивающегося текста, показанного ниже:

<marquee>Text to Scroll</marquee>

Рис. 9.17. Тег <marquee> по умолчанию

Прокручивающийся текст появляется между открывающим и закрывающим тегами <marquee>. Он двигается влево через всю страницу (или внутри горизонтальных размеров контейнерного тега, содержащего marquee) и изменяет свое положение на 6 пикселей каждые 85 миллисекунд. Он занимает на экране вертикальное пространство, соответствующее размеру букв.

Направление прокрутки можно задавать с помощью атрибута direction. Если определено up (вверх) или down (вниз) и если height (высота) для тега <marquee> не задана, используется значение height по умолчанию, равное примерно 200 пикселей, задающее вертикальную область прокрутки. Marquee в начале этой страницы расширяется по высоте в направлении прокрутки вниз или вверх, так как высота не была определена.

Скорость движения управляется атрибутами scrollamount и scrolldelay. Надо проверить несколько значений настройки этих атрибутов, чтобы создать требуемый эффект прокрутки.

Скорее всего, потребуется некоторое дополнительное оформление прокручивающегося текста. Это можно сделать с помощью свойств стиля, связанных с тегом <marquee>. Кодирование следующего marquee показано ниже.

Рис. 9.18. marquee с оформлением

<div style="text-align:center; background-color:#F0F0F0; padding:5px">
  <marquee direction="left" scrolldelay="50" scrollamount="3"
    style="border:inset 5; padding:5px; width:50%; background-color:#000000;
    color:#FFFFFF; font-family:courier new; font-size:12pt; font-weight:bold"
    onmouseover="this.scrollAmount=0"; onmouseout="this.scrollAmount=3">
      Scrolling Text
  </marquee>
</div>

marquee помещается внутри раздела ( div ), чтобы выровнять его по центру и задать цвет фона, на котором выводится текст. Для marquee задана граница и определен размер в 50% ширины страницы с заданным цветом текста и фона.

Обычно желательно, чтобы пользователи могли делать паузу при прокрутке текста и, тем самым, имели возможность его спокойно прочитать. Это легко сделать, добавляя операторы JavaScript в тег <marquee>. Операторы сценария останавливают прокрутку по событию "указатель мыши над" (свойство scrollAmount задается равным 0) и возобновляют прокрутку по событию "указатель мыши вне" (свойству scrollAmount задается его исходное значение).

Динамический HTML

Хотя это не было подчеркнуто в данном учебнике, но теги XHTML являются программируемыми объектами, которыми можно управлять с помощью процедур JavaScript. Это было продемонстрировано в предыдущих примерах, где обработчики событий добавлялись в теги <img/> и <marquee>, чтобы сделать их реагирующими на действия пользователей с мышью. Связывая процедуры JavaScript с этими и другими тегами, большинство элементов страницы можно сделать реагирующими на события мыши и клавиатуры. Обычно эти события вызывают немедленные изменения в настройках стиля, динамические изменения визуального представления страницы или изменение вывода информации в ответ на запросы пользователя. Такие действия по программированию тегов называют Dynamic HTML (DHTML).

Головоломка ниже является набором изображений GIF, которые запрограммированы для реагирования на события перетаскивания мыши. Фрагмент головоломки надо перетащить на область палитры, чтобы восстановить изображение.

Рис. 9.19. Использование динамического HTML (DHTML) для программирования тегов XHTML

С помощью языка JavaScript можно программировать теги XHTML для создания этих и других типов специальных эффектов на странице Web. Можно также осуществить поиск в Web уже готового кода DHTML, который можно скопировать на страницу Web и модифицировать в соответствии со своими целями. В Web можно найти приложения DHTML для создания меню и методов перемещения, прокрутки текста, визуальных эффектов и слайдшоу, календарей, часов, использования мыши, игр и многих других специальных эффектов. Часто использование этих приложений требует только копирования кода и сценариев с сайта Web и вставки в создаваемую страницу Web.