Карты – изображения

В последнее время многие Web – страницы для организации ссылок используют так называемые карты изображения. Реализация этой возможности предусмотрена языком НТМL и позволяет привязать гипертекстовые ссылки к различным областям изображения. Такой подход нагляднее, чем применение обыкновенных текстовых связей, поскольку пользователь может не читать словесное описание связи, а сразу понять её смысл по графическому образу.

Карта- изображение фактически представляет собой обычное встроенное графическое изображение на Web – странице. Эти изображения могут иметь

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

Концепция карты-изображения на Web-страницах может быть реализована в двух различных вариантах — серверный вариант (server-side imagemap) и клиентский вариант (client-side imagemap). Последнее название часто используют в виде аббревиатуры CSIM. Исторически первым появился и получил распространение серверный вариант карт-изображений, который впервые был реализован в браузере Mosaic. Серверный вариант позволяли использовать первые версии всех трех ведущих браузеров. Серверный вариант может быть реализован в двух различных форматах, которые получили свое наименование по названиям организаций-разработчиков — NCSA и CERN.

В последнее время все большее развитие получает клиентский вариант, который впервые был реализован в браузере Microsoft Internet Explorer. Начиная с версии 2.0, этот вариант также поддерживает браузер Netscape. Данный вариант имеет свои неоспоримые преимущества и становится все более популярным /5/.

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

<IMG SRC="url" USEMAP="url#map_name">

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

Рассмотрим синтаксис определения карты изображения:

<MAP NAME="map_name">

<AREA [SHAPE=" shape "] COORDS="x,y,..." [HREF=" reference "]

[NOHREF]>

</MAP>

где

<MAP NAME="map_name"> - данный тэг определяет начало описания карты с именем map_name.

<AREA...> - описывает участок изображения и ставит ему в соответствие URL. Параметры:

SHAPE - необязательный параметр, указывающий на форму определяемой области изображения. Может принимать значения:

default - по умолчанию (обычно прямоугольник);

rect – прямоугольник;

circle – круг;

poly - многоугольник произвольной формы.

COORDS - координаты в пикселях описываемой области. Для прямоугольника это четыре координаты левого верхнего и правого нижнего углов, для круга - три координаты (две - центр круга, третья - радиус). Для многоугольника это описание каждого угла в двух координатах -соответственно число координат равно удвоенному количеству углов.

Координаты считаются с нуля, поэтому для описания области 100 на 100 используется описание:

<AREA COORDS="0,0,99,99"...>

HREF="url" - описание ссылки, действия по которой будут выполняться при щелчке мыши в заданной области.

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

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

</MAP> - данный тэг завершает описание карты изображения.

Формы

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

Некоторые WWW-browser-ы позволяют пользователю, заполнив специальную форму, возвращающую полученное значение, выполнять некоторые действия на вашем WWW-сервере. Когда форма интерпретируется Web-браузером, создается специальные экранные элементы, такие, как поля ввода, checkboxes, radiobuttons, выпадающие меню, скроллируемые списки, кнопки. Когда пользователь заполняет форму и нажимает кнопку "Подтверждение" (SUBMIT - специальный тип кнопки, который задается при описании документа), информация, введена пользователем в форму, посылается HTTP-серверу для обработки и передаче другим программам, работающим под сервером, в соответствии с CGI (Common Gateway Interface) интерфейсом.

Формы передают информацию программам-обработчикам в виде пар [имя переменной]=[значение переменной]. Имена переменных следует задавать латинскими буквами.

Значения переменных воспринимаются обработчиками как строки, даже если они содержат только цифры.

Форма открывается тэгом <FORM> и заканчивается меткой </FORM>. HTML-документ может содержать в себе несколько форм, однако формы не должны находиться одна внутри другой.

Тэг <FORM> может содержать три атрибута, один из которых является обязательным:

ACTION: Обязательный атрибут. Определяет, где находится обработчик формы.

METHOD: Определяет, каким образом (иначе говоря, с помощью какого метода протокола передачи гипертекстов) данные из формы будут переданы обработчику. Допустимые значения: METHOD=POST и METHOD=GET. Если значение атрибута не установлено, по умолчанию предполагается METHOD=GET.

GET: методом "get" HTTP браузер берёт значение action, добавляет “?” к нему, затем присоединяет набор данных формы, кодированный с использованием типа содержимого "application/x-www-form-urlencoded". Затем перенаправляет всё по гиперссылке на этот URL. В этом сценарии данные формы ограничены кодами ASCII (нельзя использовать спецсимволы) и имеют весьма жесткие ограничения на объем вводимой информации.

POST: методом "post" HTTP браузер проводит транзакцию HTTP "post" (в теле HTTP-запроса), используя значение атрибута action и сообщение, созданное в соответствии с типом содержимого, определённым атрибутом enctype.

ENCTYPE: Определяет, каким образом данные из формы будут закодированы для передачи обработчику. Если значение атрибута не установлено, по умолчанию предполагается ENCTYPE=application/x-www-form-urlencoded. "Кнопка", чтобы запустить процесс передачи данных из формы на сервер, создается с помощью тэга.

<INPUT TYPE=submit>

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

Надпись на кнопке можно задать любую путем введения атрибута VALUE="[Надпись]".

Пример:

<INPUT TYPE=submit VALUE="Отправить!">

Надпись, нанесенную на кнопку, можно при необходимости передать обработчику путем введения в определение кнопки атрибута NAME=[имя].

Пример:

<INPUT TYPE=submit NAME=button VALUE="Отправить!">

При нажатии на такую кнопку обработчик вместе со всеми остальными данными получит и переменную button со значением Отправить! (т.е. button=Отправить!, это можно видеть в адресной строке).

В форме может быть несколько кнопок типа submit с различными именами и/или значениями. Обработчик, таким образом, может действовать

по-разному в зависимости от того, какую именно кнопку submit нажал пользователь.

Существуют и другие типы элементов <INPUT>. Каждый элемент <INPUT> должен включать атрибут NAME=[имя], определяющий имя переменной, которая будет передана обработчику. Имя должно задаваться только латинскими буквами. Большинство элементов <INPUT> должны включать атрибут VALUE="[значение]", определяющий значение, которое будет передано обработчику под этим именем.

Основные типы элементов <INPUT>: TYPE=text

Определяет окно для ввода строки текста. Может содержать дополнительные атрибуты SIZE=[число] (ширина поля для ввода, в символах) и MAXLENGTH=[число] (максимально допустимая длина вводимой строки в символах).

Пример:

<INPUT TYPE=text SIZE=30 NAME=student VALUE="Вася">

Определяет ширину поля в 30 символов, для ввода текста. По умолчанию в окне находится текст, который пользователь может редактировать. Отредактированный (или неотредактированный) текст передается обработчику в переменной student (student=содержимое_поля). Необходимо попробовать отредактировать поле.

TYPE=password. Определяет окно для ввода пароля. Абсолютно аналогичен типу text, только вместо символов вводимого текста показывает на экране звездочки (*), чтобы посторонний не мог прочесть.

Пример:

<INPUT TYPE=password NAME=pswd SIZE=20 MAXLENGTH=10>

Определяет окно шириной 20 символов для ввода пароля. Максимально допустимая длина пароля — 10 символов. Введенный пароль передается обработчику в переменной pswd (pswd=содержимое_поля). Необходимо попытаться ввести информацию в поле.

TYPE=radio. Определяет радиокнопку. Может содержать дополнительный атрибут checked (показывает, что кнопка помечена). В группе радиокнопок с одинаковыми именами может быть только одна помеченная радиокнопка.

Пример:

<INPUT TYPE=radio NAME=modem VALUE="9600" checked> 9600

Бит/с

<INPUT TYPE=radio NAME=modem VALUE="14400"> 14400 бит/с

<INPUT TYPE=radio NAME=modem VALUE="28800"> 28800 бит/с

Определяет группу из трех радиокнопок, подписанных 9600 бит/с, 14400 бит/с и 28800 бит/с. Первоначально помечена первая из кнопок. Если пользователь не отметит другую кнопку, обработчику будет передана переменная modem со значением 9600 (modem=9600). Если пользователь отметит вторую кнопку, обработчику будет передана переменная modem со значением 14400 (modem=14400).

TYPE=checkbox

Определяет квадрат, в котором можно сделать пометку. Может содержать дополнительный атрибут checked (показывает, что квадрат помечен). В отличие от радиокнопок, в группе квадратов с одинаковыми именами может быть несколько помеченных квадратов.

Пример:

<INPUT TYPE=checkbox NAME=comp VALUE="PC">