Графика, мультимедиа и внедренные объекты

В этой главе:

1. Элемент IMG
2. Элемент OBJECT
3. Элемент PARAM
4. Элемент APPLET
5. Элементы EMBED и BGSOUND
6. Элементы AREA и MAP
7. Элемент MARQUEE
8. Элементы MULTICOL, LAYER и другие

Внедрение изображений в документы HTML было предусмотрено с момента появления этого языка, для чего был предусмотрен элемент IMG. Последующие расширения HTML в области мультимедиа позволяют включать в документы графические изображения, видеоклипы, звук и апплеты Java, а также различные интерактивные элементы типа Flash-роликов, VRML и многого другого.

До появления HTML 4 различные фирмы-производители браузеров предлагали свои расширения. Так, Microsoft для включения в документ видеоклипов AVI предлагала атрибут DYNSRC для элемента IMG. Netscape еще в версии 1.2 своего браузера ввела в обиход элемент APPLET (для включения апплетов Java), а в 2.0 – EMBED (для взаимодействия с неподдерживаемыми самим браузером типами файлов через подключаемые модули). В 3-й версии Internet Explorer также появилась поддержка элемента EMBED, но для использования элементов ActiveX. Кроме того, существует элемент SOUND, появившийся в браузере-прародителе MOSAIC и BGSOUND, введенный в MSIE.

Для того чтобы внести ясность во все это изобилие, консорциумом W3C был предложен универсальный элемент OBJECT. Он может заменить собой элементы IMG, APPLET, EMBED, а заодно и IFRAME. К сожалению, его поддержка браузерами все еще хромает.

В общем случае, для вставки стандартных для Web графических файлов (JPEG, PNG, GIF) используйте элемент IMG. Для вставки звука и видеоизображений можно использовать как EMBED, так и OBJECT. А для апплетов, написанных на Java – APPLET. Примеры использования графики и внедренных объектов вы найдете в папке Part_2/Objects.

ПРИМЕЧАНИЕ
В HTML5 все-таки были введены специальные элементы — AUDIO и VIDEO — для поддержки звука и видео, соответственно. К сожалению, эти теги поддерживаются лишь браузерами, выпущенными не ранее 2010 года.

Элемент IMG

Элемент IMG широко используется для внедрения рисунков на страницы Web. Он имеет два обязательных атрибута – SRC и ALT, определяющих расположение рисунка и альтернативное (текстовое) описание соответственно:

<img src="fox.jpg" alt="Лиса" />

ВНИМАНИЕ
Атрибут ALT следует указывать в любом случае, даже если вы вставляете декоративный элемент оформления. В таком случае значение ALT может быть пустым. Если же его не указать, то браузер может подставить в качестве подписи имя файла, что в случае невозможности загрузить рисунок сможет испортить оформление страницы.

Еще два атрибута – HEIGHT и WIDTH, определяющие размеры изображения, хотя и не являются обязательными, но рекомендуются к повсеместному использованию, поскольку позволяют браузеру сразу выделить необходимое место на странице, не дожидаясь загрузки собственно файла с рисунком:

<img src="fox.jpg" alt="Лиса" width="120" height="150" />

В данном примере мы определили элемент IMG, который ссылается на файл fox.jpg с размерами 120x150 пикселей и с альтернативной подписью «Лиса».

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

<a href="fox.html"><img src="fox.jpg" alt="Лиса" /></a>

Здесь мы определили ссылку на файл fox.html, которая выглядит как обведенный в рамку рисунок. Собственно за наличие или отсутствие такой рамки отвечает еще один часто применяемый (хотя и устаревший) атрибут IMG – это BORDER, определяющий толщину рамки. Исторически сложилось так, что если атрибут BORDER явно не указан, то браузеры не выводят рамку для обычных картинок, и выводят для рисунков, являющихся ссылками. Из этого следует, что во избежание неожиданностей следует стараться всегда указывать и этот атрибут:

<img src="fox.jpg" alt="Лиса" width="120" height="150" border="0" />

Таким образом, мы уже насчитали целых пять собственных атрибута IMG, причем два из них (ALT и SRC) всегда должны присутствовать. Кроме них, для этого элемента определены еще четыре собственных атрибута. Это NAME, LONGDESC, ISMAP и USEMAP. Кроме того, существует еще ряд фирменных расширений, да и устаревшие атрибуты оформления не ограничиваются одним лишь BORDER. Все это великолепие собрано в таблице2.37.

Таблица 2.37 Атрибуты элемента IMG

Атрибут	Примечание	Описание
id, class	Общие	Идентификаторы элемента
lang, dir	Общие	Информация о языке и направление текста
title, style	Общие	Определяют заголовок и стиль элемента
name	Отменен в XHTML 1.1	Идентификатор элемента. Аналогичен ID, используется для обеспечения совместимости
src	Обязательный атрибут	Указывает URI изображения
alt	Обязательный атрибут	Указывает текст, который должен быть показан на месте изображения, если оно не было загружено
longdesc	Только Mozilla	Определяет URI файла с расширенным описанием изображения
usemap	-	Указывает URI клиентской карты рисунка
ismap	-	Указывает, что должна быть использована серверная карта рисунка
align	Устаревший	Определяет выравнивание относительно окружающего блока текста. Может принимать значения bottom, middle, top, left, right
width, height	-	Определяют размер изображения по горизонтали и вертикали соответственно
hspace, vspace	Устаревшие	Указывают величину отступа от рисунка до окружающего его текста в пикселях: hspace – слева и справа, vspace – сверху и снизу
border	Устаревший	Определяет наличие и ширину рамки вокруг изображения в пикселях
lowsrc	Нестандартный Netscape	Указывает на URI компактного изображения, которое должно быть отображено до загрузки основного. После загрузки основного файла (указанного в src) изображение будет заменено
dynsrc	Нестандартный MSIE	Указывает на URI видеоклипа в формате AVI
start, loop, loopdelay, controls	Нестандартные MSIE, используются совместно с dynsrc	Определяют момент запуска клипа, количество повторов, паузу между повторами и необходимость отображения элементов управления проигрыванием клипа соответственно
onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup	Общие	Определяют действие, которое должно быть выполнено в ответ на соответствующее действие пользователя

Атрибут NAME был введен для того, чтобы к изображению могла обратиться программа-сценарий на JavaScript – возможно, вам уже встречались в Web рисунки, при наведении на которые указателя мышки происходили, например, замены изображения и тому подобные действия. Такое поведение мы еще рассмотрим в соответствующем разделе книги, а примеры использования остальных (преимущественно, устаревших) атрибутов вы можете осмотреть в файле images.html. Что же касается карт изображений, то они подробно рассматриваются в контексте элементов AREA и MAP.

Еще один часто встречающийся атрибут элемента IMG – это ALIGN, отвечающий за выравнивание рисунка по тому или иному краю страницы:

<img src="fox.jpg" alt="Лиса" width="120" height="150" align="left" />

В данном случае рисунок будет передвинут в максимально возможную левую позицию.

ПРИМЕЧАНИЕ
Поскольку атрибут ALIGN является устаревшим, то в CSS ему предусмотрена замена – в данном случае это свойство float, о котором будет рассказано в соответствующей части этой книги, в главе, посвященной позиционированию.

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

В завершение знакомства с элементом IMG следует отметить, что в качестве форматов графических файлов современные программы просмотра поддерживают GIF, JPEG и PNG. Кроме того, MSIE «понимает» BMP, а последние версии Mozilla – MNG и JNG. Каждый графический формат обладает собственными преимуществами и недостатками (кроме, пожалуй, BMP, у которого преимуществ фактически нет), а потому выбор формата графического файла может в ту или иную сторону повлиять на конечный вид и время загрузки страницы.

ПРИМЕЧАНИЕ
Используемые в Интернете форматы графических файлов и иные аспекты работы с Web-графикой будут подробно рассмотрены в заключительной части настоящего издания.

Свойства IMG

Закрывающий тег: нет.
Совместимость: все.
Вложение: недопустимо (пустой элемент).
Уникальный: нет.

Элемент OBJECT

Все современные графические браузеры имеют встроенную поддержку для наиболее распространенных типов данных, таких, как изображения GIF и JPEG, а также для текстовых файлов и т.д. Элемент OBJECT может использоваться для взаимодействия с иными объектами, например, документами Adobe Acrobat, видеоклипами, или графическими изображениями в различных форматах. При этом задействуются дополнительные программы – подключаемые модули (Plug-ins).

Для примера возьмем нестандартный для Windows тип файла – PICT и попробуем внедрить его на Web-страницу при помощи элемента OBJECT:

<object data="sun.pct" height="150" width="250" type="image/pict"></object>

ВНИМАНИЕ
Всегда указывайте размеры объекта: поскольку внедренные файлы, как правило, открываются сторонними программами, то браузер не может знать, какого размера область следует выделить под объект.

В результате, если у вас установлена поддержка мультимедийных форматов Macintosh (например, проигрыватель Apple QuickTime), то вы увидите внедренное изображение в формате, который самим браузером не поддерживается (рис. 2.24).

Рис. 2.24. Страница с внедренным в качестве объекта рисунком в формате PICT

В то же время, допустимо использование элемента OBJECT и для стандартных типов данных, например, рисунков JPEG:

<object data="sun.jpg" height="150" width="250" type="image/jpeg"></object>

На случай, если указанный тип данных не поддерживается, допускается вложение объектов один в другой с постепенной деградацией:

<object data="sun.pct" height="150" width="250" type="image/pict"> <object data="sun.jpg" height="150" width="250" type="image/jpeg"> Солнце – рисуют дети </object> </object>

В данном случае, если браузер не сможет найти модуль поддержки рисунков PICT, он попытается вывести JPEG-рисунок. Если же он не сможет сделать и этого (например, файл «затерялся»), или вообще не распознает элемент OBJECT, то выведет то, что находится внутри контейнера OBJECT, в данном случае – строку «Солнце – рисуют дети».

ПРИМЕЧАНИЕ
Браузер MSIE не поддерживает вложение объектов, а, следовательно, и их полноценную деградацию. Так, если он не сможет распознать тип объекта, то лишь выведет альтернативное содержание, а если распознает, но не загрузит – то покажет пустое место.

В начале этой главы было сказано, что элемент OBJECT может использоваться не только вместо IMG, но и в качестве замены для плавающего фрейма (IFRAME). Делается это очень просто: достаточно в качестве источника указать HTML-документ, и установить соответствующий тип файла:

<object data="file.html" height="300" width="200" type="text/html"></object>

Такой код по своему конечному результату полностью идентичен тому, что можно получить, использовав элемент IFRAME с соответствующими параметрами:

<iframe src="file.html" height="300" width="200"></iframe>

Во всех предыдущих примерах мы рассматривали OBJECT как расширенную замену другим элементам – IMG и IFRAME. Однако область применения этого элемента гораздо шире. Например, при помощи OBJECT можно встраивать в документы HTML любые программы. Самый распространенный случай – это внедрение Flash-роликов. В принципе, делается это аналогично внедрению уже рассмотренных объектов – вся разница будет лишь в типе данных:

<object data="simple.swf" type="application/x-shockwave-flash" width="400" height="200"></object>

Если внедрить ролик Flash в HTML-документ подобным образом и посмотреть результат в Mozilla или Opera, то может показаться, что все в порядке. Но если посмотреть в MSIE, то вы увидите, что, хотя в обозначенную область и загружен проигрыватель Flash, сам клип в него не загрузился. Эта проблема вызвана отличиями в браузерах и остается лишь искать обходные пути. В качестве наиболее безопасного варианта в данном случае можно рекомендовать указание файла Flash при помощи элемента PARAM, вложенного в контейнер OBJECT:

<object data="simple.swf" type="application/x-shockwave-flash" width="400" height="200"> <param name="movie" value="simple.swf" /> </object>

Такая запись, с одной стороны, не противоречит стандартам, и в то же время будет совместима практически со всеми встречающимися браузерами (см. файл flash.html). Что касается самого элемента PARAM, то мы рассмотрим его несколько позже, а пока что сосредоточимся на атрибутах элемента OBJECT, обратившись для этого к таблице 2.38.

Таблица 2.38 Атрибуты элемента OBJECT

Атрибут	Примечание	Описание
id, class	Общие	Идентификаторы элемента
lang, dir	Общие	Информация о языке и направление текста
title, style	Общие	Определяют заголовок и стиль элемента
name	Отменен в XHTML 1.1	Идентификатор элемента. Аналогичен ID, используется для обеспечения совместимости
data	См. также classid	Указывает URI данных для встраиваемого объекта
type	-	Определяет тип данных, URI которых определен в атрибуте DATA. Во избежание ошибочного определения типа объекта браузером рекомендуется всегда указывать этот атрибут
classid	Не исключает использование data	Определяет URI программы для создания объекта. Используется для ссылки на апплеты Java и иные подобные программы. В других случаях следует использовать DATA
codetype	Только совместно с classid	Указывает на тип данных, которые должны быть загружены для случая, если используется CLASSID
archive	-	Определяет список файлов (URI, перечисленные через пробел), которые будут задействованы объектом. Использование этого атрибута может ускорить загрузку. Например, для Java-апплета, можно перечислить рисунки, с которыми он будет работать
codebase	-	Указывает базовый URI для всех ссылок, указанных в data, classid или archive. По умолчанию равен URI текущего документа
declare	Только для Java	Если указать этот атрибут, то данный элемент OBJECT будет являться только определением объекта, а чтобы его задействовать, надо будет к нему обратиться из другого объекта
standby	Не поддерживается	Определяет текстовое сообщение, которое будет отображаться до тех пор, пока объект не прогрузится
usemap	Кроме MSIE	Указывает URI клиентской карты объекта
ismap	Кроме MSIE	Указывает, что должна быть использована серверная карта объекта
align	Устаревший	Определяет выравнивание относительно окружающего блока текста. Может принимать значения bottom, middle, top, left, right
width, height	-	Определяют размер области объекта по горизонтали и вертикали соответственно
hspace, vspace	Устаревшие	Указывают величину отступа от области, занимаемой объектом до окружающего его текста в пикселях: hspace – слева и справа, vspace – сверху и снизу
border	Устаревший	Определяет наличие и ширину рамки вокруг объекта в пикселях
tabindex	Только MSIE	Определяет порядок следования объектов (при использовании перехода между ними при помощи клавиатуры)
onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup	Могут обрабатываться браузером, если только такие события не будут перехвачены программой, отвечающей за работу внедренного объекта	Определяют действие, которое должно быть выполнено в ответ на соответствующее действие пользователя

Как видно из таблицы, у элемента OBJECT имеется две пары сходных по назначению атрибутов. Это – уже рассмотренные DATA и TYPE, а так же еще нами не изученные CLASSID и CODETYPE. Второй вариант, как правило, используется в том случае, когда в качестве внедряемого объекта выступает программа, например, аплет Java:

<object classid="java:test.class" codetype="application/java"></object>

Впрочем, иногда встречаются и такие случаи, когда CLASSID может использоваться совместно с DATA. Другими собственными атрибутами элемента OBJECT являются ARCHIVE и CODEBASE. Первый используется для «кэширования» связанных файлов, а второй можно назвать эквивалентом элемента BASE для данного конкретного объекта. Все остальные атрибуты нам уже знакомы по элементу IMG.

Свойства OBJECT

Закрывающий тег: требуется.
Совместимость: кроме Netscape 4.
Вложение: допустимо.
Уникальный: нет.

Элемент PARAM

Хотя в OBJECT и предусмотрены атрибуты (например, DATA) для передачи указаний внедряемому объекту, часто этого бывает недостаточно для полноценного взаимодействия HTML-документа с объектом. Мы уже видели на примере внедрения ролика Flash (в случае с MSIE), что атрибут DATA не всегда достаточен, а в случае внедрения апплетов Java, которые могут принимать массу параметров, без дополнительного механизма взаимодействия уже не обойтись. И такой механизм у нас имеется – это элемент PARAM, который описывает значения для OBJECT и APPLET. Значения параметров этого элемента напрямую зависят от того, с каким объектом он используется. Элемент PARAM всегда должен быть вложенным в контейнер APPLET или OBJECT:

<object clsssid="http://www.host.ru/applets/timer.class"> <param name="initial" value="01:00:00" valuetype="data"> <param name "background" value="http://www.host.ru/img/bg01.gif" valuetype="ref"> </object>

Здесь мы передаем Java-аплету «timer» два значения: initial, равное «01:00:00» и background, находящийся в файле «http://www.host.ru/img/bg01.gif». Способы обработки этих данных целиком зависят от самой программы timer.

Все параметры передаются при помощи пар, определяемых атрибутами NAME и VALUE: в первом задается имя (идентификатор) значения, во втором – собственно его значение. Вспомогательный атрибут VALUETYPE служит для того, чтобы указать на тип данных, определенных в VALUE, минимизировав тем самым возможность возникновения ошибки в процессе обмена информацией между браузером и встроенной программой. Всего предусмотрено три типа данных:

• data – значение VALUE передается объекту как строка (принято по умолчанию)
• ref – указывает, что значение VALUE представляет собой URI с ресурсом (файлом), содержащим набор данных для объекту
• object – указывает, что VALUE ссылается на какой-либо иной объект в данном документе (который, в свою очередь, идентифицируется по атрибуту ID).

В том случае, если тип VALUETYPE соответствует «ref» (т.е. если в VALUE мы передаем ссылку на файл), то будет нелишним использовать еще один атрибут, который указывал бы на тип фала. Так, для примера выше, второй параметр следовало бы передавать так:

<param name "background" value="http://www.host.ru/img/bg01.gif" type="image/gif" valuetype="ref">

Поскольку элемент PARAM является пустым и, по сути, служит лишь «расширенным атрибутом» для другого элемента – APPLET или OBJECT, то никаких других собственных атрибутов у него нет, за исключением общего идентификатора ID.

Свойства PARAM

Закрывающий тег: нет.
Совместимость: все.
Вложение: недопустимо (пустой элемент).
Уникальный: нет.

Элемент APPLET

Частным случаем включения объекта является внедрение в HTML-документ Java-аплета. Поскольку исторически сложилось так, что именно апплеты Java были первыми внедряемыми в HTML объектами (еще со времен Netscape 2.0), то для них был определен специальный элемент – APPLET. Следует, однако, учитывать, что на сегодня этот элемент, со всеми своими атрибутами, является устаревшим.

В целом синтаксис элемента APPLET сходен с OBJECT:

<applet code="http://www.host.ru/applets/timer.class"> <param name="initial" value="01:00:00" valuetype="data"> <param name "background" value="http://www.host.ru/img/bg01.gif" valuetype="ref"> </applet>

Как видно, все различие в таком простейшем случае сводится к тому, что для указания расположения самого Java-аплета, вместо атрибута CLASSID используется атрибут CODE. Многие другие атрибуты достались современному элементу OBJECT «в наследство» от APPLET. К ним относятся CODEBASE, ARCHIVE и NAME. Кроме того, у APPLET имеются все те же атрибуты оформления, включая WIDTH, HEIGHT, ALIGN и др. (таблица 2.39).

Таблица 2.39 Атрибуты элемента APPLET

Атрибут	Примечание	Описание
id, class	Общие	Идентификаторы элемента
lang, dir	Общие	Информация о языке и направление текста
title, style	Общие	Определяют заголовок и стиль элемента
name	Отменен в XHTML 1.1	Идентификатор элемента. Аналогичен ID, используется для обеспечения совместимости
code	Обязательный, если нет object	Указывает URI Java-аплета
object	Обязательный, если нет code	Указывает URI Java-аплета. При использовании этого атрибута процедура start()	Java-аплета не будет задействована
archive	-	Определяет список файлов (URI, перечисленные через пробел), которые будут задействованы аплетом. Использование этого атрибута может ускорить загрузку и выполнение аплета
codebase	-	Указывает базовый URI для всех ссылок, указанных в code, object или archive. По умолчанию равен URI текущего документа
alt	-	Определяет текстовое сообщение, которое будет отображаться до тех пор, пока объект не прогрузится
align	Устаревший	Определяет выравнивание относительно окружающего блока текста. Может принимать значения bottom, middle, top, left, right
width, height	-	Определяют размер области аплета по горизонтали и вертикали соответственно
hspace, vspace	Устаревшие	Указывают величину отступа от рабочей области аплета до окружающего его текста в пикселях: hspace – слева и справа, vspace – сверху и снизу

Поскольку элемент APPLET используется исключительно для внедрения Java-программ, которые сами в состоянии выполнять любую работу по взаимодействию с пользователем, то никаких динамических атрибутов у него не имеется. Вообще же использовать APPLET следует только в том случае, если вам необходимо создать страницу, которая будет работать с устаревшими браузерами, не поддерживающими OBJECT (например, Netscape 4). Но даже в таком случае следует использовать деградацию OBJECT:

<object clsssid="timer.class"> <applet code="timer.class"> <p>У вас Java не работает :( </p> </applet> </object>

В этом случае современный браузер воспримет внешний элемент OBJECT и, соответственно, проигнорирует вложенный в него APPLET, а устаревшая программа просмотра наоборот, проигнорирует непонятный ей OBJECT и интерпретирует APPLET. Ну и, наконец, если браузер не поддерживает Java, то будет выведен пояснительный текст.

Свойства APPLET

Закрывающий тег: требуется.
Совместимость: все (но не может применяться в HTML 4.0 Strict и выше)
Вложение: недопустимо.
Уникальный: нет.

Элементы EMBED и BGSOUND

Если элемент APPLET является частным случаем OBJECT для Java-аплетов, то для всех остальных встраиваемых объектов во времена, предшествующие появлению HTML 4.0, использовали фирменный элемент EMBED. Подобно APPLET, он был введен в тот же Netscape 2.0, но для работы не с Java, а с подключаемыми модулями. В частности, EMBED применялся для внедрения в HTML мультимедийного содержания, например, видео:

<embed src="sample.mov" height="256" width="192"></embed>

Другой типичный пример использования EMBED в то время – это встраивание фоновой музыки:

<embed src="audio.mid" hidden autostart="true"></embed>

Здесь атрибут HIDDEN указывает на то, что визуально объект выводить не надо, а AUTOSTART, как можно догадаться, заставляет браузер начинать воспроизведение автоматически, не дожидаясь каких-либо действий со стороны пользователя.

Так же, как APPLET или IMG, элемент EMBED имеет набор атрибутов для оформления (WIDTH, HEIGHT, ALIGN, HSPACE, VSPACE), а так же атрибут NAME для идентификации элемента. Кроме них, у EMBED имеются такие атрибуты, как TYPE, определяющий тип данных внедренного объекта, а так же PLUGINSPAFE, указывающий на страницу, содержащую подключаемый модуль, необходимый для работы с данным объектом.

Если рассматривать другие варианты встраивания фоновой музыки, то можно упомянуть использование фирменного элемента BGSOUND, введенного Microsoft в браузер MSIE 2.0:

<bgsound src="audio.mid">

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

Свойства EMBED, BGSOUND

Закрывающий тег: EMBED – требуется, BGSOUND – нет.
Совместимость: EMBED – все, BGSOUND – MSIE, Opera. Эти элементы не должны применяться в действительных документах HTML/XHTML – используйте OBJECT.
Вложение: недопустимо.
Уникальный: EMBED – нет, BGSOUND – да.

Элементы AREA и MAP

Элементы AREA и MAP применяются для создания карт изображения на стороне клиента (т.е. обрабатываемых браузером). При этом элемент AREA определяет форму активных областей изображения, а MAP служит контейнером, содержащим набор описания активных областей, состоящих, в свою очередь, из элементов A или AREA:

<map name="map1"> <area href="1.html" alt="1" shape="rect" coords="0,0,100,50"> <area href="2.html" alt="2" shape="circle" coords="100,100,50"> </map>

В этом примере описывается карта «map1», состоящая из двух активных областей, одна из которых представляет собой прямоугольник, имеющий одну вершину в левом верхнем углу изображения, использующего данную карту, и другую вершину – со смещением в 100 пикселей вправо и 50 вниз. Вторая область – это окружность, с центром, смещенным на сто пикселей по горизонтали и сто по вертикали от левого верхнего угла изображения, и имеющая радиус в 50 пикселей. Фигуры этих областей и расстояния по отношению к границам рисунка проиллюстрированы на рис. 2.25.

Рис. 2.25. Координаты, на которые ссылаются элементы AREA. Границы рисунка выделены пунктиром

Раз уж у нас имеется карта, то давайте создадим рисунок, ссылающийся на данную карту при помощи элемента IMG с атрибутом USEMAP:

<img src="draw.png" alt="" usemap="#map1" />

ПРИМЕЧАНИЕ
Обратите внимание: в данном случае подразумевается, что рисунок и навигационная карта расположены в одном файле, о чем говорит URI карты изображении, равный «#map1».

Таким образом, мы получили HTML-документ с рисунком, две различные области которого являются ссылками на два разных файла. При этом браузеры Mozilla и MSIE выделят такой рисунок рамкой (разумеется, если значение BORDER не указано явно) – рис. 2.26.

Рис. 2.26. Рисунок, использующий навигационную карту

Что касается атрибутов, то элемент MAP имеет лишь один собственный атрибут – NAME, определяющий имя карты, на которое будут ссылаться использующие эту самую карту объекты. В то же время, для элемента AREA предусмотрен целый ряд специальных атрибутов, набор которых сходен с тем, что мы видели у ссылок. Все они перечислены в таблице 2.40.

Таблица 2.40 Атрибуты элемента AREA

Атрибут	Примечание	Описание
id, class	Общие	Идентификаторы элемента
title, style	Общие	Определяет заголовок и стиль элемента
shape	-	Определяет геометрическую фигуру активной области. Допустимые значения: default, rect, circle, poly (точка, прямоугольник, круг, произвольный многоугольник)
coords	Возможные значения зависят от типа фигуры	Определяет координаты активной области в пикселях. За точку отсчета (0,0) принимается верхний правый угол. Смещение по горизонтали – первое число, по вертикали – второе
href	-	Задает URI, на который ссылается определяемый регион
nohref	-	Указывает, что данный регион ссылкой не является
alt	Обязательный атрибут	Указывает текст, который должен быть показан в качестве ссылки, если браузер не может выводить изображения
target	-	Указывает имя окна (фрейма), в котором должен быть открыт документ, указанный в HREF
tabindex, accesskey	Оба атрибута не поддерживается Netscape 4, а accesskey – и Opera	Определяют порядок следования ссылок на карте (при использовании перехода между ними при помощи клавиатуры) и «горячую клавишу» для быстрого перехода к ссылке соответственно
onfocus, onblur	Общие	Определяют действие, которое должно произойти в момент получения и потерю той частью изображения, что является ссылкой, фокуса ввода
onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup	Общие	Определяют действие, которое должно быть выполнено в ответ на соответствующее действие пользователя

Остановимся подробнее на атрибутах SHAPE и COORDS, уже знакомых нам по элементу A. В случае использования этих атрибутов в паре с элементом AREA, по сути ничего не меняется: SHAPE все так же отвечает за тип области, а COORDS задает координаты. Допустимые значение атрибута COORDS зависят от того, какой тип области был указан в SHAPE:

• rect – левый x, верхний y, правый x, нижний y;
• circle – центр x, центр y, радиус;
• poly – набор пар x и y, описывающий каждую вершину многоугольника.

Рассмотрим использование данных параметров на практике, обратившись к листингу 2.37.

Листинг 2.37. Карта изображения

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"> <html> <head> <title>Карты изображений</title> </head> <body> <img src="comp.jpg" alt="Компьютер" border="0" usemap="#map1" /> <map name="map1"> <area href="computer.html" title="Системный блок" alt="" shape="rect" coords="18,32, 114,223" /> <area href="display.html" title="Монитор" alt="" shape="rect" coords="126,31, 305,179" /> <area href="mouse.html" title="Мышь" alt="" shape="circle" coords="211,247, 14" /> <area href="keyboard.html" title="Клавиатура" alt="" shape="poly" coords="144,197, 323,209, 308,234, 120,222" /> </map> </body> </html>

Здесь мы определили карту для изображения компьютера с монитором, мышью и клавиатурой, состоящую из 4 областей, 2 из которых являются прямоугольниками, одна – кругом, и еще одна – четырехугольным многоугольником. Каждая из областей соответствует объекту на фотографии (рис. 2.27).

Рис. 2.27. Изображение с картой. Границы областей проходят по контурам системного блока, обрамления монитора, по краям клавиатуры и вокруг центра мышки

Мы не случайно отметили, что атрибуты AREA сходны с атрибутами элемента A. И действительно, для создания карт изображений допустимо использовать любой из этих элементов. Так, такая же карта, построенная при помощи элементов A, будет выглядеть следующим образом:

<map name="map1"> <a href="computer.html" shape="rect" coords="18,32, 114,223">Системный блок</a> <a href="display.html" shape="rect" coords="126,31, 305,179">Монитор</a> <a href="mouse.html" shape="circle" coords="211,247, 14">Мышь</a> <a href="keyboard.html" shape="poly" coords="144,197, 323,209, 308,234, 120,222">Клавиатура</a> </map>

При этом содержимое, вложенное в контейнер MAP, будет отображаться в браузере (в данном случае под изображением будут выведены 4 ссылки), что, в целом, улучшает доступность страницы, например, для случая, если изображение по каким-либо причинам не может быть загружено. Более того, если для внедрения изображения используется не пустой элемент IMG, а контейнер OBJECT, то карту можно поместить в качестве его содержимого:

<object data="comp.jpg" type="image/jpeg" usemap="#map1" /> <map name="map1"> <a href="computer.html" shape="rect" coords="18,32, 114,223">Системный блок</a> ... </map> </object>

Однако проблема состоит в том, что такой синтаксис на данный момент поддерживается лишь в браузерах Opera, Chrome и Firefox 2.0 и выше, в то время как MSIE и ранние версии Mozilla игнорируют построенные с использованием элемента ссылок навигационные карты. Более того, если вы вложите карту в OBJECT, то Internet Explorer ее вообще проигнорирует, даже если она будет определена с использованием элементов AREA. Различные варианты связывания карт с рисунками и объектами можно посмотреть в файле imap2.html.

Свойства AREA и MAP

Закрывающий тег: AREA – нет, MAP – обязательно.
Совместимость: все.
Вложение: недопустимо.
Уникальный: нет.

Элемент MARQUEE

Хотя по своей сути элемент MARQUEE и не является объектом, набор его атрибутов, а также специфика применения вполне позволяют рассматривать его в таком контексте. В свое время этот элемент был ответом Microsoft на другое фирменное расширение – BLINK. Отличие состоит в том, что MARQUEE заставляет текст не мигать, а прокручиваться из стороны в сторону:

<marquee direction="left">Едем влево!</marquee>

В данном случае мы определили, что строка «Едем влево» должна двигаться слева направо. Впрочем, внутрь контейнера MARQUEE может быть помещен не только текст, но и любое другое содержимое, включая рисунки, таблицы и т.д.:

<marquee direction="up" behavior="alternate"> <img src="fox.jpg" width="120" height="150" /> <iframe src="fox.txt">Про лису</iframe> </marquee>

В данном же случае мы получаем блок, состоящий из рисунка и плавающего фрейма, который будет дергаться вверх-вниз. Такое поведение задано при помощи пары атрибутов – DIRECTION, определяющим направление и BEHAVIOR, отвечающим за тип перемещения. Эти и все оставшиеся атрибуты приведены в таблице 2.41.

Таблица 2.41 Атрибуты элемента MARQUEE

Атрибут	Примечание	Описание
id, class	Общие	Идентификаторы элемента
title, style	Общие	Определяют заголовок и стиль элемента
direction	-	Определяет направление перемещения. Допустимые значения: left, right, up и down, задающие перемещение слева направо, справа налево, снизу вверх и сверху вниз соответственно
behavior	Mozilla разных версий по-разному воспринимают behavior=slide	Определяет вид перемещения. Допустимые значения: slide (въехать и остановиться), scroll (прокручиваться подобно бегущей строке) и alternate (перемещаться между границами отведенной области)
loop	Кроме Mozilla	Определяет число повторений.
scrollamount, scrolldelay	-	Определяют число пикселей для перемещения за один такт и время такта в миллисекундах
bgcolor	-	Задает цвет фона
align	Только Mozilla	Определяет выравнивание внутри блока. Может принимать значения center, left, right
width, height	-	Определяют размер области, в которой будет происходить перемещение, по горизонтали и вертикали соответственно
onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup	Общие	Определяют действие, которое должно быть выполнено в ответ на соответствующее действие пользователя

Следует учитывать, что, поскольку MARQUEE не является стандартным элементом, то использовать его в действительных документах HTML лил XHTML нельзя. Кроме того, в поддержке его разными браузерами имеются некоторые различия. В то же время, в CSS уровня 3 было добавлено свойство marquee, позволяющее назначить подобное динамическое поведение элементам уровня блока. Проблема здесь кроется «всего лишь» в том, что CSS 3 толком не поддерживается даже в новых версиях MSIE. Так что решать, использовать или нет этот элемент – вам, при этом стоит принять во внимание, что, с одной стороны, динамические эффекты можно сделать при помощи сценариев, а с другой – что есть еще и смежные технологии, например Flash. Вариант с использованием JavaScript можно посмотреть в файле marquee_alt.html – эффект там получается недостижимый для MARQUEE.

Свойства MARQUEE

Закрывающий тег: требуется.
Совместимость: MSIE, Mozilla 1.4, Opera 6.
Вложение: недопустимо.
Уникальный: нет.

Элементы MULTICOL, LAYER и другие

В середине 1990-х годов, когда компания Netscape была лидером мирового «браузеростроемия», одним только элементом BLINK дело ограничиться не могло: каждая новая версия Netscape Navigator радовала создателей web-страниц целым рядом новых элементов. Некоторые из них (например, FRAME, SCRIPT или APPLET) позже вошли в стандарт HTML, другие, хотя в стандарт и не вошли, получили поддержку практически у всех других разработчиков (EMBED) или хотя бы у некоторых (BLINK, KEYGEN). Однако в 3-й и 4-й версиях браузеров были введены и такие элементы, от поддержки которых позже о каким-либо причинам отказались даже в самой Netscape. И хотя сейчас уже никто не будет делать страницы, рассчитанные на старые версии Netscape Navigator, отдадим дань истории и рассмотрим наиболее интересные элементы, которые вы, возможно, когда-либо встречали, просматривая давно написанный код HTML.

Начнем с MULTICOL. Этот весьма полезный элемент был предложен в третьей версии браузера Netscape, и исчез в шестой. При помощи MULTICOL можно задать разбивку текста на несколько колонок – как в газете:

<multicol cols="2">Текст, который будет разбит на две колонки.</multicol>

Здесь мы задали оформление, при котором весь помещенный в контейнер текст будет разделен на две колонки. За число колонок, как видно, отвечает атрибут COLS. Кроме него, у этого элемента имеются еще 2 собственных атрибута. Это GUTTER, отвечающий за ширину промежутка между столбцами, и WIDTH, задающий ширину столбца (все созданные при помощи MULTICOL столбцы получаются равной ширины).

ПРИМЕЧАНИЕ
В Mozilla 1.8 поддержка колонок появилась вновь, но уже на качественно новом уровне – с использованием свойства columns CSS уровня 3. Кстати, в апреле 2011 года «CSS Multi-column Layout Module» получил статус Candidate Recommendation, т. е. работа над ним фактически завершена.

Другой, гораздо более известный и широко применявшийся в свое время элемент – LAYER («слой»), был призван решить проблемы динамического изменения страниц и предоставить более широкие возможности дизайна:

<layer id="Layer1" width="200" top="50" left="100" background="bg.gif"> Содержимое слоя </layer>

Таким кодом создается слой шириной 200 пикселей, расположенный со смещением 50 пикселей сверху и 100 слева, и с собственным фоновым рисунком. По своей сути LAYER является эквивалентом современного элемента DIV, использованного в паре со стилями:

<div id="Layer1" style="width: 200px; top: 50px; left: 100px; background: url(‘bg.gif’);"> Содержимое слоя </div>

Единственная уникальная особенность элемента LAYER – это возможность быть контейнером для другого документа, подобно IFRAME:

<layer src="file.html"></layer>

Помимо самого LAYER, существовали еще родственные ему элементы ILAYER и NOLAYER, причем первый предназначался для вкладывания в родительский слой (оставляясь, по сути, калькой самого LAYER, а потому практически не применялся), а второй был введен для совместимости, дабы можно было определить код на случай, если слои не поддерживаются.

СОВЕТ
Старайтесь избегать использования патентованных элементов, подобных BLINK, MARQUEE, LAYER и MULTICOL: всегда можно добиться такого же, или даже лучшего результата, применяя лишь одобренные в спецификациях HTML или XHTML элементы и комбинируя их со стилями и (или) сценариями.

Свойства LAYER И MULTICOL

Закрывающий тег: требуется.
Совместимость: MULTICOL – только Netscape 3 и 4, LAYER – Только Netscape 4.
Вложение: MULTICOL – недопустимо, LAYER – допустимо.
Уникальный: нет.

2011-06-05 // Есть вопросы, предложения, замечания? Вы можете обсудить это на форуме !

« Формы в HTML | Стили и сценарии »