Специализированные языки разметки документов HTML (стр. 11 из 16)
<А href =” URL документа, на который организуется ссылка”>
< IMG src =” URL изображения”
align =”значение”
width =”значение”
h е ight =”значение”
alt =”альтернативный текст”
b о rder =”значение”>
</А>
Пример кода HTML , позволяющего использовать изображение в качестве гиперссылки:
< А href=”/hobbie/index. htm1”>
<IMG src=”/mages/hobbie. jpg”
align =” BASELINE ”
width =”315”
height =”226”
alt =”Тематический раздел 'Мои увлечения'”
border =”0”>
</ A >
7.4 Карты ссылок
Карта ссылок ( image map ) представляет собой графическое изображение, разбитое на фрагменты, причем каждый фрагмент является одновременно гиперссылкой. Для задания карты ссылок необходимо:
1. Задать изображение карты с указанием того, что это изображение представляет собой карту, а не простой рисунок.
2. Разбить изображение на отдельные фрагменты и составить их описание.
3. Описать каждый фрагмент.
Графические карты создаются с помощью тега <МАР>. Элементы <МАР> динамически связаны с изображениями, вызываемыми директивой < IMG >, и в общем виде описываются следующим образом:
< МАР name=” имя карты ”>
<AREA href=”URL”
sh аре=”параметр”
coords =” x 1, y 1, x 2, y 2”
а lt =”альтернативный текст”
target =”параметр”
nohref >
</МАР>
Атрибут name тега <МАР> определяет уникальное имя карты, записываемое латинскими символами. При задании имени карты необходимо соблюдать регистр.
Тег < AREA > определяет непосредственно активную область изображения. Атрибут href указывает на адрес документа, вызываемого при нажатии кнопки мыши над данным участком изображения.
Атрибут alt определяет всплывающую подсказку при наведении курсора мыши на данный элемент.
Атрибут shape управляет формой активной области и может принимать одно из трех значений: rect – прямоугольник, circle – круг или poly – многоугольник.
Атрибут coords позволяет определить относительные координаты вершин активной области. Возможные значения данного атрибута:
| Значение shape | Синтаксис записи coords | Значения параметров coords |
| shape = rect | coords=”xl,yl,x2,y2” | x 1 и yl – координаты левого верхнего угла фигуры, x2 и y2 – правого нижнего |
| shape=circle | coords="x,y,r" | х и y – координаты центра окружности, r – ее радиус в пикселах |
| shape = poly | coords="x1,y1,x2,y2, x3,y3,... xn,yn,x1,y1" | x 1, y 1... xn , yn – координаты вершин многоугольника |
Значения координат активной области отсчитываются в пикселах по длине и ширине картинки от левого верхнего угла изображения, принимаемого за точку с координатами 0,0. То есть, значение х возрастает справа налево, а значение у – сверху вниз. Координаты х и у могут быть также заданы в процентах от реального размера изображения, например: shape =" rect " coords = "0,0,50%,50%". Если несколько активных областей одного изображения перекрывают друг друга, область, описанная тегом < AREA > первой, имеет приоритет.
Значения атрибута target такие же, как и у тега < A >.
Необязательный атрибут nohref определяет неактивные участки карты и исключает переходы при щелчке мышью по данному фрагменту.
Пример 1. Пусть изображение состоит из четырех прямоугольников, а его полный размер составляет 340 x 60 пикселов. Каждый из этих прямоугольников может быть использован в качестве фрагмента карты ссылок.
| HTML | CSS |
| DHTML | JavaScript |
<IMG src=”map1. gif”
usemap=”#refer”>
<MAP name=”refer”>
<AREA shape=”rect”
coords=”0,0,169,29”
href=”html. html”>
<AREA shape=”rect”
coords=”170,0,339,29”
href=”css. html”>
<AREA shape=”rect”
coords=”0,30,169,59”
href=”dhtml. html”>
<AREA shape=”rect”
coords=”170,30,339,59”
href=”javascript. html”>
</MAP>
Пример 2. Пусть изображение состоит из многоугольников, а его полный размер составляет 370 x 120 пикселов. Координаты вершин многоугольников задаются последовательно, причем первая и последняя координаты должны совпадать, чтобы многоугольник был замкнутым.
<IMG src=”map2. gif”
usemap=”#polygons”>
<MAP name=”polygons”>
<AREA shape=”poly”
coords=”0,0,184,0,0,59,0,0”
href=”html. html”>
<AREA shape=”poly”
coords=”185,0,369,0,369,60,184,0”
href=”css. html”>
<AREA shape=”poly”
coords=”185,119,369,59,369,119,185,119”
href=”javascript. html”>
<AREA shape=”poly”
coords=”0,59,185,119,0,119,0,59”
href=”dhtml. html”>
<AREA shape=”poly”
coords=”185,0,369,59,185,119,0,59,185,0”
href=”web. html”>
</MAP>
Карты ссылок можно создавать и другим способом. Изображение можно рассечь на отдельные фрагменты и "склеить" его по принципу мозаики в невидимой таблице с назначением отдельным фрагментам картинки свойств гиперссылки при помощи директивы <А>. Данный прием применяется не только при создании элементов, подобных image map , но и при подготовке рисованых заголовков или полей для размещения рекламного баннера. Однако аккуратно "разрезать" изображение при помощи традиционных графических редакторов, причем так, чтобы готовая "мозаика" правильно вписывалась в таблицу, весьма трудно. Для решения этой задачи web-мастеру помогают специальные утилиты – фрагментаторы графики.
8. Мультимедиа на web –странице
8.1 Озвучивание Web -страницы
Существует два способа обращения к мультимедиа-файлам: с помощью элемента привязки <А>, либо с применением специальных тегов.
Элемент привязки <А>. Этот элемент предназначен для задания ссылки на другой файл (в том числе и мультимедийный). Например,
<А href =" http : // TravelDev . com / video / MiddleSeaAcuba . avi ">
Текст гиперссылки
</А>
После щелчка по тексту гиперссылки отобразится содержимое видеоклипа.
Специальные элементы позволяют вставлять (внедрять) мультимедиа файл в содержимое Web -страницы. Мультимедийный файл загружается одновременно с содержимым всей страницы. Это элементы < IMG >, < APPLET >, < OBJECT >, <EMBED> и < BGSOUND >.
Форматы аудиофайлов. Звуковые эффекты создаются с применением звуковых (аудио) файлов. Форматы звуковых файлов различаются способами записи и областями применения. Наиболее распространены форматы:
AU ( AUdio format , "звуковой формат", расширение. au ) – стандартный формат для 8-битового звука, который является одним из старейших звуковых форматов в Internet (первоначально разработан для UNIX ). Размер звуковых файлов AU относительно небольшой, однако качество звука невысокое.
WAV ( Waveform Audio , "звук в форме волны", расширение. wav ) – стандартный формат цифрового аудио в системе Windows .
MIDI (от Musical Instrument Digital Interface , "цифровой интерфейс музыкальных инструментов", имеет расширение. midi или. mid ) – формат, который не связан с реальным звуком. Этот формат содержит просто запись нот, коды музыкальных инструментов и прочую информацию, по которой синтезируется музыка.
МРЗ (MPEG Audio Layer 3, расширение . mp3). Формат МРЗ применительно к звуку отличается высокой степенью сжатия данных за счет некоторого ухудшения качества звука, незаметного на слух.
RealAudio ("реальный звук", расширение. r а) – применяется для воспроизведения с повышенным качеством звучания. Файлы этого формата поддерживают поток звуковых данных, то есть они могут воспроизводиться по мере поступления данных, не ожидая окончания загрузки файла.
Файлы перечисленных форматов являются загружаемыми, то есть для начала воспроизведения они должны быть полностью загружены.
Звуковой фон (элемент BGSOUND ). Подключение звукозаписи в фоновом режиме обычно применяется для приветствий или музыкального сопровождения. Как только пользователь загрузит страницу, начнется автоматическое воспроизведение фонового звука. Для подключения звукового файла в фоновом режиме применяется элемент <BGSOUND>. Формат тега:
< BGSOUND src =” URL ”
loop =значение
volume =значение
balance =значение>
Атрибут src задает URL-адрес звукового файла.
Атрибут loop определяет, сколько раз будет воспроизводиться файл. Например, тег < BGSOUND src =" music . mp 3" loop =5> означает, что звуковой файл duet будет воспроизведен 5 раз. Если loop =" infinite ", звук будет повторяться до тех пор, пока пользователь находится на странице.
Атрибут volume назначает уровень воспроизведения звука и может принимать числовые значения от - 10000 до 0. Можно только "приглушить" звучание, а увеличить уровень воспроизведения звука выше максимального уровня (значение 0) нельзя.
Атрибут balance – настройка стереобаланса. Значения этого атрибута выбираются из диапазона чисел от - 10000 до 10000. Назначение любого крайнего значения (-10000 или 10000) приводит к звучанию только одного динамика. Введение тега
<BGSOUND src="duet. mid"
loop=infinite
volume=0
balance=0>
приведет к звучанию файла duet . mid с максимальным уровнем звука и нормальным стереобалансом. Звучание будет продолжаться от момента загрузки до тех пор, пока пользователь находится на данной странице.
Внедрение аудио (элемент EMBED ). Звуковое сопровождение в фоновом режиме лишает посетителя страницы возможности управления звуком. Управлять звуком можно, если на Web -страницу встроить аудиоплейер с помощью тега < EMBED >, который размещается в любом месте внутри элемента BODY . Формат тега:
< EMBED src =” URL ”
width =”значение”
height =”значение”
autostart =”значение”
hidden =”значение”
title =”Всплывающая подсказка”>
Атрибут src задает URL звукового файла.
Атрибуты width и height устанавливают размеры панели управления проигрывателя (ширину и высоту); значения этих атрибутов указываются в пикселах или в процентах.
Атрибут autostart назначает возможные варианты включения воспроизведения звука. Данный атрибут принимает значения false (включение звука пользователем) и true (автоматическое начало воспроизведения сразу после загрузки страницы).