Урок6, Графика и звук в документах HTML.
  • Вставка графических изображений.
  • Для вставки графического изображения применяется тэг <IMG>

    Атрибуты тэга <IMG>:
    src="URL" URL-адрес файла изображения.
    alt="text" Текст, который будет отображаться вместо изображения, при невозможности его вывода.
    align Выравнивание изображения. Может принимать значения:
    • left -выравнивание изображения по левой границе экрана браузера;
    • right -выравнивание изображения по правой границе экрана браузера;
    • top -выравнивание текста по верхней границе изображения;
    • middle -выравнивание текста по центру изображения;
    • bottom -выравнивание текста по нижней границе изображения;
    • texttop -выравнивание текста по верхний границе изображения, относительно самых высоких символов;
    • absmiddle -выравнивание середины строки относительно середины изображения;
    • baseline -выравнивание нижней рамки изображения относительно базовой линии текстовой строки;
    • absbottom -выравнивание нижней границы изображения относительно нижней границы текущей строки.
    height Высота картинки в пикселях.
    width Ширина картинки в пикселях.
    border Ширина рамки вокруг картинки в пикселях (только NN).
    hspace Ширина свободного пространства в пикселах, которое должно отделять изображение от текста по горизонтали.
    vspace Ширина свободного пространства в пикселах, которое должно отделять изображение от текста по вертикали.
    usemap URL-адрес файла карты изображения.
    ismap Указывает, что данное изображение является картой..

    Примеры выравнивания изображения:
    left left left left
    left left left
    right right right right
    right right right
    top top top top
    top top top
    middle middle middle middle
    middle middle middle
    bottom bottom bottom bottom
    bottom bottom bottom
    texttop texttop texttop texttop
    texttop texttop texttop
    absmiddle absmiddle absmiddle absmiddle
    absmiddle absmiddle absmiddle
    baseline baseline baseline baseline
    baseline baseline baseline
    absbottom absbottom absbottom absbottom
    absbottom absbottom absbottom

  • Графическое изображение - ссылка.
  • Если вставить картинку между тэгами <A></A> то получится ссылка в виде картинки. В этом случае браузер обведет картинку рамкой, убрать которую можно указав значение атрибута border="0" тэга <IMG>.

    Пример:
    Картинка-ссылка с рамкой:
    <a href="www.microsoft.com"><IMG src="../pics/office.gif" align="absmiddle"></a> www.microsoft.com
    www.microsoft.com
    Картинка-ссылка без рамки:
    <a href="www.microsoft.com"><IMG src="../pics/office.gif" border="0" align="absmiddle"></a>www.microsoft.com
    www.microsoft.com

  • Создание карты изображений.
  • Карты изображений (image maps) очень удобны для создания различного рода графических меню. Попробуем создать простейшее изображение, содержащее карту.
    Для этого нарисуем, например, что-нибудь типа этого:

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

    Карта задается тэгами<map></map>, внутри которых тэгами <area> задаются чувствительные области карты.

    Атрибуты тэга <area>:
    shape Задает форму чувствительной области. Может принимать значения:
    • rect -прямоугольник. Параметр COORDS задает координаты верхнего левого и правого нижнего углов области;
    • circ -окружность. Через параметр COORDS передаются три значения: координата центра окружности по оси X, координата центра окружности по оси Y, и радиус окружности;
    • poly -многоугольник. Параметр COORDS задает координаты вершин многоугольника в виде пар значений;
    href URL объекта, который должен быть загружен после щелчка левой клавишей мыши по чувствительной области.
    nohref задание областей, нечувствительных к нажатию мышью.
    Итак, для нашего случая:

    <MAP NAME="mymap">
    <area shape="circ" coords="75,105,53" href="circle.htm">
    <area shape="rect" coords="164,52,273,151" href="rectange.htm">
    <area shape="rect" coords="0,0,297,224" nohref>
    </MAP>

    Следует обратить внимание, что последним тэгом <AREA> мы описываем все изображение, как нечувствительное к щелчкам мыши. В случае перекрывающихся областей браузер использует первое встреченное им в карте описание. Следовательно, в нашем случае браузер исключит из нечувствительной области заданный вначале круг и прямоугольник.
    Затем вставим с помощью тэга <img> карту изображения в документ.
    <img src="../pics/map.gif" border=0 usemap="#mymap">

    Вот что получилось:

    Карту изображения можно задать в отдельном файле. В этом случае следует указать этот файл в параметре атрибута usemap.
    Например, если карта изображения задана в файле imgmap.htm:
    <img src="../pics/map.gif" border=0 usemap="imgmap.htm#mymap">

    Для создания карт изображений лучше использовать специальные программы, например: GeoHTML 2.1

  • Рисунок в качестве фона.
  • Сделать фон страницы можно с помощью атрибута background тэга <body>, например:
    <body background="bgr.gif">

  • Вставка видео в документ HTML.
  • С помощью тэга <IMG> можно вставить в документ видеофрагмент в формате *.avi*.

    Атрибуты тэга <IMG>,для вставки *.avi*-файла:
    dynsrc="URL" путь к avi-файлу.
    src="URL" путь к графическому изображению, которое появится в случае неспособности браузера проигрывать видеофрагменты.
    start Момент начала проигрывания. Может принимать значения:
    • fileopen -начать проигрывание сразу же после загрузки;
    • mousemove -начать проигрывание после того, как пользователь поместит курсор на окно, предназначенное для проигрывания видеофрагмента.
    controls отображать элементы управления процессом проигрывания.
    loop количество проигрываний видеофрагмента. Если loop равно -1 или INFINITE, проигрывание будет выполняться бесконечно.
    loopdelay Задержка между проигрываниями в миллисекундах.

    Например:
    <img dynsrc="../pics/search.avi" start="mousemove" controls>

    Видеофайл можно вставить в документ с помощью обычной ссылки, например:
    <a href="../pics/search.avi">просмотр ролика</a>
    В этом случае при нажатии на ссылку браузер загрузит плагин для воспоизведения видио и запустит ролик.

  • Вставка звука в документ HTML.
  • Чтобы вставить звуковой файл в документ, применяются следующие тэги:
    Для MSIE - <bgsound> с атрибутами:

  • balance -управление стереобалансом. Допустимые значения от -10000 до 10000.
  • volume -управление громкостью звучания. Допустимые значения от -10000 до 0 (максимальная громкость).
  • loop -сколько раз проигрывать файл. Если loop-"infinite" или "-1", проигрывание будет выполняться бесконечно.
  • src -путь к файлу.

  • Для NN - <embed> с атрибутами:
  • loop -повторять с начала (true - да, false - нет).
  • play_loop="число" -если повторять с начала то сколько раз.
  • src -путь к *.mid*, *.wav* или *.avi* файлу.

  • autostart -проигрывать сразу после загрузки (true - да, false - нет).

  • hidden -спрятать пульт управления (true - да, false - нет).

  • width -ширина пульта управления.

  • height -высота пульта управления.

  • Вообще, <embed> предназначен для вставки объектов, используя технологию OLE, которая используется в Windows-системах. Так что в других ОС этот тэг работать не будет.
    Так каким-же тэгом пользоваться? Пользуйтесь сразу обеими. Какой-нибудь да распознается.
    <embed src="bgmusic.mid" autostart="true" hidden="true" loop="0">
    <bgsound src="bgmusic.mid" loop="infinite">

    Урок5.Ссылки в документах HTML. | Урок7. Работа с формами.


    -------------------------------------------------------------------------------------
    Мой Email: the_thing@rbcmail.ru

     
    Используются технологии uCoz