Порядок перехода по гиперссылкам

Гиперссылка в пределах html страницы

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

Чтобы построить ссылку на область внутри текущей страницы, надо дать этой области название при помощи атрибута NAME тэга<A>. Имя должно содержать только буквы и цифры.

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

Пример:

HTML-код: <a href="#Начало страницы">Наверх страницы</a> В то место, куда надо сделать переход надо вставить: <a name="Начало страницы"></a>

Отображение в браузере: Наверх страницы

Почтовая гиперссылка

Создавая ссылку на адрес электронной почты, вы должны указать адрес e-mail. Следует позаботиться о том, чтобы пользователю было ясно, кому он собирается отослать сообщение.

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

Пример:

HTML-код: <a href="mailto:admin@on-line-teaching.com?subject=Письмо автору" title="Письмо автору с сайта www.on-line-teaching.com">admin@on-line-teaching.com</a>

Отображение в браузере: admin@on-line-teaching.com

Открытие html страниц в новом окне

При помощи атрибута TARGET можно загрузить страницу в новом окне браузера. Этот атрибут предназначен для задания наименования окна. Имя окна используется в служебных целях. Чтобы открыть страницу в новом окне надо использовать константу _blank.

Пример:

HTML-код: <a href="../index.html" target="_blank"">Ссылка на главную страницу сайта</a>

Отображение в браузере: Ссылка на главную страницу сайта

Цвет текста гиперссылок

Атрибуты LINK, ALINK, VLINK задают цвет шрифта гиперссылок.

Атрибут LINK служит для выделения гиперссылок, которые еще не посещались пользователем.

Атрибут VLINK - уже посещенные ссылки.

Атрибут ALINK - выделяет активную гиперссылку.

Порядок перехода по гиперссылкам

Некоторые браузеры могут поддерживать функцию перехода по гиперссылкам с помощью клавиши Tab. При этом браузер по умолчанию подсвечивает гиперссылки в порядке их следования в тексте страницы. Изменить порядок перехода можно с помощью атрибута TABINDEX тэга <A>. Чтобы включить гиперссылку в перечень, описывающий новый порядок перехода, надо присвоить атрибуту TABINDEX некоторое целое положительное число в диапазоне от 1 до 32767. Чтобы исключить гиперссылку из перечня, надо присвоить атрибуту любое отрицательное число. Когда пользователь нажимает клавишу TAB, курсор перемещается к гиперссылке с наименьшим положительным значением индекса. Если нескольким гиперссылкам присвоено одинаковое значение индекса, первой выбранной окажется та, которая в тексте страницы стоит выше.

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

Билет 7 Способы встраивания графики и мультимедиа в HTML-документ

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

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

До появления HTML 4 различные фирмы-производители браузеров предлагали свои расширения. Так, Microsoft для включения в документ видеоклипов AVI предлагала атрибут DYNSRC для элемента IMG. Netscape еще в версии 1.2 своего браузера ввела в обиход элемент APPLET (для включения апплетов Java), а в 2.0 – EMBED (для взаимодействия с неподдерживаемыми самим браузером типами файлов через подключаемые модули). В 3-й версии InternetExplorer также появилась поддержка элемента 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, определяющих расположение рисунка и альтернативное (текстовое) описание соответственно:

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

ВНИМАНИЕ

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

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

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

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

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

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

<imgsrc="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, отвечающий за выравнивание рисунка по тому или иному краю страницы:

<imgsrc="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 может использоваться для взаимодействия с иными объектами, например, документами AdobeAcrobat, видеоклипами, или графическими изображениями в различных форматах. При этом задействуются дополнительные программы – подключаемые модули (Plug-ins).

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

ВНИМАНИЕ

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

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

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

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

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

Солнце – рисуют дети

</object>

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

ПРИМЕЧАНИЕ

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

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

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

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

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

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

</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 Указывает, что должна быть использована серверная карта объекта

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:

Впрочем, иногда встречаются и такие случаи, когда 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>

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

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

data – значение VALUE передается объекту как строка (принято по умолчанию)

ref – указывает, что значение VALUE представляет собой URI с ресурсом (файлом), содержащим набор данных для объекту

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

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

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

Свойства PARAM

Закрывающий тег: нет.

Совместимость: все.

Вложение: недопустимо (пустой элемент).

Уникальный: нет.

Элемент APPLET

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

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

</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 - Определяет текстовое сообщение, которое будет отображаться до тех пор, пока объект не прогрузится

width, height - Определяют размер области аплета по горизонтали и вертикали соответственно

hspace, vspace Устаревшие Указывают величину отступа от рабочей области аплета до окружающего его текста в пикселях: hspace – слева и справа, vspace – сверху и снизу

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

<objectclsssid="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 в то время – это встраивание фоновой музыки:

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

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

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

<bgsoundsrc="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>

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

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

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

<imgsrc="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 Общие Определяют действие, которое должно произойти в момент получения и потерю той частью изображения, что является ссылкой, фокуса ввода

Остановимся подробнее на атрибутах 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>

<imgsrc="comp.jpg" alt="Компьютер" border="0" usemap="#map1" />

</map>

</body>

</html>

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

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

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

<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="keyboard.html" shape="poly" coords="144,197, 323,209, 308,234, 120,222">Клавиатура</a>

</map>

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

<a href="computer.html" shape="rect" coords="18,32, 114,223">Системныйблок</a>

...

</map>

</object>

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

Свойства AREA и MAP

Закрывающий тег: AREA – нет, MAP – обязательно.

Совместимость: все.

Вложение: недопустимо.

Уникальный: нет.

Элемент MARQUEE

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

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

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

<imgsrc="fox.jpg" width="120" height="150" />

<iframesrc="fox.txt">Пролису</iframe>

</marquee>

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

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

Атрибут Примечание Описание

id, class Общие Идентификаторы элемента

title, style Общие Определяют заголовок и стиль элемента

direction - Определяет направление перемещения. Допустимые значения: left, right, up и down, задающие п

Порядок перехода по гиперссылкам

Поиск по сайту