Изображения, реагирующие на мышь

Обычно изображение, помещенное в якорь, становится просто частью содержимого якоря. Броузер может как-то по-особенному представить такое изображение, чаще всего с помощью специальной рамки, предупреждая читателя, что с ним связана гиперссылка, но пользователи щелкают мышью на картинке так же, как на текстовой гиперссылке. Стандарты HTML и XHTML предоставляют возможность разместить несколько ссылок над одним изображением. Щелчок мышью в разных местах объекта вызывает переход броузера к различным документам.

Такие изображения, известные как карты, открывают широкий простор для творчества.
Существуют два типа карт: серверная карта и клиентская карта. Первый тип используется, когда применяется атрибут ismap тега , и требует доступа к серверу и программным приложениям на нем, отрабатывающим информацию, связанную с картой. Другой способ за-пускается при включении в тег атрибута usemap и применении тегов и .

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


Любой HTML/XHTML-код может реализовать клиентскую карту (usemap).

Серверные карты
Изображение вставляется в якорь просто помещением тега в тело тега (a). В карту такое вложенное изображение превращается при добавлении в тег атрибута ismap. Этот атрибут сообщает броузеру, что изображение представляет собой карту, содержащую более чем одну ссылку. (Броузер игнорирует атрибут ismap, если тег не вложен в тег a.)

Когда пользователь щелкает мышью где-то на изображении, броузер передает координаты указателя мыши по URL, указанному в теге (a), серверу документа. Сервер рассматривает координаты указателя мыши, чтобы решить, какой документ отправить броузеру в ответ.

При использовании атрибута ismap атрибут href соответствующего тега (a) должен содержать URL приложения на сервере или для некоторых HTTP-серверов ассоциированный с картой файл, содержащий информацию о координатах и ссылках. Если в href указан URL обычного документа, результатом может быть ошибка и нужный документ, вероятнее всего, не будет получен.

Координаты положения мыши представляют собой измеренные в пикселах расстояния, отсчитанные от левого верхнего угла изображения, принимаемого за (0, 0).


Координаты дописываются в конец URL после вопросительного знака.

К примеру, если пользователь щелкнул мышью на 43 пиксела правее и на 15 пикселов ниже верхнего левого угла изображения, представляющего следующую гиперссылку:

(a href="/cgi-bin/imagemap/toolbar.map")
(/a)
броузер пошлет HTTP-серверу такие параметры поиска:

/cgi-bin/imagemap/toolbar.map?43,15

В приведенном примере toolbar.map – это специальный файл карты в каталоге cgi-bin/imagemap, содержащий связь между координатами и ссылками. Специальный процесс обработки карты применяет этот файл, чтобы узнать, какой гиперссылке соответствуют переданныекоординаты (в нашем случае (43, 15)), и вернуть соответствующий документ.

Что происходит на сервере
При обработке карты, запущенной с использованием атрибута ismap, броузер должен только передать серверу URL с присоединенными к нему координатами мыши. Сервер преобразует эти координаты в определенный документ. Процесс такого преобразования различается от сервера к серверу и не определяется стандартами HTML или XHTML.
Вам необходимо проконсультироваться с администратором сервера и, возможно, даже прочитать документацию вашего сервера, чтобы узнать, как создать и запрограммировать серверную карту.


Большинство серверов имеют программную утилиту, расположенную обычно в каталоге cgi-bin/imagemap и предназначенную для обработки карт. И большинство из них используют текстовые файлы, содержащие области карты и ассоциированные с этими областями ссылки. К этому файлу и обращается URL в соответствующем теге (a) за информацией, необходимой для обработки запроса, поступившего от карты.

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

# Imagemap file=toolbar.map
default dflt.html
circ 100,30,50 link1.html
rect 180,120,290,500 link2.html
poly 80,80,90,72,160,90 link3.html

Каждая чувствительная область карты описана названием геометрической фигуры и определяющими ее координатами в пикселах. Это окружность, ее центр и радиус; прямоугольник с координатами верхнего левого и правого нижнего углов; многоугольник c координатами вершин. Все координаты откладываются от верхнего левого угла изображения (0, 0). Каждой области соответствует свой URL.

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


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

Это только один пример того, как может обрабатываться карта и как при этом применяются вспомогательные файлы. Обратитесь к своему веб-мастеру и документации по серверу, чтобы узнать, как реализовать карту со стороны сервера для документов на вашей системе.

Клиентские карты
Недостаток карт со стороны сервера заключается, очевидно, в том, что для них необходим сервер. Это означает, что нужен доступ к HTTP-серверу или его каталогу /cgi-bin, а такими правами обычно обладают только владельцы и системные администраторы. Вдобавок карты, обрабатываемые со стороны сервера, ограничивают переносимость, так как не все программы, обслуживающие карты, работают одинаково.

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


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

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

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

Для создания карты со стороны клиента включите в тег атрибут usemap. Его значением должен быть URL сегмента в HTML- или XHTML-документе, содержащий координаты на карте и соответствующие URL гиперссылок. Часть URL, указывающая на документ, сообщает, где содержится описание карты. Идентификатор фрагмента в URL
сообщает, какое из описаний должно быть использовано. Чаще всего описание карты содержится в том же документе, где и само изображение, и URL сводится к идентификатору фрагмента – значку решетки (#), за которым следует имя -сегмента.

К примеру, следующий фрагмент исходного документа сообщает броузеру, что изображение map.gif – это карта со стороны клиента и что координаты чувствительных областей и соответствующее URL содержатся в -фрагменте текущего документа:

6.5.3. Тег

Чтобы клиентская карта заработала, необходимо где-то в документе поместить информацию, определяющую чувствительные области изображения и гиперссылки, которые должны быть загружены по щелчку мыши (или в результате иных действий пользователя)1 в каждой из этих областей. Включите эту информацию в значения атрибутов традиционных тегов (a) или специальных . Набор спецификаций
или тегов (a) заключается между тегом и его закрывающим . При этом сегмент может быть размещен где угодно в пределах тела документа.Точнее говоря, тег может содержать либо последовательность тегов , либо традиционное HTML/XHTML-содержимое, включая теги (a). Нельзя смешивать теги с традиционным содержимым.

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

Если вы все же помещаете теги (a) в тег , они должны содержать атрибуты coords и shape, определяющие области в объектах, на которые ссылается .

Атрибут name
Значение атрибута name в теге – это то имя, которое применяет атрибут usemap в тегах и , указывая на место, где расположено описание карты. Такое имя должно быть уникальным и не использоваться никаким другим в этом же документе, но ссылаться на один -сегмент могут несколько карт.

Атрибуты class, dir, id, lang и style
Стилевые атрибуты class и style тега , которые имеют отношение к представлению данных на экране, полезны только тогда, когда тег определяет обычное содержимое. В этом случае они применяются ко всему содержимому.

Зато атрибуты id и title просты и понятны. Это стандартные атрибуты, позволяющие пометить тег для последующего указания на него с помощью гиперссылки или программы и соответственно озаглавить раздел для последующей ссылки на него.

Атрибуты событий
Разнообразные атрибуты событий позволяют вам указывать Java-Script-обработчики для событий, которые могут произойти в пределах карты.

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

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

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

Атрибут coords
Обязательный для тега атрибут coords определяет на клиентской карте координаты точек, входящих в чувствительную область. Число координат и их смысл зависят от формы области, которую задает атрибут shape, обсуждаемый ниже в этой главе. Можно определить области как прямоугольники, круги и многоугольники. Ниже приведены значения координат, свойственные каждой форме.

circle (круг) или circ
coords = «x, y, r», где x и y определяют положение центра круга(0,0 – верхний левый угол изображения), а r – его радиус в пикселах.
polygon (многоугольник) или poly
coords = «x1, y1, x2, y2, …», где каждая пара координат x, y задает вершину многоугольника, а 0,0 – левый верхний угол изображения. По меньшей мере три пары координат требуются, чтобы определить треугольник, многоугольники более высокого порядка определяются большим числом пар координат. Многоугольник является замкнутой фигурой, следовательно, нет необходимости повторять в конце списка координаты первой вершины.

rectangle (прямоугольник) или rect
coords = «x1, y1, x2, y2», где первая пара координат соответствует одному углу прямоугольника, а вторая – противоположному по диагонали, и 0,0 – левый верхний угол изображения. Заметьте, что прямоугольник – это просто сокращенная запись многоугольника с четырьмя вершинами.

К примеру, следующий XHTML-фрагмент определяет одну чувствительную область в правой нижней четверти изображения 100×100 и вторую круговую в самом его центре:





Если точка принадлежит двум областям, определенным тегами , приоритет имеет первый по порядку тег. Броузеры игнорируют координаты, выходящие за пределы изображения.

Атрибут href
Подобно атрибуту href для тега (a), атрибут href для тега определяет URL гиперссылки, переход по которой происходит при щелчке на соответствующей чувствительной области. Значением атрибута href может служить любой допустимый URL, относительный или абсолютный, включая код JavaScript.

В частности, броузер загрузит и отобразит документ link4.html, если пользователь щелкнет в левой нижней четверти изображения размером 100×100 пикселов, как это предписано первым тегом в следующем примере HTML:



Второй тег применяет JavaScript URL, и когда пользователь щелкнет на левом верхнем квадрате карты, он выполнит метод Java-Script, который выведет в диалоговое окно глупое сообщение.

Атрибут nohref
Атрибут nohref для тега определяет чувствительную область изображения, для которой не производится никакого действия, даже если пользователь ее выбрал. В каждый тег должен быть включен либо атрибут href, либо nohref.

Атрибуты notab, taborder и tabindex
Альтернативой работы с мышью является переход по горячим точкам документа, таким как включенные в карту гиперссылки, при помощи клавиши . Выбранную гиперссылку пользователь активизирует, нажав клавишу . По умолчанию броузер перешагивает с одного активного элемента на другой в том порядке, в каком они появляются в документе. При помощи родившегося в Internet Explorer атрибута taborder, теперь включенного в стандарт в виде атрибута tabindex, можно изменить этот порядок. Значение данного атрибута – целое число, указывающее позицию этого элемента в общей последовательности переходов для текущего документа.

Поддерживаемый только Internet Explorer и не являющийся частью стандартов HTML 4 и XHTML атрибут notab отмечает области, которые должны пропускаться, когда читатель нажимает на клавишу , перемещая курсор по документу. В противном случае эта область была бы частью последовательности переходов. Атрибут полезен, разумеется, в комбинации с атрибутом nohref.

Атрибуты notab и taborder поддерживались Internet Explorer версии 4.

Броузер Internet Explorer версии 5 и более поздних поддерживает так-же tabindex, поэтому вам следует пользоваться стандартными атрибутами, а не расширениями.

Атрибуты событий
С клиентской картой работают те же обработчики событий JavaScript, что и с тегом гиперссылки (a). Значением атрибута обработчика событий служит заключенная в кавычки последовательность разделяемых точками с запятой выражений, методов и вызовов функций Java-Script, которая исполняется, когда наступает соответствующее событие.

Популярное, хотя и простое, использование события onMouseOver – это вывод в строке состояния броузера пространного объяснения, когда пользователь попадает указателем мыши в соответствующую область на карте.

onMouseOver="self.status='

Рецепт супа из кумкватов.';return true">
Следует указать, что современные версии популярных броузеров автоматически отображают строку-значение атрибута alt, выполняя ту же функцию. Так что стоит вместо колдовства с JavaScript включать в тег атрибут alt с его значением. И в полном соответствии с текстовыми гиперссылками содержимое тега должно само объяснять ссылку. Однако изображения могут быть обманчиво ясными, поэтому мы настаиваем,
что следует использовать все возможности, включая атрибут alt и обработчики событий, чтобы снабдить ваши карты текстовыми пояснениями.

Атрибут shape
Используйте атрибут shape для определения формы чувствительной области на карте – круга (circ или circle), многоугольника (poly или polygon), прямоугольника (rect или rectangle).
Значение атрибута shape влияет на то, как броузер интерпретирует значение атрибута coords. Если вы не включили в тег shape, принимается значение default. В соответствии со стандартом default означает, что область покрывает все изображение. На практике по умолчанию броузеры ожидают прямоугольник и рассчитывают получить четыре
значения coords. И если вы не определили форму области и не включили в тег четырех координат, броузер игнорирует ее полностью.

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

Netscape 4, например, не признает «rectangle», зато понимает, что «rect» имеет прямоугольную форму. Поэтому мы советуем использовать сокращенные имена.

Атрибут target
Атрибут target позволяет указать, куда отображать содержимое документа-цели гиперссылки. Этот атрибут используется обычно с фреймами или в многооконном режиме. Значением данного атрибута служит имя фрейма или окна, в которые должно быть загружено содержимое документа, на который указывает ссылка. Если фрейм или окно с таким именем существуют, документ загружается в них. Если же нет, создается новое окно под указанным в атрибуте именем, и документ загружается в него.

Атрибут title
Атрибут title позволяет определять название документа, на который направлена гиперссылка. Значением атрибута может служить любая строка, заключенная в кавычки. Броузер подчас использует ее при отображении гиперссылки, например высвечивая название документа-цели (в виде всплывающей подсказки), когда на ссылку попадает
мышь. Броузер может применять атрибут title и при добавлении ссылки в закладки или избранное.

Атрибут title особенно удобен при ссылках на ресурсы, не имеющие собственного названия, на изображения или отличные от HTML документы. К примеру, броузер может включить следующее название в состав представляемого материала, без которого изображение на странице осталось бы немым:

(a href="pics/kumquat.gif"
title=" Фотография Благородного Фрукта")

В идеале значение атрибута title должно совпадать с названием документа, на который указывает ссылка, но это необязательно.

Атрибуты class, dir, id, lang и style
Атрибуты class и style позволяют определить свойства отображения и имена классов для управления внешним видом чувствительной области, хотя их ценность для этого тега представляется ограниченной.

Атрибут id служит для того, чтобы стандартным способом пометить содержимое тега для позднейших ссылок.

Атрибуты lang и dir обозначают язык, применяемый для этой области, и направление, в котором он выводится. Способ их использования с этим тегом также неясен.

Пример клиентской карты
Следующий фрагмент HTML-текста сводит вместе обсуждавшиеся выше в этом разделе различные компоненты карты, обрабатываемой со стороны клиента. Пример включает в себя тег со ссылкой на содержащий картинку файл и с атрибутом usemap, значение которого указывает -сегмент, где определены четыре (три явно и одна по умолчанию) чувствительные области и соответствующие гиперссылки:

(body)
...

...
href="k_juice.html"
onMouseOver="self.status='How to prepare kumquat juice.'
;return true"> href="k_soup.html"
onMouseOver="self.status='A recipe for hearty kumquat soup.'
;return true"> href="k_fruit.html"
onMouseOver="self.status='Care and handling of the native kumquat.'
;return true"> href="javascript:window.alert('Choose the cup or one of the bowls.')"
onMouseOver="self.status='Select the cup or a bowl for more
information.'
;return true"> (/map)

Учет особенностей других броузеров
В отличие от его серверного (ismap) аналога, тег клиентской карты () не обязан входить в тег (a). Но может, а это позволяет изящно обслужить броузеры, которые не умеют обрабатывать карты со стороны клиента.

К примеру, если пользователь щелкнет на изображении map.gif, старый броузер Mosaic и ранние версии Netscape просто загрузят документ main.html. Современные броузеры, с другой стороны, разделят изображение на чувствительные области, определенные в ассоциированном -сегменте, и исполнят гиперссылки на уникальную для каждой области часть документа main.html.

(a href="main.html")
(/a)
...
(area coords="0,0,49,49" href="main.html#link1")
(area coords="50,0,99,49" href="main.html#link2")
(area coords="0,50,49,99" href="main.html#link3")
(area coords="50,50,99,99" href="main.html#link4")


Чтобы сделать карту совместимой с предшествующими версиями броузеров, можно одновременно включить ее обработку как со стороны сервера, так и со стороны клиента. Те броузеры, которые это умеют, предпочтут более быстрое обслуживание со стороны клиента. Все другие проигнорируют атрибут usemap в теге и воспользуются указанным в ссылке обработчиком со стороны сервера, чтобы удовлетворить выбор читателя традиционным способом. К примеру:

(a href="/cgi-bin/images/map.proc")

(/a)
...
(area coords="0,0,49,49" href="link1.html")
(area coords="50,0,99,49" href="link2.html")
(area coords="0,50,49,99" href="link3.html")
(area coords="50,50,99,99" href="link4.html")


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

Визуальная природа карт вместе с потребностью в эффективном интерфейсе подразумевают, что вам необходимо всерьез подумать о привлечении художника, разработчика пользовательских интерфейсов и даже эксперта по психологии, чтобы оценить такое произведение искусства. По меньшей мере, предложите кому-нибудь протестировать плоды вашего творчества в надежде узнать, догадываются ли люди,
какую область изображения следует выбрать, чтобы получить нужный документ. Убедитесь, что чувствительные области изображения, употребляя согласованную систему визуальных приемов, объясняют пользователю свое назначение. Рассмотрите возможность применения рамок, отбрасываемой тени или выделения цветом для индикации областей, которые могут быть кем-то выбраны.

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

Оцените статью: (0 голосов)
0 5 0

Статьи из раздела HTML на эту тему:
Отношения
Поддержка автоматической обработки и создания документов
Создание поисковых документов
Эффективное применение гиперссылок

Вернуться в раздел: HTML / 6. Гиперссылки и Сети