HTML-тег marquee и flash

Уже давно в HTML существует тег marquee. Тег marquee, как правило, используется для создания эффекта бегущей строки на HTML-страницах.

Код HTML:


<marquee>Это бегущая строка!</marquee>

Результат:

Это бегущая строка!

Но далеко не все знают, что с помощью тега marquee можно анимировать не только текст, но и другие элементы веб-страницы (например, изображения). Более того, этой анимацией можно даже управлять.

Но сейчас нас будет интересовать использование тега marquee по отношению к встроенному на html-страницу флеш-ролику. Да, именно, этот тег может применяться и к встроенным флеш-приложениям. Делается это также просто, как и в приведённом выше примере с бегущей строкой.

Код HTML:


<marquee>
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" id="marquee" align="middle" height="100" width="100">
  <param name="movie" value="marquee.swf">
  <param name="quality" value="high">
  <param name="bgcolor" value="#ffffff">
  <param name="play" value="true">
  <param name="loop" value="true">
  <param name="wmode" value="window">
  <param name="scale" value="showall">
  <param name="menu" value="true">
  <param name="devicefont" value="false">
  <param name="salign" value="">
  <param name="allowScriptAccess" value="sameDomain">
  <!--[if !IE]>-->
  <object type="application/x-shockwave-flash" data="marquee.swf" height="100" width="100">
    <param name="movie" value="marquee.swf">
    <param name="quality" value="high">
    <param name="bgcolor" value="#ffffff">
    <param name="play" value="true">
    <param name="loop" value="true">
    <param name="wmode" value="window">
    <param name="scale" value="showall">
    <param name="menu" value="true">
    <param name="devicefont" value="false">
    <param name="salign" value="">
    <param name="allowScriptAccess" value="sameDomain">
    <!--<![endif]-->
    <a href="http://www.adobe.com/go/getflash"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Загрузить Adobe Flash Player"></a>
    <!--[if !IE]>-->
  </object>
  <!--<![endif]-->
</object>
</marquee>

Результат будет следующим:

В данном примере у нас вместо бегущей строки "бегает" флеш-ролик marquee.swf размером 100 px на 100 px (для наглядности границы флеш-ролика выделены пунктиром). Это уже что-то, но ещё не всё. Дело в том, что мы можем управлять направлением движения нашего флеш-ролика, встроенного внутрь тега marquee. Делается это с помощью атрибутов данного тега. Так, с помощью атрибута direction мы можем изменить направление движения. Всего у атрибута direction четыре возможных значения:

- left (используется по умолчанию);

- right;

- down;

- up.

Как нетрудно догадаться, эти значения соответствуют направлениям движения объекта, заключённого в тег marquee. Так, чтобы изменить направление движения флеш-ролика, присвоим direction значение right (напомню, что по умолчанию стоит left).

Код HTML:


<marquee direction="right">
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" id="marquee" align="middle" height="100" width="100">
  <param name="movie" value="marquee.swf">
  <param name="quality" value="high">
  <param name="bgcolor" value="#ffffff">
  <param name="play" value="true">
  <param name="loop" value="true">
  <param name="wmode" value="window">
  <param name="scale" value="showall">
  <param name="menu" value="true">
  <param name="devicefont" value="false">
  <param name="salign" value="">
  <param name="allowScriptAccess" value="sameDomain">
  <!--[if !IE]>-->
  <object type="application/x-shockwave-flash" data="marquee.swf" height="100" width="100">
    <param name="movie" value="marquee.swf">
    <param name="quality" value="high">
    <param name="bgcolor" value="#ffffff">
    <param name="play" value="true">
    <param name="loop" value="true">
    <param name="wmode" value="window">
    <param name="scale" value="showall">
    <param name="menu" value="true">
    <param name="devicefont" value="false">
    <param name="salign" value="">
    <param name="allowScriptAccess" value="sameDomain">
    <!--<![endif]-->
    <a href="http://www.adobe.com/go/getflash"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Загрузить Adobe Flash Player"></a>
    <!--[if !IE]>-->
  </object>
  <!--<![endif]-->
</object>
</marquee>

Результат будет таким:

Мы имеем возможность ограничить область перемещения объекта, присвоив атрибуту width тега marquee нужное нам значение. Например, так...

Код HTML:


<marquee width="200">
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" id="marquee" align="middle" height="100" width="100">
  <param name="movie" value="marquee.swf">
  <param name="quality" value="high">
  <param name="bgcolor" value="#ffffff">
  <param name="play" value="true">
  <param name="loop" value="true">
  <param name="wmode" value="window">
  <param name="scale" value="showall">
  <param name="menu" value="true">
  <param name="devicefont" value="false">
  <param name="salign" value="">
  <param name="allowScriptAccess" value="sameDomain">
  <!--[if !IE]>-->
  <object type="application/x-shockwave-flash" data="marquee.swf" height="100" width="100">
    <param name="movie" value="marquee.swf">
    <param name="quality" value="high">
    <param name="bgcolor" value="#ffffff">
    <param name="play" value="true">
    <param name="loop" value="true">
    <param name="wmode" value="window">
    <param name="scale" value="showall">
    <param name="menu" value="true">
    <param name="devicefont" value="false">
    <param name="salign" value="">
    <param name="allowScriptAccess" value="sameDomain">
    <!--<![endif]-->
    <a href="http://www.adobe.com/go/getflash"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Загрузить Adobe Flash Player"></a>
    <!--[if !IE]>-->
  </object>
  <!--<![endif]-->
</object>
</marquee>

Результат будет следующим:

Для того, чтобы помещённый внутрь тега marquee флеш-ролик совершал не горизонтальное, а вертикальное движение, надо использовать атрибуты direction и height. Делается это примерно так...

Код HTML:


<marquee height="200" direction="down">
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" id="marquee" align="middle" height="100" width="100">
  <param name="movie" value="marquee.swf">
  <param name="quality" value="high">
  <param name="bgcolor" value="#ffffff">
  <param name="play" value="true">
  <param name="loop" value="true">
  <param name="wmode" value="window">
  <param name="scale" value="showall">
  <param name="menu" value="true">
  <param name="devicefont" value="false">
  <param name="salign" value="">
  <param name="allowScriptAccess" value="sameDomain">
  <!--[if !IE]>-->
  <object type="application/x-shockwave-flash" data="marquee.swf" height="100" width="100">
    <param name="movie" value="marquee.swf">
    <param name="quality" value="high">
    <param name="bgcolor" value="#ffffff">
    <param name="play" value="true">
    <param name="loop" value="true">
    <param name="wmode" value="window">
    <param name="scale" value="showall">
    <param name="menu" value="true">
    <param name="devicefont" value="false">
    <param name="salign" value="">
    <param name="allowScriptAccess" value="sameDomain">
    <!--<![endif]-->
    <a href="http://www.adobe.com/go/getflash"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Загрузить Adobe Flash Player"></a>
    <!--[if !IE]>-->
  </object>
  <!--<![endif]-->
</object>
</marquee>

Здесь с помощью атрибута height задаются границы перемещения флеш-ролика по вертикали, а с помощью атрибута direction задаётся направление движения флеш-объекта. Выглядеть это будет так: