Александр Чиртик - HTML: Популярный самоучитель

Рис. 6.3. Различное выравнивание изображений

Для большей наглядности и экономии места изображения показаны несколько уменьшенными (height=20 и width=23) и с использованием границы одинарной толщины (border=1).

Изображения, особенно небольшие пиктограммы и значки, часто используются в качестве графического представления гиперссылок. Создание изображения‑гиперссылки выполняется очень просто: достаточно заключить HTML‑элемент IMG внутрь элемента A, как показано ниже:

Изображение‑гиперссылка обычно обводится браузером рамкой такого же цвета, что и цвет текста обычной гиперссылки в соответствующем состоянии (посещенная, непосещенная или активная).

Рассмотрим еще один интересный способ использования изображений для навигации – создание изображений‑карт. Карта – это заданный набор областей различной формы. Заданные области карты считаются активными, и браузер работает с ними практически аналогично тому, как он работает с изображениями‑гиперссылками. Так вот, изображение‑карта – это обычное изображение с наложенной на него картой активных областей. Карту можно использовать не только с изображениями, но здесь будет рассмотрено использование карт именно с ними – так нагляднее.

Карта, используемая для изображения, может быть создана в любом документе, URI которого известен. Для создания карты используется элемент MAP (задается парными тегами и ). Обычно для элемента MAP задается значение атрибута name – имя, которое используется для ссылок на созданную карту.

Внутри элемента MAP при помощи одиночных тегов

• coords – координаты активной области (количество и значение зависят от типа области, заданного атрибутом shape);

• href – URI, на который указывает гиперссылка, ассоциированная с областью;

• nohref – булев атрибут, создает неактивную область (с областью ассоциируется пустая гиперссылка);

• shape – задает тип области, может принимать значения: rect (прямоугольник), circle (круглая область), poly (многоугольник) и default (по умолчанию используется вся область карты);

• alt – альтернативный текст;

• title – текст подсказки (отображается в виде всплывающей подсказки при наведении указателя мыши на область);

• tabindex – позиция элемента карты в порядке табуляции в HTML‑документе (целое число от 0 до 32 767).

Задание набора значений атрибуту coords существенно отличается для областей различных видов. Значения задавать не нужно, если используется значение атрибута shape по умолчанию. Иначе при задании значений атрибуту coords нужно следовать следующим правилам.

• Если для атрибута shape установлено значение rect, то атрибуту coords задаются координаты верхнего левого и нижнего правого углов прямоугольника (например, coords="10,10,34,45").

• Если для атрибута shape установлено значение poly, то атрибуту coords задаются координаты всех вершин многоугольника. При этом лучше координаты первой вершины указать и в конце, а то вдруг разработчики браузера забыли создать автоматическое закрытие многоугольника (например, coords="10,10,34,45,50,20,10,10" – задание треугольной области).

• Если для атрибута shape установлено значение circle, то атрибуту coords задаются координаты центра и радиус окружности (например, coords="100,100,45"). Радиус можно задавать в процентах, тогда значение радиуса в пикселах будет вычислено браузером на основе размеров объекта, на который накладывается карта, при отображении HTML‑документа.

В примере 6.3 приводится один из способов использования изображения‑карты для осуществления навигации по документам.

coords = "1,13,15,2,15,23,1,13"

shape = poly href = "6.1.html"

alt = "Переход к примеру 6.1"

title = "Переход к примеру 6.1">

coords = "48,13,34,2,34,23,48,13"

shape = poly href = "6.2.html"

alt = "Переход к примеру 6.2"

title = "Переход к примеру 6.2">

coords = "15,2,34,24"

shape = rect href = "6.3.html"

alt = "Обновить"

title = "Обновить">

Здесь на изображение накладывается карта, состоящая из двух треугольников и одного прямоугольника. Обратите внимание на то, что для указания браузеру использовать карту в теге элемента IMG атрибуту usemap присвоено значение – URI карты. В данном случае используется карта, определенная в том же HTML‑документе. Карта может быть определена и в другом файле того же сайта или вообще в файле, находящемся на другом сервере. Тогда нужно соответствующим образом изменить относительный URI (для файла того же сайта) или указать абсолютный URI HTML‑документа, в котором определена нужная карта, например:

Изображение‑карта из примера 6.3 выглядит так, как показано на рис. 6.4.

Рис. 6.4. Изображение-карта

В данном случае видно, что при наведении указателя мыши на элемент карты отобразилась подсказка для соответствующего элемента, а сам указатель имеет форму, сигнализирующую о том, что он находится над гиперссылкой.

Сейчас будет кратко рассмотрен HTML‑элемент, позволяющий добавить музыку, которая будет проигрываться при открытии HTML‑документа, – элемент BGSOUND. Он задается при помощи одиночного тега и имеет следующие атрибуты:

• src – URI аудиофайла (поддерживаются только форматы WAV и MID);

• loop – задает количество повторений (значения 0 или –1 используются при необходимости бесконечного воспроизведения, значения меньше –1 интерпретируются как 1), по умолчанию используется значение 1;

• volume – задает громкость воспроизведения; значения от –10 000 (минимальная громкость) до 0 (максимальная громкость, используется по умолчанию);

• balance – задает значение стереобаланса, принимает значения от –10 000 (левый баланс) до 10 000 (правый баланс); по умолчанию используется значение 0 (центральный баланс).

Ниже приведен пример 6.4, представляющий собой простейший HTML‑документ, при открытии которого начинает проигрываться музыка из файла bgsound.wma.

Текст HTML-документа ...

Как можно было убедиться, элемент BGSOUND позволяет очень легко добавить звуковое оформление HTML‑документа. Жаль только, что этот элемент не является стандартным HTML‑элементом. К тому же он поддерживается только браузером Internet Explorer.

Браузер Internet Explorer поддерживает также ряд нестандартных дополнительных атрибутов элемента IMG, при помощи которых можно очень просто организовать проигрывание видео в окне браузера. Рассмотрим эти атрибуты: