Урок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. Работа с формами.
|