Содержание

Тег | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
4.0+1.0+2.0+1.0+1.0+1.0+1.0+

Спецификация

HTML:3.24.015.0XHTML:1.01.1

Описание

Каждый элемент <area> определяет активные области изображения, которые являются ссылками. Рисунок с привязанными к нему активными областями называется в совокупности картой-изображением. Такая карта по внешнему виду ничем не отличается от обычного изображения, но при этом оно может быть разбито на невидимые зоны разной формы, где каждая из областей служит ссылкой. Тег <area> задает форму области, ее размеры, устанавливает адрес документа, на который следует сделать ссылку, а также имя окна или фрейма, куда браузер будет загружать документ. Этот тег всегда располагается в контейнере <map>, который связывает координаты областей с изображением.

Несколько областей могут перекрывать друг друга, сверху будет та, которая в коде HTML располагается выше.

Синтаксис

HTML
<map>
  <area href="URL">
</map>
XHTML
<map>
  <area href="URL" />
</map>

Атрибуты

accesskey
Переход к области с помощью комбинации клавиш.
alt
Альтернативный текст для области изображения.
coords
Координаты активной области.
href
Задает адрес документа, на который следует перейти.
hreflang
Указывает язык документа, на который ведет ссылка.
nohref
Область без ссылки на другой документ.
shape
Форма области.
tabindex
Задает последовательность перехода между элементами с помощью клавиши Tab.
target
Имя окна или фрейма, куда браузер будет загружать документ.
type
Устанавливает MIME-тип документа, на который ведёт ссылка.

Также для этого тега доступны универсальные атрибуты и события.

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

Не требуется.

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег AREA</title>
  <style type="text/css">
   #title {
    line-height: 0; /* Изменяем межстрочное расстояние */
   }
   #title img {
    border: none; /* Убираем рамку вокруг изображения */
   }
  </style>
 </head>
 <body> 
 <div><img src="images/ecctitle.png" 
                alt="Детский образовательный центр"><br>
  <img src="images/navigate.png" 
                alt="Навигация по сайту" usemap="#Navigation"></div>
  <p><map name="Navigation">
  <area shape="poly" coords="113,24,211,24,233,0,137,0" href="inform.html" alt="Информация">
  <area shape="poly" coords="210,24,233,0,329,0,307,24" href="activity.html" alt="Мероприятия">
  <area shape="poly" coords="304,24,385,24,407,0,329,0" href="depart.html" alt="Отделения">
  <area shape="poly" coords="384,24,449,24,473,0,406,0" href="techinfo.html" alt="Техническая информация">
  <area shape="poly" coords="449,24,501,24,525,0,473,0" href="study.html" alt="Обучение">
  <area shape="poly" coords="501,24,560,24,583,0,525,0" href="work.html" alt="Работа">
  <area shape="poly" coords="560,24,615,24,639,0,585,0" href="misk.html" alt="Разное">
  </map></p>
 </body>
</html>

Учебник HTML 5. Статья «Построение изображения-карты»

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

Тег <map> используется для определения изображения-карты. Изображение-карта представляет собой изображение с определённой активной областью. Элемент <map> содержит ряд <area> тегов, которые определяют интерактивные области в изображении-карте, т.е. при клике на определённую область изображения происходят определённые действия, например, открывается отдельная страница с описанием данного участка изображения.


Атрибут name элемента <map> является обязательным, он связан с атрибутом usemap элемента <img> (создает связь между изображением и картой).


Атрибутами тега <area> мы указываем как координаты области (атрибут coords), так и тип необходимой нам фигуры (атрибут shape):

Значение атрибута Определение
default Весь регион.
rect Прямоугольная область (x1,y1,x2,y2).
circle Круглая область (x,y,r- радиус).
poly Многоугольную область (x1,y1,x2,y2,…,xn,yn).

Рис. 48 Создание активной области с использованием системы координат.

Пример использования

Давайте рассмотрим пример в котором при клике по определённой фигуре на одном рисунке происходит переход на разные веб-страницы, которые описывают эти фигуры (ссылки на Википедию):

<!DOCTYPE html>
<html>
<head>
<title>Пример использование тега <map></title>
</head>
	<body>
		<p>Выбери фигуру:</p>
		<img src = "map.png" usemap = "#figuri" alt = "Доступны 4 фигуры для выбора" >
		<map name = "figuri" >
			<area shape = "rect" coords = "25,25,125,125" href = "red.html" alt = "Красный квадрат" >
			<area shape = "circle" coords = "200,75,50" href = "green.html" alt = "Зелёный круг." >
			<area shape = "poly" coords = "325,25,262,125,388,125" href = "blue.html" alt = "Голубой треугольник" >
			<area shape = "poly" coords = "450,25,435,60,400,75,435,90,450,125,465,90,500,75,465,60"  href = "yellow.html" alt = "Желтая звезда" >
		</map>
	</body>
</html>

И так по порядку, что мы сделали в этом примере:

  • Разместили изображение (тег <img>), которое мы в последствии будем использовать при составлении изображении-карты. В атрибуте usemap необходимо обязательно указать имя изображения-карты, которое мы будем использовать в элементе <map> (необходимо обязательно перед именем указать решетку).
  • Размещаем изображение-карту (тег <map>), задаем единственный и обязательный атрибут элемента name (имя). Обратите внимание, что в отличие от тега <img> мы задаем имя без решетки, в остальном они должны совпадать.
  • Размещаем четыре тега <area>, которые определяют интерактивные области в изображении-карте:
    • Первой мы задаем прямоугольную область (атрибут shape со значением «rect» ), она соответствует нашему
      первому
      изображению (первые два значения соответствуют верхнему левому углу, следующие два значения определяют правый верхний и нижний угол).
    • Второй указываем круглую область (атрибут shape со значением «circle» ), она соответствует нашему второму изображению (первое значение соответствует координатам по оси x, а второе по оси y, третее определяет радиус).
    • Что касается третей и четвертой фигуры, то они составлены по принципу многоугольной области (атрибут shape со значением «poly» ). Вы определяете необходимое количество точек на изображении, высчитываете координаты этих точек (графический редактор) и указываете в таком порядке, чтобы браузер их мог соединить одной линией. На примере треугольника (третий рисунок):
      первая
      точка (координаты x и y вершины), вторая точка (координаты x и y левого нижнего угла) и третяя точка (координаты x и y правого нижнего угла).

Обращаю Ваше внимание на то, что если у тега <area> используется атрибут href, который определяет гиперссылку на площади, то необходимо обязательно указывать атрибут alt (альтернативный текст для области).

В HTML5, если у элемента <map> указан глобальный атрибут id, то он должен иметь то же значение, что и атрибут name.


Результат нашего примера в браузере (кликабельно) и на изображении:

Рис. 49 Пример построения изображения-карты в HTML.

Вопросы и задачи по теме

Перед тем как перейти к изучению следующей темы пройдите практическое задание:

  • Для выполнения задания вам понадобится скачать архив и скопировать содержимое архива (HTML файл и изображение) в любую папку на вашем жестком диске:

  • Используя полученные знания составьте следующую изображение-карту:

Практическое задание № 26.

Нюанс: для чистоты практического задания предлагаю в качестве первой точки использовать вершину звезды и двигаться по часовой стрелке. В качестве значения атрибута href я указал

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

Подсказка: чтобы получить координаты изображения воспользуйтесь редактором изображений, даже самый простой редактор, например, Paint, отображет координаты курсора. Выпишите координаты на листок или в отдельный файл и внесите значения на страницу.

Если у Вас возникнут трудности с выполнением задания, то проинспектируйте код страницы, открыв пример в отдельном окне и внимательно его изучите.


Создание карты изображения в HTML.

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

В прошлом видео уроке мы как раз начали знакомство с картами изображений в HTML. Посмотрели, как она должна выглядеть в конечном итоге, правда, с применением скриптов. Немного поговорили о координатах. То есть о том, как мы их будем определять. Как Вы можете помнить, я остановил свой выбор на одном из способов, это способ с использованием атрибута ismap, так как, на мой взгляд, именно этот метод определения координат является самым простым и менее сложным, а значит именно он нам подходит.

В итоге в прошлом видео мы сделали картинку-ссылку. А затем из изображения сделали серверную карту изображения, которая поможет нам в определении координат активных областей.

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

Начнем с изучения еще двух HTML-тегов, это теги <map> и <area>. Именно эти теги предназначены для создания карты изображения в HTML-документе.

HTML-тег map.

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

Данный тег имеет обязательный атрибут name. В котором мы должны указать имя нашей карты изображения. Кроме того стоит отметить что этот тег не является блочным элементом, а значит необходимо его прописывать внутри блочного элемента, например тега абзаца или универсального тега div.

HTML-тег area.

Тег <area> отвечает за указание активных областей внутри контейнера <map>. Именно этот HTML-тег определяет активную область внутри изображения, указывает какую фигуру мы, при этом используем, указывает описание, с помощью обязательного атрибута alt, и самое главное, с помощью атрибута coords для тега <area> мы можем указать координаты активных областей карты изображения.

Здесь также хочу упомянуть о том, о чем забыл сказать в видео уроке, что этот тег легко заменяется тегом для указания гиперссылок в HTML-документе. То есть тегом <a>. Если Вы помните, то именно у тега <a> есть точно такие же атрибуты shape и coords, которые предназначены именно для указания базовой фигуры и ее координат.

Определение координат квадрата, прямоугольника, круга и многоугольника.

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

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

После чего на живом примере мы определим координаты квадрата и прямоугольника. Затем определим координаты окружности. И наконец, укажем координаты треугольника, который свою очередь играет роль многоугольника.

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

Видео урок: Создание карты избражения в HTML.

HTML-справочник и другие материалы можно и нужно скачать здесь!

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

Видео курс HTML и CSS. Работа с изображениями

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

Здравствуйте, уважаемые слушатели. Меня зовут Александр Петрик. Я сотрудник компании CyberBionicSystematics. И мы с вами продолжаем цикл лекций по языку HTML.

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

Язык HTML мы рассматриваем в контексте его тегов. Сейчас мы посмотрим на такой тег, как <img>. Данный тег предназначен для вставки изображений в разметку. Тег не имеет текстового содержимого и, соответственно, не имеет закрывающегося тега.

Посмотрим на следующие атрибуты тега. Атрибут Src. Это источник, откуда будет подгружаться наше изображение.

Следующий атрибут – это атрибут Alt. Он указывает альтернативный текст. Т.е. если наше изображение не будет отображаться, то будет отображаться данный альтернативный текст вместо него.

Атрибут Title. Задает всплывающую подсказку. При наведении курсора на наше изображение, будет появляться всплывающее окошко с подсказкой.

Следующие два атрибута – Width и height. Ими можно задать ширину и высоту изображения.

Следующий атрибут – Align – указывает положение изображения. В предыдущем уроке мы с помощью него успешно выравнивали текст.

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

Формат jpeg был специально создан для хранения изображений. Недостатком формата является низкое качество изображения. Если цветовые переходы очень резкие, то будут высокие потери качества.

Формат png характеризуется очень высокое качество. Из недостатков – большой размер.

Формат gif. Он способен хранить сжатые данные без потери качества.

Посмотрим на атрибуты подсказки — Alt и Title. Вот приведена строка с тегом img. После атрибута alt ставим =, кавычки, а в кавычках текст. Если картинка не будет отображаться, вместо нее в нашем случае будет отображен текст deleted. Атрибут title. Мы ему присваиваем значение self-portrait. Это значит, что когда мы наведем курсор на наше изображение, будет отображаться фраза self-portrait. Рекомендуется использовать всегда оба выше сказанные атрибуты. Это удобно для пользователей, а также для поисковых систем.

Посмотрим на примеры. Первый пример показывает использование img. Здесь использованы атрибуты src, alt title. Запустим и посмотрим, что выйдет. В окне мы видим слово deleted. Это потому, что я убрал 4 из названия рисунка и браузер не находит измененного названия в указанной папке источника изображения.

Следующий пример показывает нам различное использования атрибута src. В первой строке у нас используется изображение из папки, во второй – изображение из ресурса сети. Запустим. Видите, у нас тут еще появилась анимация. Это потому, что в третьей строке мы используем картинку в формате .gif.

Обратите внимание на 18 строку. В имени файла я опять убрал цифру 4. Т.е. теперь ничего подключаться не будет из локального источника.

Запустим. А теперь попробуем запустить другой браузер. Теперь у нас здесь появилась надпись. Давайте попробуем написать delete. Запустим и посмотрим. Да, у нас вывелась запись delete. Попробуем запустить этот код в браузере FireFox. Запустим, теперь у нас показывает delete без обрамляющего прямоугольника. Что показывает этот пример? Что один и тот же тег по-разному работает в разных браузерах.

Посмотрим на то, как можно изменить размер изображения. Для этого существуют два атрибута – width и hight.

Давайте посмотрим на примере, как можно использовать данные атрибуты. Задаем ширину, высоту и т.д. На 18й и 20й строках указываем другой размер.

Запустим. Размеры разные.

Посмотрим на атрибут align. Посмотрим, как с его помощью можно выравнивать изображения. Bottom – выравнивание по нижней границе, middle – по середине, top – по верхнему краю.

Горизонтальное выравнивание: либо по левому, либо по правому краю. Посмотрим на примере. Запустим. Все аналогично с нашей презентацией. Важный момент – по умолчанию выравнивание изображения происходит по нижнему краю.

Посмотрим следующий пример. В 16й строке у нас атрибуту align присвоено значение left, а в 30й – right. Посмотрим, что у нас получилось. Как видим, наши рисунки выровнены по краям и обтекаются текстом.

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

Посмотрим теперь, как задать фон для нашей страницы. Для этого используется атрибут bgcolor. Следующий метод – это использование атрибута style и его свойства background-color.

Третий вариант – использование свойства background-image в атрибуте style. Здесь мы обязательно указываем url и в скобках имя нашего изображения.

Поговорим о свойстве background-repeat. У этого свойства есть 3 параметра: no-repeat – наше изображение будет вставлено один раз вверху страницы; repeat-x – рисунок будет повторен определенное количество раз до конца строки по оси х; repeat-y – по оси ординат.

Поговорим, как можно изменить размер изображения фона. Для этого используются свойства cover и contain. Обратим внимание по последнюю строку. Она демонстрирует, что можно указать конкретные показатели размера в пикселях.

В данном примере задаем синий цвет фона.

Смотрим дальше. Тут мы использует атрибут style и присваиваем bgcolor = “Blue”, background-color = “Yellow”. Запустим и видим, что background-color является приоритетной.

Перейдем к следующему примеру. Здесь мы хотим задать в качестве фона уже не цвет, а какую-то картинку.

Запустим и посмотрим, что выйдет. Сам по себе рисунок маленький. Т.е. по умолчанию произошло его дублирование.

Посмотрим на 4й пример. Мы можем использовать не только стили для фона, а и атрибут background. В данном случае мы используем его вместе с background-repeat, так как не хотим, чтобы наш фон повторялся.

Запустим пример и посмотрим.

Посмотрим дальше. Здесь мы используем свойство repeat-x.

Посмотрим следующий пример, где указываем свойство repeat-у.

Посмотрим еще пример. Он очень важный. В 14 строке тегу body мы присваиваем атрибут style. Здесь мы используем свойство contain. Запустим и посмотрим, что выйдет. Здесь мы видим, что браузер как-бы взял и растянул его по направлению сверху-вниз, а ширину он не трогал.

Теперь 14 строку мы закомментируем, а 13ю розкомментируем и посмотрим, как работает параметр cover.

Давайте посмотрим. Ctrl+F5. Вот, обратите внимание, наш рисунок полностью был помещен в окно браузера. Он растягивает наш рисунок во всех направлениях.

Посмотрим последний наш пример. Мы видим, что логотип был размещен в качестве фона, но с поправкой количества пикселей.

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

Рассмотрим основные шаги при создании карты изображения. Для начала нужно пометить изображение атрибутом usemap, далее создать тег <map> </map>. Следует также указать тег <area />. Если мы создаем карту Украины, то в данном теге мы прописываем области нашей страны. Shape задает границы области. Особенности задания координат области посмотрим на примере. Alt и title имеют одни и те же функции, только alt используется в более старых браузерах.

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

Посмотрим теперь на примерах использование карт. Здесь мы используем такой тег, как map. В нем мы задаем два таких атрибута как name и id. В 26й строке мы создаем области. Первая область будет ссылаться на саму себя. Указываем координаты и альтернативный текст. На 27й строке мы используем такую фигуру, как прямоугольник. Запустим. Наводим мышкой, появляется всплывающая подсказка.

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

Глянем еще раз на наш код.

Давайте посмотрим на следующий пример. Здесь показано, как мы можем использовать другие фигуры для отображения карт. На 16 строке мы также никуда не будем переходить. На 17 строке все то же самое, но мы задаем область круглую, на 18й – многоугольник.

Посмотрим на дизайн нашей страницы. Поиграемся с радиусом и сторонами многоугольника.

Последний пример. Рассмотрим применение навыков создания карт на практике. Вот эта область – деревья, вот дорога и вот лужайка. Рассмотрим построчно, что у нас здесь есть. Здесь мы задаем цвет нашего фона. Здесь выравнивание нашего текста по центру. На 11 й строке указываем ширину рисунка и указываем, что рисунок будет картой изображения.

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

Карты изображений | up2top.ru

Карты изображений (от англ. image map) или как их еще называют карты ссылок, позволяют привязать гиперссылки к различным частям одного изображения, созданного с помощью тега img.

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

Создание карт изображений

Для создания подобных карт ссылок, помимо тега img используются еще два тега, а именно тег map (от англ. map — карта) и тег area (от англ. area — область). Тег map определяет границы описания карты ссылок, а вложенные в него теги area описывают каждую активную область.

Пример карты изображений

<img src=«shapes.png» alt=«Четыре геометрические фигуры»
  width=«600» height=«150» usemap=«#shapes» />

<map name=«shapes»>
  <area атрибуты />
</map>

Связь между тегом img и соответствующей картой ссылок, т. е. тегом map, устанавливается с помощью атрибутов usemap и name. В атрибуте name тега map указывается произвольное уникальное название карты, например, shapes, и это же название должно быть использовано в атрибуте usemap соответствующего тега img. Обратите внимание на обязательный символ решетки.

Границы активных областей изображения и адреса ссылок указываются с помощью тега area и его атрибутов shape (т. е. форма), coords (координаты) и href (гиперссылка). Например, для задания ссылки при клике на круг, можно использовать следующую запись:

<area shape=«circle» coords=«200,75,50» href=«circle.html» />

Здесь circle (от англ. круг) – это одно возможных значений атрибута shape, которое задает активную область в виде круга, а числа в атрибуте coords — это, соответственно, расстояние от левого края изображения до центра круга (200 пикселей), расстояние от верхнего края изображения до его центра (75 пикселей) и радиус круга (50 пикселей).

Помимо круга с помощью атрибута shape тега area можно задать прямоугольник и многоугольник. Им соответствуют значения атрибута shape: rect (от англ. rectangle – прямоугольник) и poly.

<area shape=«rect» coords=«25,25,125,125» href=«square.html» />
<area shape=«poly» coords=«325,25,262,125,388,125» href=«triangle.html» />

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

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

Мертвые зоны

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

<img src=«shapes.png» alt=«Четыре геометрические фигуры»
  width=«600» height=«150» usemap=«#shapes» />

<map name=«shapes»>
  <area shape=«rect» coords=«50,50,100,100» /> <!-- «мертвая» зона -->
  <area shape=«rect» coords=«25,25,125,125» href=«square.html» />
  <area shape=«circle» coords=«200,75,50» href=«circle.html» />
  <area shape=«poly» coords=«325,25,262,125,388,125» href=«triangle.html» />
  <area shape=«poly» href=«star.html»
    coords=«450,25,435,60,400,75,435,90,450,125,465,90,500,75,465,60» />
</map>

Нам осталось отметить только то, что для создания «мертвой», т. е. некликабельной зоны внутри квадрата, используется тег area без атрибута href. Гиперссылка не указана, и значит данный тег area создает мертвую зону на карте ссылок.

карта (map) ссылок Тег map в html примеры

HTML теги

Значение и применение

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

Поддержка браузерами

Тег
Opera

IExplorer

Edge
Да Да Да Да Да Да

Атрибуты

Атрибутами тега мы указываем как координаты области (атрибут coords ), так и тип необходимой нам фигуры (атрибут shape ):

Пример использования

Давайте рассмотрим пример в котором при клике по определённой фигуре на одном рисунке происходит переход на разные веб-страницы, которые описывают эти фигуры (ссылки на Википедию):

Пример использование тега

Выбери фигуру:

«Доступны 4 фигуры для выбора» > «Красный квадрат» > coords = «200,75,50» href = «green.html» alt = «Зелёный круг.» > «Голубой треугольник» > «450,25,435,60,400,75,435,90,450,125,465,90,500,75,465,60» href = «yellow.html» alt = «Желтая звезда» >

И так по порядку, что мы сделали в этом примере:

  • Разместили изображение (тег ), которое мы в последствии будем использовать при составлении изображении-карты. В атрибуте usemap необходимо обязательно указать имя изображения-карты, которое мы будем использовать в элементе (необходимо обязательно перед именем указать решетку).
  • Размещаем изображение-карту (тег ), задаем единственный и обязательный атрибут элемента name (имя карты). Обратите внимание, что в отличие от тега мы задаем имя без решетки, в остальном они должны совпадать.
  • Размещаем четыре тега , которые определяют интерактивные области в изображении-карте:
    • Первой мы задаем прямоугольную область (атрибут shape со значением «rect» ), она соответствует нашему первому изображению (первые два значения соответствуют верхнему левому углу, следующие два значения определяют правый верхний и нижний угол).
    • Второй указываем круглую область (атрибут shape со значением «circle» ), она соответствует нашему второму изображению (первое значение соответствует координатам по оси x , а второе по оси y , третее определяет радиус ).
    • Что касается третей и четвертой фигуры , то они составлены по принципу многоугольной области (атрибут shape со значением «poly» ). Вы определяете необходимое количество точек на изображении, высчитываете координаты этих точек (графический редактор) и указываете в таком порядке, чтобы браузер их мог соединить одной линией. На примере треугольника (третий рисунок): первая точка (координаты x и y вершины), вторая точка (координаты x и y левого нижнего угла) и третяя точка (координаты x и y правого нижнего угла).

Обращаю Ваше внимание на то, что если у тега

Плюсы

  • Карты-изображения позволяют задать любую форму области ссылки, что особенно пригодится для указания географического района. Поэтому, карты-изображения применяются наиболее часто в географической тематике.
  • С одной картинкой удобнее работать — не приходится заботиться о состыковке отдельных фрагментов при разрезании, и рисунок легко можно поместить в нужное место.

Минусы

  • При сложной форме области ссылки увеличивается объём кода HTML. Контур аппроксимируется набором прямых отрезков, для каждой точки такого отрезка следует задать две координаты, а общее количество таких точек может быть достаточно велико.
  • Соответственно, увеличивается сложность задания координат. Вручную их указывать не удобно, поэтому приходится пользоваться специальными программами, которые визуально показывают области и позволяют их редактировать.
  • При смене изображения, например, при увеличении масштаба придётся заново задавать координаты всех областей ссылок.
  • К картам-изображениям нельзя применять разные эффекты, которые доступны при разрезании одного рисунка на фрагменты: эффект перекатывания, частичная анимация, индивидуальная оптимизация картинок для их быстрой загрузки.
  • Нет чётко выделенных границ ссылок. Поэтому эти границы приходится выделять разными средствами непосредственно на изображении. Если рисунок не загрузился по каким-либо причинам, то разобраться в наборе ссылок становится весьма проблематично.

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

Карты-изображения реализуются в двух различных вариантах — серверном и клиентском. В случае применения серверного варианта браузер посылает запрос на сервер для получения адреса выбранной ссылки и ждёт ответа с нужной информацией. Такой подход требует дополнительного времени на ожидание результата и отдельные файлы для каждой карты-изображения.

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

Пример 1. Создание карты-изображения

Карта-изображение

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

Элемент имеет следующие атрибуты.

  • shape — определяет форму активной области. Форма может быть в виде окружности (circle), прямоугольника (rect), полигона (poly).
  • alt — добавляет альтернативный текст для каждой области. Служит лишь комментарием для ссылки, поскольку на экран не выводится. Обязательный атрибут при наличии href .
  • title — выводит всплывающую подсказку при наведении курсора на область.
  • href — задаёт адрес документа, на который следует перейти, по своему действию аналогичен подобному атрибуту элемента .
  • coords — задаёт координаты активной области. Координаты отсчитываются в пикселях от левого верхнего угла изображения, которому соответствует значение 0, 0. Первое число является координатой по горизонтали, второе — по вертикали. Список координат зависит от формы области.

Для окружности задаются три числа — координаты центра круга и радиус.

В html-документ.

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

Не бойтесь, это вовсе не сложно. Самое главное – понять теорию и закрепить практикой.

Ну что, приступим к теории.

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

Атрибуты areа

1. Атрибут shape
shape – определяет форму области (прямоугольником, кругом, многоугольником ).
Прямоугольник — «rect «. Пример: shape=»rect » ;
круг — «circle «. Пример: shape=»circle » ;
многоугольник — «poly «. Пример: shape=»poly »

2. Атрибут coords
coords – это расположение геометрической формы.

Давайте рассмотрим пример на геометрической форме прямоугольника.

Вы уже знаете, что если вам нужна форма прямоугольника, значит нужно прописать в атрибуте shape значение « rect ».


Точка отсчета начинается с левого верхнего угла картинки, координаты которого (0;0)

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

Для примера с прямоугольником №1 возьмите такие координаты:

x1=25, y1=36, x2=114, y2=98

Вот так будет выглядеть код:

Все пока что хорошо. Но нам теперь нужно связать картинку с картой.
Для этого придумайте любое название для карты, например, «karta1 » и пропишите его в теге через атрибут name .

Теперь свяжем карту с картинкой. Для этого используем атрибут usemap .
Пример написания:
usemap=» #имя_карты»

В нашем случае это будет выглядеть следующим образом:

Теперь соберем все вместе и пропишем еще координаты к другому прямоугольнику №2 с такими данными (x1=153, y1=11, x2=219, y2=127).

Теперь смотрите на результат. Нажмите на прямоугольник №1 и на прямоугольник №2

Для начала нужно указать тип области. Для этого пропишем в атрибуте shape значение «circle ».

Теперь переходим к координатам.
Чтобы создать координаты для круглой области, нужно прописать данные к центру (xy) и указать длину радиуса (R).
Порядок записи координат для атрибута coords будет таким:

Для круга №1 возьмите такие координаты:

x=46, y=48; а длина радиуса — R=35

Теперь соберем все вместе и пропишем еще координаты к кругу №2 с такими данными x=158, y=75, R=53.

Карта изображения в HTML (навигационные карты). Урок №11

Теперь смотрите на результат. Нажмите на круг №1 и на круг №2:

Многоугольная область самая сложная область в навигационной карте.

Для начала нужно указать тип области. Для этого пропишите в атрибуте shape значение «poly »

Теперь переходим к координатам.

Порядок записи координат для атрибута coords будет таким:

Разъяснение:
x1 ,y1 координаты первого угла;
x2 ,y2 координаты второго угла;
xN ,yN координаты последнего угла

То есть, для многоугольника №2 это выглядит вот так:

Теперь дадим карте название и привяжем карту к рисунку:

Теперь соберем все вместе и пропишем еще координаты к шестиугольнику №1 с такими данными: x1=54, y1=20, x2=109, y2=20, x3=147, y3=58, x4=109, y4=96, x5=54, y5=96, x6=16, y6=58.

Карта изображения в HTML (навигационные карты). Урок №11

Теперь смотрите на результат. Нажмите на многоугольник №1 и на многоугольник №2:

Возможность комбинирования

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

Дополнение с использованием TITLE

Для каждой области можно прописать подсказки, используя атрибут title.

Карта изображения в HTML (навигационные карты). Урок №11

Теперь смотрите на результат. Наведите курсор мышки на круг, а потом на прямоугольник:

Вот и все. С картой изображения в HTML (навигационная карта) мы разобрались.

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

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

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

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

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

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


Нашу карту надо подключить к нашей картинке, для этого в тег надо добавить параметр usemap , в качестве значения которого выступает имя нашей карты после значка # (решетки):
Для описания конкретных областей внутри тегов используются теги . Этот тег имеет следующие параметры:
  • shape — определяет форму области, может принимать следующие значения:
    • rect — область в виде прямоугольника,
    • circle — область в виде круга,
    • poly — область в виде многоугольника,
    • default — вся область.
  • cootds — задает координаты отдельной области:
    • для rect задаются координаты верхнего левого и правого нижнего углов прямоугольника,
    • для circle задаются координаты центра круга и радиус,
    • для poly задаются координаты вершин многоугольника в нужном порядке.
  • href — определяет адрес ссылки.
  • target — применяется при использовании фреймов и указывает фрейм в который нужно загрузить страницу.
  • alt — задает альтернативный текст для области.
У нас три области, значит будет три тега : первый — прямоугольная область вокруг пылесоса, второй — прямоугольная область вокруг стиральной машины, третья — вокруг холодильника.
Теперь надо определиться с координатами этих областей. На самом деле это самый трудоемкий процесс. В нашем примере мы решили, что области будут прямоугольными и значительно облегчили себе задачу, а представьте, сколько точек нужно задать, например, для обвода страны на карте. Тем не менее, нам надо задать координаты верхнего левого и правого нижнего углов трех прямоугольников.

Для этих целей обычно используется какая-нибудь программа, например, Image Ready, которая имеет специальный инструмент для обводки областей и автоматически строит описания этих областей. Рассмотрение работы этих программ не входит в курс HTML, поэтому здесь мы зададим координаты «на глаз». Посмотрите еще раз на наше изображение:

Ширина нашей картинки 738 пикселов, а высота — 192 пиксела. Проведем линии по границам наших областей и примерно определим координаты. Теперь мы готовы добавить эти параметры в наши теги .


Результат:

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

На этом наши уроки подошли к концу. Вы ознакомились со всеми возможностями языка HTML. Для закрепления навыков ознакомьтесь с двумя уроками Делаем сайт — табличная верстка .

Напоследок, надо сказать, что в HTML есть еще два замечательных элемента — теги

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

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

Даже начинающий пользователь, побродив по просторам Интернета, вскоре столкнется с картой-изображением. На рис. 6.1 показана Web-страница одной из крупнейших компьютерных фирм России. Основное меню на этой странице представляет собой карту-изображение с соответствующими ссылками.

Запуск известного поискового сервера Yahoo! также приводит к появлению страницы, содержащей карту-изображение. Самая верхняя часть изображения, приведенного на рисунке, содержит четыре кнопки, между которыми написано слово «Yahoo!». Курсор на рисунке показывает на первую из этих кнопок, причем форма курсора дает понять, что последний указывает на ссылку, адрес которой виден в строке статуса браузера. Ссылки, реализующиеся по этим кнопкам, и сделаны по технологии карт-изображений.

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

В этой главе вы узнаете:

  • Что такое карта-изображение, и как она работает
  • Как создать файл конфигурации карты-изображения
  • Как создать ссылки в HTML-документе, используя карту-изображение

Рис. 6.1. Пример Web-страницы, в которой основное меню сделано с помощью карты-изображения

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

Основы использования карт-изображений

Карты-изображения предоставляют пользователям дружественный интерфейс для перехода на другие Web-страницы. Чтобы выполнить переход по такой ссылке, следует просто выбрать нужное место на изображении и щелкнуть мышью. Наличие такого развитого графического интерфейса является одним из значительных преимуществ Web-страниц по сравнению с другими ресурсами Интернета. Вместо текстовых меню, подобных интерфейсу клиентов системы Gopher, пользователи получают наглядное графическое представление информации (рис. 6.2).

Рис. 6.2. Наглядное представление ссылок (на страницы, рассказывающие о семи чудесах света) с помощью карты-изображения

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

Рассмотрим основные понятия, связанные с использованием карт-изображений.

Терминология

Imagemap, Image Map, Area Map, Clickable Map, Sensitive Map — все эти англоязычные термины используются в справочной литературе для обозначения одной и той же возможности — использование встроенного в HTML-документ изображения, для которого определены «горячие» (или активные) точки или области, имеющие ссылки на различные URL-адреса. Будем описывать эту возможность словосочетанием «карта-изображение», подразумевая под этим совокупность нескольких компонентов, обеспечивающих реализацию данной концепции. Основными компонентами являются: само изображение, которое будем называть опорным для данной карты-изображения; описание конфигурации активных областей; а также соответствующее программное обеспечение.

Графическое представление карты-изображения

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

Описание конфигурации карты-изображения

Конфигурация карты-изображения записывается в виде обычного текста, который в зависимости от используемого формата может быть сохранен в отдельном файле или являться частью HTML-документа. Описание конфигурации содержит координаты для каждой из активных областей изображения, а также URL-адреса, связанные с каждой из этих областей. Активные области могут иметь форму прямоугольников, кругов и многоугольников. Допускается любая комбинация этих фигур. Также может задаваться одно значение URL-адреса, определенное для случая, когда пользователь выполняет щелчок в пределах изображения, но вне любой из заданных активных областей. Конкретные правила записи конфигурации области зависят от выбранного варианта реализации и будут представлены далее.

Варианты реализации карт-изображений

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

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

Преимущества и недостатки карт-изображений

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

Карты-изображения наиболее удобно использовать в следующих ситуациях:

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

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

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

К недостаткам карт-изображений можно отнести следующие:

  • Если не предусмотрено альтернативное текстовое меню, то не остается никаких средств навигации для пользователей, которые не могут загрузить графику или отключили ее загрузку.
  • Картам-изображениям свойственны общие недостатки, присущие использованию изображений на Web-страницах, а именно, значительное увеличение времени загрузки по сравнению с чисто текстовыми документами.
  • Неудачно спроектированные изображения могут внести путаницу. Иногда бывает трудно определить области, являющиеся активными на изображении. Особенно это трудно сделать в серверном варианте. При реализации клиентского варианта ситуация упрощается, так как есть возможность перемещать мышь в пределах изображения и следить за появляющимися адресами ссылок в нижней части окна браузера.
  • При использовании карт-изображений браузер не имеет возможности отмечать другим цветом уже пройденные ссылки так, как это делается для текстовых ссылок.

Серверный вариант реализации карт-изображений

Использование на Web-страницах карт-изображений оказывается несколько более сложным делом, чем простое встраивание интересных графических изображений и связывание с ними ссылок. Для реализации серверного варианта карты-изображения необходимо, чтобы HTML-документ был размещен на сервере. Также требуется, чтобы на сервере была сконфигурирована поддержка CGI-сценариев (Common Gateway Interface, Общий интерфейс шлюза), которые выполняют обработку запросов, поступающих от браузера при работе с картой-изображением. Для каждой карты-изображения на сервере должен быть размещен файл, описывающий конфигурацию активных областей. При щелчке мышью в пределах изображения координаты места щелчка передаются браузером серверу, который обращается к конфигурационному файлу, являющемуся, по существу, поисковой таблицей активных областей. Результат поиска возвращается браузеру в виде URL-адреса или сообщения об отсутствии найденных активных областей, соответствующих указанному месту изображения.

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

Напомним, что встроенные изображения могут использоваться как гипертекстовые ссылки, если они включены в тег . Например, чтобы сделать изображение с именем Myimage.gif графическим указателем ссылки на документ в том же самом каталоге с именем exampie.html, следует записать:

Этот HTML-код сообщает серверу, что при щелчке на изображении Mylmage.gif браузеру должен быть возвращен Документ С именем example.html.

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

>

Ссылка в этом примере представляет собой не адрес другого HTML-документа, а файл конфигурации карты-изображения, который содержит координаты для каждой активной области изображения с именем Myimage.gif.

Примечание

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

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

Совет

Для каждой карты-изображения необходим отдельный файл конфигурации. Примите за правило сохранять файл конфигурации в том же самом каталоге и с тем же именем, что и связанное с ним изображение. Например: main_menu.gif и main menu.map.

Существуют два формата файлов конфигурации карт-изображений, разработанные в CERN и NCSA и носящие названия этих организаций. Оба этих формата содержат одинаковую информацию, но по-разному ее представляют. В обоих случаях используются одни и те же типы областей, о которых речь пойдет ниже. При разработке карт-изображений для использования на конкретном сервере необходимо получить у администратора системы сведения о принятом на данном сервере способе поддержки карт-изображений.

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

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

Совет

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

Формат CERN

CERN — это европейский научный центр, тематика исследований которого весьма широка. Именно здесь была разработана концепция системы World Wide Web, которая явилась толчком всех разработок в области WWW. По праву CERN можно считать родиной Web. Когда возникла необходимость разработки структуры файлов конфигурации карт-изображений, в CERN был предложен следующий формат:

тип области координаты URL-адрес

Значения пар координат X и Y разделяются запятой и заключаются в круглые скобки. Формат CERN не допускает использования комментариев для пояснения ссылок, связанных с той или иной областью. Могут использоваться следующие типы областей: rect, circle, poly и default. Этот формат допускает двоякое написание названий типов областей — как в сокращенной, так и в полной форме. Наряду с приведенными названиями типов могут использоваться названия rectangle, circ и polygon.

Приведем пример записи информации об участках на карте-изображении в формате CERN:

rect (56,47) (357,265) http://www.anywhere.com/

circ (366,147) 109 http://www.anywhere.com/

polygon (534,62) (699,62) (698,236) (626,261) (534,235) (534,62)

http://www.anywhere.com/

Формат NCSA

Национальный центр суперкомпьютерных приложений NCSA (National Center for Supercomputing Applications) университета штата Иллинойс также внес значительный вклад в развитие Web. Здесь был создан первый популярный графический браузер — программа Mosaic. В NCSA был предложен формат конфигурационного файла, отличающийся по форме записи от формата CERN. Этот формат имеет следующий вид:

тип_области URL-адрес координаты

Могут использоваться следующие типы областей: rect, circle, poly, default и point.

Координаты X и Y отделяются запятыми, но не заключаются в круглые скобки. В этом формате допускается использование строк комментариев. Любая строка, начинающаяся с символа #, будет рассматриваться как комментарий, и ее содержимое будет игнорироваться программой интерпретации.

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

Примечание

Формат NCSA допускает использование типа области point (точечная область). Этот тип области не применяется ни в формате CERN, ни при использовании клиентского варианта карт-изображений. Замысел создателей формата заключался в том, что при наличии ряда точечных областей по щелчку мыши активизировалась ссылка, находящаяся ближе других. Однако, наличие такого типа области, по существу, входит в противоречие с типом области default, так как при одновременном использовании областей point и default реализация ссылки, определенной типом point, возможна только при точном попадании в данную точку мышью. Это довольно трудно и вряд ли создаст комфортные условия при работе с таким документом. В настоящее время тип point практически не применяется, причем все большее развитие получает клиентский вариант карт-изображений.

Приведем пример записи конфигурационного файла формата NCSA:

# Пример записи конфигурационного файла

rect http://www.anywhere.com/ 56,47 357,265

circle http://www.anywhere.com/ 366,147 366,256

poly http://www.anywhere.com/ 534,62 699,62 698,236 626,261 534,235 534,62

Клиентский вариант карты-изображения

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

Для указания того, что встроенное изображение является опорным для карты, используется параметр USEMAP тега . Значением параметра USEMAP является ссылка на описание конфигурации карты.

Примечание

Браузер Netscape не допускает использование отдельного файла для описания конфигурации карты.

Например:

В этом примере изображение, хранящееся в файле с именем l ogo.gif, является опорным для карты-изображения, реализуемой в клиентском варианте.

Описание конфигурации активных областей должно располагаться в том же файле, что и данная строка HTML-кода, и иметь для данного примера имя logo.

Тэг

Для описания конфигурации областей карты-изображения используется специальный тег , единственным параметром которого является NAME. Значение параметра NAME определяет имя, которое должно соответствовать имени в USEMAP. Тег требует закрывающего тега МАР>. Внутри этой пары тегов должны располагаться описания активных областей карты, для чего используется специальный тег .

Тэг

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

Параметрами тега являются SHAPE, COORDS, HREF, NOHREF, TARGET, и ALT. Рассмотрим назначение этих параметров.

Параметр SHAPE

Параметр SHAPE определяет форму активной области. Допустимыми значениями являются rect, circle, poly, default. Эти значения задают области в виде прямоугольника, круга, многоугольника. Последнее значение — default — определяет все точки области. Если параметр SHAPE опущен, то по умолчанию предполагается значение rect, т. е. область в виде прямоугольника.

Предупреждение

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

Примечание

В отличие от серверного варианта, где область типа default определяла все точки на изображении, которые не относятся к какой-либо активной области, для клиентского варианта область типа default определяет вообще все точки изображения. Поэтому в данном случае описание области default должно располагаться последним в списке активных областей. Если, например, описание области default поставить первым, то всегда для клиентского варианта будет реализовываться ссылка, определяемая данной областью, а все остальные ссылки будут игнорироваться (именно так реализован данный тип области в Netscape). Для серверного варианта расположение описания области default не имеет значения. Это различие учитывается в примерах, приводимых в конце главы.

Совет

Отметим также, что не все браузеры поддерживают тип области default. В частности, Microsoft Internet Explorer вообще не разрешает использовать данный тип области. Поэтому вместо области типа default можно рекомендовать задание прямоугольной области с размерами, равными размерам всего изображения. Естественно, что такая область должна описываться последней. Именно так поступают некоторые программы редактирования карт-изображений, которые будут рассматриваться ниже.

Параметр COORDS

Параметр COORDS задает координаты отдельной активной области. Значением параметра является список координат точек, определяющих активную область, разделенных запятыми. Координаты записываются в виде целых неотрицательных чисел. Начало координат располагается в верхнем левом углу изображения, которому соответствует значение 0,0. Первое число определяет координату по горизонтали, второе — по вертикали. Список координат зависит от типа области.

Для области типа rect задаются координаты верхнего левого и правого нижнего углов прямоугольника.

Для области типа circle задаются три числа — координаты центра круга и радиус.

Для области типа poly задаются координаты вершин многоугольника в нужном порядке. Заметим, что последняя точка в списке координат не обязательно должна совпадать с первой. Если они не совпадают, то при интерпретации данных для этой формы области браузер автоматически соединит последнюю точку с первой. Различные редакторы карт-изображений в этом отношении работают по-разному — одни добавляют первую точку в конец списка, а другие — нет. Количественные ограничения на число вершин довольно велики и покрывают практически все мыслимые потребности. По крайней мере многоугольник, имеющий 100 вершин, уверенно обрабатывается всеми ведущими браузерами. Есть ограничение, связанное с самим языком HTML, согласно которому список не может содержать более 1024 значений. Многоугольник вполне может быть невыпуклым.

Область типа default не требует задания координат.

Параметры HREF и NOHREF

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

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

Параметр TARGET

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

Параметр ALT

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

Приведем пример задания областей различных типов:

HREF=»p.htm» ALT=»Многоугольник»>

Этот фрагмент кода размещается в HTML-файле. Часто все описания карт-изображений одного документа сводятся вместе и размещаются в начале раздела

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

Комбинация клиентского и серверного вариантов

Допустимо использование комбинированного варианта, при котором для одного и того же изображения определены оба параметра — USEMAP и ISMAP, что предполагает использование данного изображения в качестве опорного как для клиентского, так и для серверного варианта. Параметр USEMAP является доминирующим. Это означает, что браузер, который поддерживает клиентский вариант, будет использовать USEMAP, игнорируя указания параметра ISMAP. Те браузеры, которые не поддерживают клиентский вариант и не поймут назначение параметра USEMAP, согласно общим правилам HTML проигнорируют его наличие и будут реализовывать серверный вариант, обнаружив присутствие параметра ISMAP. Комбинированный вариант является более надежным, однако требует наличия данных для конфигурации областей для обоих вариантов. В настоящее время необходимость использования комбинированного варианта все более снижается, так как все ведущие браузеры осуществляют поддержку клиентского варианта. Тем не менее, начальные странички компании Netscape, с которыми наверняка сталкивался любой пользователь браузера Netscape, сделаны именно в комбинированном варианте.

Приведем пример комбинированного варианта:

Примечание

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

.

С одной стороны, все изображение является ссылкой на документ с именем NoMaps.htm. С другой стороны, наличие параметра USEMAP определяет данное изображение как опорное для соответствующей карты-изображения. Ссылка на документ NoMaps.htm будет игнорироваться уже благодаря присутствию параметра USEMAP и вне зависимости от других факторов.

Особенности использования карт-изображений

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

Альтернативные средства навигации

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

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

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

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

Средства создания карт-изображений

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

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

Для автоматизации процесса разметки областей на изображении существует ряд программ, большинство из которых очень похожи друг на друга. Они позволяют создавать и изменять файлы конфигурации, работая непосредственно с изображением на экране. Большинство программ представляют собой отдельные утилиты, работающие автономно и, по существу, являющиеся дополнением к HTML-редакторам. Эти программы позволяют сохранять создаваемый конфигурационный файл либо в буфере обмена Windows, либо в файле на диске. В первом случае типичным вариантом является совместная работа программы редактирования карты-изображения и какого-либо HTML-редактора или обычного текстового редактора. Если же программа позволяет сохранять конфигурационный файл на диске, то она может использоваться полностью автономно. Все программы позволяют размечать на изображении области трех основных типов — rect, circle и poly. Некоторые редакторы поддерживают тип default. Пожалуй, единственным критерием выбора программы редактирования карт-изображений является удобство ее использования, так как по функциональным свойствам все программы очень близки. Если интерфейс программы покажется вам неудобным, можно отказаться от ее использования и выбрать другую.

Рассмотрим некоторые из существующих программ.

Программа MapEdit

Одной из наиболее простых и известных программ редактирования конфигурационных файлов является утилита MapEdit, разработанная Томасом Бу-теллом (Thomas Boutell). Эта программа существует уже на протяжении нескольких лет и реализована для различных платформ. В частности, имеются версии для Windows 3.x и Windows 95/98/NT. Как и для большинства программ, существовал ряд версий данной утилиты. На текущий момент последней доступной версией для Windows 95/98/NT является версия 2.6 (сентябрь 1999 г.). Информацию о программе можно получить по адресу:

http://www.boutell.cora/mapedit/

Программа MapEdit является условно-бесплатной (shareware) и имеет 30-дневный оценочный период, по истечении которого необходима ее регистрация. Программа невелика по размеру — дистрибутив занимает около 300 Кб, и при этом обладает практически всеми необходимыми возможностями.

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

Рассмотрим вкратце основные возможности данной программы. После запуска MapEdit выдается основное окно, содержащее заставку (рис. 6.3 ) и меню. Имеется возможность редактирования существующих файлов как для серверного, так и для клиентского вариантов карт-изображений. Есть возможность также создания нового файла конфигурации, однако это касается только серверного варианта. Для клиентского варианта необходимо наличие исходного HTML-файла со ссылками на встроенные изображения, которые будут использоваться в качестве опорных для карт-изображений.

Примечание

Невозможность создания нового HTML-файла с помощью программы MapEdit можно легко обойти. Для этого следует запустить программу в режиме создания файла в одном из форматов серверного варианта (NCSA и CERN), выполнить все необходимые действия, а затем сохранить полученные результаты в режиме Save as, указав при этом формат Client Side Map. Будет создан HTML-файл, который в дальнейшем можно использовать в качестве готового фрагмента HTML-документа.

Пусть нам необходимо создать новый конфигурационный файл для серверного варианта карт-изображений. Выберем пункт Open/Create Map из меню

File. Появится диалоговое окно (рис. 6.4 ), в котором следует задать имя создаваемого файла конфигурации (например, Blazons.map), указать существующий файл с изображением и формат создаваемого файла (NCSA или CERN). Файл изображения может иметь формат GIF, JPG или PNG.

Рис. 6.3 . Заставка MapEdit

Рис. 6.4 . Диалоговое окно Open/Create Map для создания конфигурационного файла

Примечание

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

Программа загрузит выбранный файл с изображением, на котором можно будет произвести разметку активных областей (рис. 6.5 ).

Для этого нужно выбрать форму активной области — прямоугольник, круг или прямоугольник путем нажатия соответствующей пиктограммы или выбора нужного пункта из меню Tools (рис. 6.6 ).

Дальнейшие действия производятся непосредственно на изображении путем отметки точек мышью. Для прямоугольной области отмечают левый верхний и правый нижний углы, для круговой области — центр и одну из точек на окружности, для многоугольника задаются его вершины. Для примера на рис. 6.5 показан случай, когда на изображении уже размечены три активных области различной формы. Заметим, что линии, ограничивающие активные области, служат лишь для их визуализации при работе в редакторе и никак не изменяют файл с изображением. Изображение в данном примере по существу содержит три отдельных картинки (изображены гербы городов Санкт-ПетербургТомск и Якутск), что обычно не характерно для реалистических изображений. Однако для изображений, содержащих, например, набор кнопок управления, такая ситуация довольно типична.


Рис. 6.5 . Изображение с размеченными активными областями различного типа

Рис. 6.6 . Меню Tools

Рис. 6.7 . Диалоговое окно Object URL для задания URL-адреса и необязательного комментария

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

После разметки областей можно визуально проконтролировать или изменить созданные активные области, воспользовавшись пунктом Test меню Edit. Последним шагом работы является сохранение результатов в виде файла конфигурации (пункт Save меню File). Можно также использовать пункт Save As, в котором задать требуемый формат сохранения файла (рис. 6.9 ).

Рис. 6.8 . Диалоговое окно Default URL для задания URL-адреса для области по умолчанию

Рис. 6.9 . Диалоговое окно команды Save As

Примечание

Старые версии редактора MapEdit содержали небольшую ошибку, связанную с заданием формата сохраняемого файла конфигурации. Если при создании файла был указан формат CERN, то при сохранении данных в режиме Save файл все равно будет сохранен в формате NCSA. Создать файл формата CERN удается только при использовании режима Save as с указанием требуемого формата.

Для рассматриваемого примера будет создан файл с именем Blazons.map, содержащий следующую информацию (формат NCSA):

#Герб города Томск

rect www.ifmo.ru/sergeev/tomsk.htm 35,58 187,244

#Герб города Якутск

circle www.ifmo.ru/sergeev/jakutsk.htm 364,150 468,150

#Герб города Санкт-Петербург

poly www.ifmo.ru/sergeev/Spb.htm 537,61 700,61 700,230 618,256 537,231

Те же данные, сохраненные редактором в формате CERN, будут выглядеть следующим образом:

rect (35,58) (187,244) www.ifmo.ru/sergeev/tomsk.htm circle (364,150) 104 www.ifmo.ru/sergeev/jakutsk.htm poly (537,61) (700,61) (700,230) (618,256) (537,231) www.ifmo.ru/sergeev/Spb.htm

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

Рассмотрим задачу создания клиентского варианта карты-изображения. Для решения этой задачи необходимо наличие исходного HTML-файла, содержащего хотя бы одно встроенное изображение. Данный исходный файл может быть создан заранее любым текстовым редактором или специальным HTML-редактором. Пусть имеется файл с именем CSIM.HTM, содержащий следующий код:

Этот файл следует открыть в редакторе MapEdit (рис. 6.10 ). В отличие от варианта, в котором выполнялось создание конфигурационного файла, здесь не требуется указание имени файла с изображением в пункте меню Open/Create Map.

Рис. 6.10 . Диалоговое окно Open/Create Map для открытия существующего HTML-файла

Рис. 6.11 . Диалоговое окно Select Inline Image

Редактор после открытия исходного HTML-файла выдаст диалоговое окно с перечнем всех встроенных изображений, из которого необходимо выбрать нужное (рис. 6.11 ). Конечно, файл с выбранным изображением должен существовать.

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

href=»tomsk.htm»>

href=»jakutsk.htm»>

coords=»537,61,700,61, 700, 230, 618, 256, 537,231″ href=»Spb.htm»>

Обратите внимание, что редактор автоматически присваивает имя для описания карты-изображения, которое совпадает с именем файла опорного изображения. Для данного примера файл с изображением имел имя Blazons.gif, поэтому параметру name тега было присвоено значение «Blazons».

Примечание

Редактор MapEdit не совсем корректно работает с символами русского алфавита. Часть русских букв при сохранении файла исчезают и на их месте оказываются пробелы. Самым простым выходом из этой ситуации является добавление русского текста после завершения работы в редакторе.

Программа Map THIS!

Еще одной утилитой создания и редактирования конфигурационных файлов карт-изображений является программа Map THIS!, информацию о которой можно получить по адресу:

http://galadriel.ecaetc.ohio-state.edu/tc/mt/.

Работа с данной программой по идеологии схожа с программой MapEdit. Основой работы с программой является визуальное конструирование активных областей с дальнейшим сохранением результатов в файле в одном из выбранных форматов. Редактор поддерживает оба формата серверного варианта карт-изображений (NCSA и CERN) и клиентский вариант. Изображения могут загружаться из файлов в форматах GIF и JPG.

Приведем примеры файлов конфигурации, созданных данной программой. Для примера, приведенного в предыдущем разделе, файл, сохраненный в формате NCSA, будет иметь следующий вид:

#$MTIMFH

#$-:Image Map file created by Map THIS!

#$-:Map THIS! free image map editor by Todd C. Wilson

#$-:Please do not edit lines starting with «#$»

#$VERSION:1.30

#$TITLE: Blazons

#$DESCRIPTION:Серверный вариант карты-изображения

#$DATE:Tue Sep 14 12:10:42 1999

#$PATH:С:\Program Files\Mapthis\

#$GIF:Blazons.gif

#$FORMAT:ncsa

#$EOH

default default.htm

# Герб города Томск

rect Tomsk.htm 33,60 191,246

# Герб города Якутск

circle Jakutsk.htm 366,147 366,256

# Герб города Санкт-Петербург

poly Spb.htm 534,62 699,62 698,236 626,261 534,235 534,62

В отличие от программы MapEdit, данный редактор записывает в выходной файл довольно много комментирующей информации, включающей краткие сведения о самой программе, дате создания файла и др. При этом после символа #, означающего начало строки комментария, редактор добавляет символ $ для строк-комментариев, создаваемых самим редактором. Обратите внимание на четвертую строчку приведенного кода, в которой содержится просьба не редактировать комментарии, вставленные редактором.

Тот же пример, сохраненный в формате CERN, будет иметь вид:

rect (4096,4096) (4096,4096) mt:#$MTIMFH

rect (4096,4096) (4096,4096) mt:#$-:Image Map file created by Map THIS!

rect (4096,4096) (4096,4096) mt:#$-:Map THIS! free image map editor

by Todd C. Wilson

rect (4096,4096) (4096,4096) mt:#$-:Please do not edit lines starting

with «#$»

rect (4096,4096) (4096,4096) mt:#$VERSION:1.30

rect (4096,4096) (4096,4096) mt:#$TITLE: Blazons

rect (4096,4096) (4096,4096) mt:#$DESCRIPTION: Серверный вариант

карты-изображения

rect (4096,4096) (4096,4096) mt:#$

rect (4096,4096) (4096,4096) mt:#$DATE:Tue Sep 14 12:10:42 1999

rect (4096,4096) (4096,4096) mt:#$PATH:С:\Program Files\Mapthis\

rect (4096,4096) (4096,4096) mt:#$GIF:Blazons.gif

rect (4096,4096) (4096,4096) mt:#$FORMAT:cern

rect (4096,4096) (4096,4096) mt:#$EOH

default default.htm

rect (4096,4096) (4096,4096) mt:# Герб города Томск

rectangle (33,60) (191,246) Tomsk.htm

rect (4096,4096) (4096,4096) mt:# Герб города Якутск

circ (366,147) 109 Jakutsk.htm

rect (4096,4096) (4096,4096) mt:# Герб города Санкт-Петербург

polygon (534,62) (699,62) (698,236) (626,261) (534,235) (534,62) Spb.htm

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

rect (4096,4096) (4096,4096),

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

Тот же пример, сохраненный в виде HTML-файла (для клиентского варианта карт-изображений) будет иметь вид:

ALT=»Герб города Томск»>

ALT=»Герб города Якутск»>

HREF=»Spb.htm» ALT=»Герб города Санкт-Петербург»>

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

Программа CrossEye

Программа-редактор конфигурационных файлов CrossEye, созданная известной австралийской компанией Sausage Software. Эта программа будет встречена с радостью поклонниками популярного HTML-редактора HotDog, поскольку она создана той же компанией и имеет весьма привлекательный, выполненный с юмором, интерфейс.

Информация о пакете CrossEye может быть получена по адресу:

http://www.sausage.com.au.

Отличительными особенностями программы является довольно большой размер дистрибутива (около 2,5 Мб), а также небольшой период времени (14 дней), в течение которого можно ее эксплуатировать в режиме оценки. Большой размер программ характерен для всего программного обеспечения, создаваемого компанией Sausage Software, что, видимо, обусловлено выбором инструментария, используемым для разработки (Visual Basic).

К сожалению, программа не обладает рядом необходимых свойств. Например, отсутствует возможность чтения существующего HTML-файла, поэтому невозможно отредактировать уже имеющуюся карту-изображение, которая была создана ранее. Также невозможно выполнить сохранение результатов работы непосредственно в HTML-файле. Сохранение результатов возможно лишь в файле со специальным расширением EYE, который имеет двоичный вид и может использоваться в дальнейшем только в этом редакторе. Сгенерированный HTML-код записывается в буфер обмена Windows, откуда он может быть скопирован в любой текстовый редактор.

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

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

Недостатки в некотором смысле компенсируются отдельными дополнительными свойствами редактора. В частности, можно узнать, что попугая, который виден в правом верхнем углу приведенного рисунка, зовут Полли. Он весьма разговорчив, и пользователи, работающие на компьютере, оснащенном звуковой картой, время от времени будут слышать возгласы попугая, которые, правда, никак не связаны с выполняемыми действиями. А в одном из диалоговых окон настройки редактора есть даже специальный пункт, позволяющий заткнуть рот бедному попугаю. Вот пример сервиса высшего разряда. Видимо, благодаря перечисленным свойствам, рейтинг этого редактора по оценкам http://www.tucows.com , весьма высок, чего нельзя сказать о двух описанных выше программах.

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

Тематические материалы:

Обновлено: 20.04.2021

103583

Если заметили ошибку, выделите фрагмент текста и нажмите Ctrl+Enter

Карта изображения в HTML

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

Нажмите на определённую часть картинки и Вы перейдёте на соответствующий сайт.

Карта изображения создаётся при помощи тега <map>. У него должен быть атрибут name, который задаёт имя карты. А у тега <img> должен быть атрибут usemap. Его значение совпадает с именем карты, только в начале идёт знак #. Таким образом изображение связывается с определённой картой. Для примера сделаем такое изображение, как на этой странице. Добавим на страницу картинку и создадим для неё карту.

+

8
9
10

<img src="imagemap.jpg" alt="Карта картинки" usemap="#newmap">
<map name="newmap">
</map>

Внутри тега <map> должны находиться теги <area>, определяющие конкретные области, которые становятся ссылками. Для указания области у этих тегов есть атрибут shape. Он устанавливает форму области.

shape=»rect» — прямоугольник

shape=»circle» — круг

shape=»poly» — многоугольник

shape=»default» — всё изображение

Кроме формы области указываются её координаты при помощи атрибута coord. Координаты указываются в пикселях и отсчитываются от левого верхнего угла изображения. Они перечисляются через запятую. Для каждой формы области координаты определяются по-разному. Для прямоугольника нужно указать два угла:

X первого угла, Y первого угла, X второго, Y второго

Для круга указываются координаты центра и радиус:

X центра, Y центра, радиус

Для многоугольника нужно перечислить координаты всех углов:

X1, Y1, X2, Y2

Кроме рассмотренных атрибутов, тег <area> имеет те же атрибуты, что и тег <a>. Прежде всего, атрибут href, указывающий URL, на который нужно перейти.

В примере сделаем одну круглую область и одну прямоугольную. Для этого добавим в тег <map> такой код:

10
11

<area href="http://yandex.ru" shape="circle" coords="100,70,50">
<area href="http://mail.ru" shape="rect" coords="22,143,210,185">

Области на карте изображения могут пересекаться. Выше будет та область, которая идёт раньше в коде страницы.

Как вручную кодировать HTML-карты изображений для вашего веб-сайта

Зона

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

Площади формы

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

Координаты района

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

Карты изображений прямоугольников будут иметь координаты: coords=» x1,y1,x2,y2 » , где xy1 — координаты верхнего левого угла, а xy2 — координаты нижнего правого угла.

Карты изображения круга будут иметь координаты: coords=”x,y,radius” , где xy — координаты центра круга, а радиус — радиус круга.

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

Polygon будут иметь координаты: coords=”x1,y1,x2,y2,x3,y3….” , где каждая пара xy определяет угол фигуры. Итак, треугольник будет иметь три пары, многоугольник пять пар и так далее.

Вы можете использовать программное обеспечение для редактирования изображений, чтобы найти координаты ваших горячих точек.Я использую Photoshop Elements, но Microsoft Paint работает так же хорошо. Откройте рисунок в Paint и наведите курсор на место с нужными координатами. Координаты x,y отображаются в левом нижнем углу экрана приложения.

В моем примере я поместил курсор в верхний левый угол кнопок чтения и записал отображаемые координаты x,y. Затем я повторил процесс, наведя курсор на нижний правый угол.

Нахождение радиуса круглых горячих точек немного сложнее.Как известно, радиус — это расстояние от центра круга до точки на его краю. Для кругов сначала найдите координаты центра. Затем переместите курсор влево или вправо, пока он не окажется за краем. Настройте положение вашего курсора, пока он не будет иметь то же значение y, что и ваша центральная точка. Вычтите меньшее значение x из большего, и вы получите свой радиус.

Примечание: Если вы используете Photoshop Elements, в пункте меню Window убедитесь, что выбрано окно Info .Это перечислит координаты x, y.

URL-адрес области

Для каждой области или формы, на которую вы ссылаетесь, вам нужно будет указать URL-адрес, на который вы ссылаетесь.

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

HTML-карта изображений – Учебник по HTML 8

В этом учебнике по HTML мы узнаем, как использовать карту изображений HTML.Другими словами, вы узнаете, как разделить изображение на части и присвоить каждой части уникальный URL-адрес. Это может быть полезно при назначении ссылок на части обычной карты (например, штаты или города) или даже на звезды галактики 🙂 Также вы получите базовые знания по использованию Photoshop для определения координат на изображении.

Что такое карта изображений HTML?

В предыдущем учебнике по HTML «Изображение в HTML» мы узнали, как назначить ссылку на изображение. Однако также можно разделить одно изображение на несколько частей и добавить URL к каждой части.Изображение, которое разделено на части, называется HTML-картой изображения .

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

 

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

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

Карта-изображение HTML содержит точно такие же координаты, как и любая другая карта. Эти координаты указаны в пикселях и определяют границы части изображения, которой назначен некоторый URL. Чтобы создать карту изображения HTML, мы должны знать координаты всех частей изображения. Вы можете задать координаты изображения в графическом редакторе (например, Photoshop) или использовать для этого онлайн-сервисы.

В Photoshop вы должны просто выбрать нужную область с помощью Rectangular Marquee Tool (M) и определить координаты, наведя курсор мыши на верхний левый угол (13 и 16), а затем на нижний правый угол (64 и 51) .Чтобы увидеть панель Info в Photoshop, нажмите кнопку F8 на клавиатуре или выберите Window => Info в главном меню. Также проверьте параметры информационной панели и убедитесь, что Ruler Units установлены в Pixels .


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

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

Создание карты изображения HTML

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

 

<голова>
Карта изображений HTML
<тип стиля="текст/CSS">
тело {text-align="center"}


<тело>
главное меню
<имя карты="Навигация">
Домашняя страница
Обо мне
Portfolio


 

На этом изображении я указал на кнопку «Портфолио», и вы можете видеть, что в браузере отображается всплывающее сообщение «Портфолио», которое соответствует коду title="Портфолио" .В правом нижнем углу вы можете видеть, что эта кнопка связана с веб-страницей Portugal.html.

 

 

Вы должны указать атрибуты name и id для каждой карты изображения HTML следующим образом:

 <имя карты="x"> 

Атрибут формы тега может быть кругом, прямоугольником и многоугольником:

z 

Атрибут usemap="#map-name" используется с тегом .Это дает вашему браузеру информацию о том, какую карту следует использовать.

HTML-тегов, которые мы изучили на данный момент:

Тег определяет форму (многоугольник, прямоугольник или круг), координаты и URL-адрес части изображения.

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

HTML Standard, издание для веб-разработчиков

HTML Standard, издание для веб-разработчиков Издание

для веб-разработчиков — последнее обновление 14 марта 2022 г.

← 4.8.9 Видеоэлемент — Таблица содержимого — 4.8.16 Mathml →
      1. 4.8.13 карта Элемент Элемент Элемент Элемент
      2. 4.8.15 Карты изображений
    4.8.13
    карта элемент MDN

    Элемент/карта

    Поддержка во всех текущих двигателях.

    Firefox1+Safari1+Chrome1+


    OperaДаEdge79+
    Edge (устаревший)12+Internet ExplorerДа
    Firefox Android4+Safari iOSДаChrome Android18+WebView Android1+Samsung Internet1.0+Opera AndroidДа

    Категории:
    Текучее содержание.
    Фразы содержания.
    Осязаемое содержимое.
    Контексты, в которых может использоваться этот элемент:
    Где ожидается фразовое содержание.
    Модель содержимого:
    Прозрачный.
    Пропуск тега в text/html:
    Ни один из тегов не может быть пропущен.
    Атрибуты содержимого:
    Глобальные атрибуты
    name — Имя карты изображения для ссылки из usemap атрибут
    Вопросы доступности:
    Для авторов.
    Для разработчиков.
    Интерфейс DOM:
    Использует HTMLMapElement .

    Элемент map в сочетании с элементом img и любым область потомков элемента, определяет изображение карты. Элемент представляет своих детей.

    Атрибут name дает на карте имя, чтобы на него можно было сослаться. Атрибут должен присутствовать и должен иметь непустое значение без пробелов ASCII.Значение атрибута name не должно совпадать со значением атрибута name другого элемента map в том же дерево. Если также указан атрибут id , оба атрибуты должны иметь одинаковое значение.

    карта .области

    Возвращает HTMLCollection из элементов области в карта .

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

      Babies™: Игрушки

    Игрушки

    ...

    Одежда | Игрушки | Еда | Книги

    4.8.14
    область элемент MDN

    элемент/область

    Поддержка во всех современных двигателях.

    Firefox1+SafariДаChromeДа


    OperaДаEdgeДа
    Edge (устаревший)12+Internet ExplorerДа
    Firefox Android4+Safari iOSДаChrome AndroidДаВеб-просмотр AndroidДаSamsung InternetДаOpera AndroidДа

    Категории:
    Текучее содержание.
    Фразы содержания.
    Контексты, в которых может использоваться этот элемент:
    Там, где ожидается фразовое содержимое, но только при наличии предка элемента map .
    Модель содержимого:
    Ничего.
    Отсутствие тега в text/html:
    Нет конечного тега.
    Атрибуты содержимого:
    Глобальные атрибуты
    alt — Замещающий текст для использования, когда изображения недоступны
    координаты — Координаты фигуры, которая будет создана на карте изображения создано в карте изображения
    href — Адрес гиперссылки
    цель — Контекст просмотра для навигации по гиперссылке
    загрузка — Следует ли загружать ресурс вместо перехода к нему, и его имя файла, если да
    ping — URL-адреса ping
    rel — Отношения между местом в документе, содержащем гиперссылку и ресурс назначения
    Реферарполиция — Рефереранская политика для выборов, инициированных элементом
    Оценка доступности:
    Если элемент имеет атрибут href : для авторов; для реализаторов.
    Иначе: для авторов; для реализаторов.
    Интерфейс DOM:
    Использует HTMLAreaElement .

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

    Элемент области с родительским узлом должен иметь элемент карты предок.

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

    Если элемент area не имеет href атрибут, то область, представленная элементом, не может быть выбрана, а атрибут alt должен быть опущен.

    В обоих случаях атрибуты shape и coords определяют область.

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

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

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

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

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

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

    В состоянии прямоугольника , Элементы области должны иметь атрибут координат ровно с четырьмя целыми числами, первое из которых должно быть меньше третьего, а второе который должен быть меньше четвертого. Четыре точки должны представлять, соответственно, расстояние от левого края изображения до левой стороны прямоугольника, расстояние от верхнего края до верхней стороны, расстояние от левого края до правой стороны и расстояние от вершины от края до нижней стороны, все в пикселях CSS.

    Цель , скачать , пинг , Атрибуты rel и referrerpolicy должны быть опущены, если атрибут href отсутствует.

    Если атрибут itemprop указан на элемент area , то атрибут href должен также уточняться.

    4.8.15 Карты изображений

    Карта изображений позволяет связывать геометрические области изображения с гиперссылками.

    Изображение в виде элемента img может быть связано с картой изображения (в форма элемента map ), указав атрибут usemap в элементе img . То атрибут usemap , если он указан, должен быть действительным ссылка hash-name на элемент карты .

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

    Если бы мы хотели, чтобы кликабельными были только цветные области, мы могли бы сделать это следующим образом:

      

    Пожалуйста, выберите форму:

    ← 4.8.9 Элемент видео — Содержание — 4.8.16 MathML →

    HTML | Отображение изображения — GeeksforGeeks

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

    Элементы, необходимые для сопоставления изображения:

    Для создания сопоставленного изображения необходимы три основных элемента html.

    1. Карта : Используется для создания карты изображения с кликабельными областями.
    2. Изображение : Используется для источника изображения, на котором выполняется сопоставление.
    3. Площадь: Используется на карте для определения интерактивных областей.
    Шаги для создания сопоставленного изображения:
    • Определение размера изображения:
      Определение размера изображения очень важно, поскольку при изменении размера изображения координаты области также потребуют обновления.
    • Создание карты для наложения изображения:
    • Определите координаты областей, которые вы хотите нанести на карту:
      Это можно сделать в трех формах: прямоугольник, круг и многоугольник. Координаты можно легко найти с помощью MS-Paint.

    Объедините все вышеперечисленные шаги, как показано в приведенном ниже коде.

    26

    6

    26

    < H4 > Отображение изображения

    < тело >

       

    < p >Нажмите на разные континенты на карте, чтобы узнать о них. P >

    < SRC = "World-Map-151576_960_720.png" Ширина = "960" "960" Высота = "492"

    alt = "карта мира" rusemap = "#worldmap" >

    < карта Имя = "WorldMap" >

    < площадь Форма = "RELE" Координы = "184, 36, 272, 158 " alt = " Северная Америка "

    < площадь Форма = " Координы = "282, 215, 354, 367" alt = "Южная Америка"

    < площадь Форма = "REBLE" Координы = "506, 151, 570, 333" alt = "Африка"

    < площадь Форма = "REBLE" Координы = "618, 42, 791, 162" alt = "Азия"

    < площадь Форма = "REBLE" Координы = "509, 44, 593, 110" alt = "Европа"

    < площадь Форма 9 0127 = = Координы = = "786, 298, 862, 341" alt = "Австралия"

    < Область Форма = "RELE" = = = "249, 463, 760, 488" Alt = "Антартика"

    карта >

    26 >

    HTML >

    Выход:

    Источник изображения: HTTPS: // www.pixabay.com/photo/2013/07/12/16/57/world-map-151576_960_720.png


    Проблема с координатами карты изображения HTML

    Глядя на ваш код, кажется, что у вас есть отдельные файлы изображений, которые ссылаются на одну и ту же карту изображений newsmap , но карты изображений используются не так.

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

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

    Итак, во-первых, хотя я могу ответить на ваш технический вопрос о том, как это сделать, вы все равно можете не выполнить задание, если примете неправильное решение. Что на самом деле просил ваш учитель? Например:

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

    или

    • учащиеся должны создать веб-страницу и продемонстрировать, что они знают, как сделать одно изображение и определить интерактивные области с помощью функции карты изображения

    Вы должны быть уверены в том, что на самом деле было вашим заданием.

    Если заданием была карта изображений, то да, в этом есть смысл:

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

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

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

    Спецификация html4:

    http://www.w3.org/TR/html401/struct/objects.html#h-13.6.1

    Координаты относительно верхнего левого угла объекта. Все значения являются длинами. Все значения разделяются запятыми.

    Спецификация html5:

    http://www.w3.org/TR/html5/embedded-content-0.html#the-area-element

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

    Хотя я использую более старую версию GIMP, 2.8.2 от 2013 года, она должна быть такой же, где бы ни был курсор, нижняя левая строка состояния экрана указывает координаты изображения, и это всегда 0,0 в левом верхнем углу, как вам нужно, чтобы получить координаты, используемые для кода карты изображения html.

    , но когда вы нажимаете на второе изображение, вы переходите к статье, связанной с первым изображением.

    Потому что:

    • у вас есть первое изображение, говорящее: «Моя карта изображений определяется картой новостей ».
    • Затем второе изображение тоже говорит мне: «Моя карта изображений определяется картой новостей ».
    • , но функция карты изображений никогда не предназначалась для нескольких изображений, использующих одно и то же определение карты изображений
    • , поэтому карта изображений карта новостей определяет несколько регионов.В левом верхнем углу находится страница 80-минутного альбома .
    • , поэтому при нажатии на верхний левый угол первого изображения отображается ссылка на карту новостей и распознается О, щелчок здесь означает переход на страницу 80-минутного альбома
    • , но щелкнув верхний левый угол второго изображения, поскольку оно также ссылается на карту новостей , он просто подумает: «О, верхний левый угол означает перейти на страницу 80-минутного альбома ».
    • таким образом, почему у вас есть появление первого и второго изображений, идущих на одну и ту же страницу

    Чтобы исправить это снова, вы должны перепроверить инструкции учителя.

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

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

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

    : MGA

    Об DoITHTML TutorialУчебник по JavaScriptУчебник по XMLУчебник по PHP 

    Глава 1. Создание веб-страницГлава 2. Базовый макет документаГлава 3. Основные стили документаГлава 4. Форматирование текстаГлава 5. Графические изображенияГлава 6. Применение специальных стилейГлава 7. Связывание страницГлава 8. Использование таблицГлава 9. Игра МультимедиаГлава 10. Создание формГлава 11. Дизайн веб-сайтовHTML/CSS Приложение  

    Текстовые ссылкиГрафические ссылкиКарты изображенийПеренаправление страницОбход папок

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

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

    Рисунок 7-12. Карта изображений и сопровождающие текстовые ссылки.


    Определение нанесенных на карту областей

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

    На рис. 7-13 показано изображение, из которого сделана приведенная выше карта изображений. Изображение отображается в Программа Windows Paint, которая может отслеживать движение мыши по изображению.

    Рисунок 7-13. Определение горизонтальных и вертикальных координат на графическом изображении.

    Обратите внимание, что в строке состояния окна отображаются горизонтальные и вертикальные координаты «карандаша». отображается указатель. Указатель находится в одном из углов многоугольника, а отслеживание позиция показывает 175 200. Другими словами, указатель находится на расстоянии 175 пикселей от левого края изображения. (горизонтальное положение) и 200 пикселей от верхнего края изображения (вертикальное положение).Координаты всегда отсчитываются от верхнего левого угла полного изображения.

    Вам нужна разная информация о местоположении в зависимости от формы отображаемой области.

    Для прямоугольника вам нужно знать горизонтальные и вертикальные координаты верхнего левого и нижнего правого углы. Эти две координаты h,v можно определить, поместив указатель карандаша в каждый из этих углов. и чтение координат из строки состояния. На приведенном выше рисунке эти две координаты пикселей равны верхний левый = 8,13 и нижний правый = 130 123.

    Для круга нужно знать координаты центральной точки и ширину радиуса в пикселях. Координаты центра приведенного выше круга определяются путем помещения указателя карандаша в (приблизительно) центр и чтение строки состояния = 228 123. Радиус - это расстояние от центра до края круга. Вы можете определить радиус, прочитав координаты правого края круга (в том же вертикальном положении, что и его центральная точка) и найдя разницу между горизонтальным центром и горизонтальным краем: радиус = (290 - 228) = 62.

    Для многоугольника вам необходимо знать координаты каждой из его угловых точек, проходящих по часовой стрелке или против часовой стрелки вокруг его границ, начиная с любой угловой точки многоугольника. Следуя по часовой стрелке от вершины многоугольника выше, координаты равны 100 144; 175 200; 155 255; 50 250; и 45 172.

    Имея на руках эти координаты формы, вы готовы закодировать карту изображения и назначить URL-ссылки для разные формы.

    Кодирование карты изображения

    Изображение, которое должно стать картой изображений, размещается на странице с помощью тега .Вместе со своими стандартными атрибутами этот тег содержит атрибут usemap =" mapname " который указывает на одноименный тег , дающий описание области изображения, доступные для ссылки. Общие форматы для и тегов показаны в листинге 7-14.

          text 
    
           <имя карты="имя карты"    > 
             <область  
              форма="прямоугольник|круг|поли" 
              координаты="координаты" 
              href="ссылка" 
              альт="текст" 
            > 
          ...
             
     

    Листинг 7-14. Связывание отображаемого изображения с картой изображений.

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

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

          Карта изображения 
    
          <имя карты="MyImageMap"> 
            <площадь формы="прямая" координаты="8,13,130,123" 
              href="#LINK1" alt="Определение отображаемых областей"/> 
            <площадь формы="круг" координаты="228,123,62" 
              href="#LINK2" alt="Кодирование карты изображения"/> 
            
              href="#LINK3" alt="Перекрывающиеся сопоставленные области"/> 
           
     

    Листинг 7-15. Кодирование карты изображения.

    Обратите внимание на связь между usemap="#MyImageMap" в теге и name="MyImageMap" в теге . Идентификатор "MyImageMap" связывает карту изображения с графическим изображением. Кроме того, при кодировании последней страницы как , так и Теги должны находиться внутри тега уровня блока, например

    или <дел> .

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

    • Когда shape="rect" (прямоугольник), координаты задаются четырьмя числами, разделенными запятыми. Это обозначение представляет собой две пары координат h,v , первая пара дает координаты верхнего левого угла прямоугольника, а вторая пара дает координаты нижнего правого угла (8,13,130,123).
    • Когда shape="circle" координаты задаются тремя числами, разделенными запятые. Первые два числа представляют h,v координаты центральной точки окружности. а последнее число — это ширина радиуса в пикселях (228,123,62).
    • Когда shape="poly" (polygon), координаты задаются как можно большим количеством пар h,v координаты, так как на многоугольнике есть точки.Пары номеров могут быть перечислены по часовой стрелке или против часовой стрелки вокруг полигона; они разделены пробелами (100 144 175 200 155 255,50 250 45 175).

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

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

    Перекрывающиеся области карты

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

    В примере на рис. 7-14 щелчок в области перекрытия ведет к URL-адресу, указанному для shape="rect". Его определение отображается перед shape="circle" на карте изображения, хотя изображение круга накладывает изображение прямоугольника.

          <имя карты="ImageMap"> 
            <форма области = "прямая" ...> 
            <форма области = "круг" ...> 
           
     

    Рис. 7-14. Приоритет перекрывающихся областей карты изображений.

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

    Кодирование страницы карты изображения

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

           
    
           
          <заголовок> 
             </code> Использование карт изображений <code>  
    
          <стиль> 
          тело {поле:20px}
          .центр {выравнивание текста: центр}
           
    
           
          <тело> 
    
           

    Использование карт изображений <р> Карта изображения <имя карты="MyImageMap"> <площадь формы="прямая" координаты="8,13,130,123" href="#LINK1" alt="Определение отображаемых областей>" <площадь формы="круг" координаты="228,123,62" href="#LINK2" alt="Кодирование карты изображения" > href="#LINK3" alt="Перекрывающиеся сопоставленные области">

    <р> Определение сопоставленных областей | Кодирование карты изображений | Перекрывающиеся сопоставленные области

    Определение сопоставленных областей ...текст...

    Топ

    Кодирование карты изображения ...текст...

    Топ

    Перекрывающиеся сопоставленные области ...текст...

    Топ

    Листинг 7-16. Кодирование страницы карты изображения.

    В этом примере используются ссылки на странице для карты изображения. Атрибут href <область> Тег также может открывать внешний веб-сайт в том же или в новом окне браузера.


    ВЕРХ | ДАЛЕЕ: Перенаправление страниц

    : Элемент области карты изображения — HTML: язык гипертекстовой разметки

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

    Этот элемент используется только внутри элемента .

    Атрибуты этого элемента включают глобальные атрибуты.

    альтернативный

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

    координаты

    Атрибут coords детализирует координаты атрибута shape в размере, форме и размещении . Этот атрибут нельзя использовать, если для формы установлено значение по умолчанию .

    • прямоугольник : значение равно x1,y1,x2,y2 .Значение указывает координаты верхнего левого и нижнего правого углов прямоугольника. Например, в Mozilla координаты 0,0 и 253, 27 , обозначающие левый верхний и правый нижний углы прямоугольника соответственно.
    • круг : значение x,y,радиус . Значение указывает координаты центра окружности и радиус.Например: MDN
    • поли : значение равно x1,y1,x2,y2,..,xn,yn . Значение указывает координаты ребер полигона. Если первая и последняя пары координат не совпадают, браузер добавит последнюю пару координат, чтобы закрыть полигон.

    Значения представляют собой количество пикселей CSS.

    скачать

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

    ссылка

    Цель гиперссылки для области. Его значение является действительным URL-адресом. Этот атрибут может быть опущен; если да, то элемент не представляет собой гиперссылку.

    hreflang

    Указывает язык связанного ресурса.Допустимые значения определены RFC 5646: Теги для идентификации языков (также известный как BCP 47). Используйте этот атрибут, только если присутствует атрибут href .

    эхо-запрос

    Содержит разделенный пробелами список URL-адресов, на которые при переходе по гиперссылке браузер будет отправлять запросов POST с телом PING (в фоновом режиме). Обычно используется для отслеживания.

    реферальная политика

    Строка, указывающая, какой реферер использовать при извлечении ресурса:

    • no-referrer : Заголовок Referer не будет отправлен.
    • no-referrer-when-downgrade : заголовок Referer не будет отправляться источникам без TLS (HTTPS).
    • origin : Отправленный реферер будет ограничен источником ссылающейся страницы: ее схема, хост и порт.
    • origin-when-cross-origin : Реферер, отправленный в другие источники, будет ограничен схемой, хостом и портом. Навигации в одном и том же источнике по-прежнему будут включать путь.
    • тот же источник : Реферер будет отправлен для того же источника, но запросы между источниками не будут содержать информации о реферере.
    • strict-origin : отправляйте источник документа в качестве реферера, только если уровень безопасности протокола остается прежним (HTTPS→HTTPS), но не отправляйте его в менее безопасный пункт назначения (HTTPS→HTTP).
    • strict-origin-when-cross-origin (по умолчанию): отправлять полный URL-адрес при выполнении запроса того же источника, отправлять источник только при неизменном уровне безопасности протокола (HTTPS→HTTPS) и не отправлять заголовок в менее безопасное место назначения (HTTPS→HTTP).
    • unsafe-url : реферер будет включать источник и путь (но не фрагмент, пароль или имя пользователя). Это значение небезопасно , поскольку оно приводит к утечке источников и путей от ресурсов, защищенных TLS, к небезопасным источникам.
    отн.

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

    форма

    Форма связанной горячей точки. Спецификации для HTML определяют значения rect , которые определяют прямоугольную область; окружность , определяющая круговую область; poly , который определяет многоугольник; и по умолчанию , что указывает на всю область за пределами любых определенных форм.

    цель

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

    • _self (по умолчанию): Показать ресурс в текущем контексте просмотра.
    • _blank : Показать ресурс в новом безымянном контексте просмотра.
    • _parent : Показать ресурс в родительском контексте просмотра текущего, если текущая страница находится внутри фрейма.Если родителя нет, действует так же, как _self .
    • _top : Показать ресурс в самом верхнем контексте просмотра (контекст просмотра, который является предком текущего и не имеет родителя). Если родителя нет, действует так же, как _self .

    Используйте этот атрибут, только если присутствует атрибут href .

    Примечание: Настройка target="_blank" для элементов неявно обеспечивает то же поведение rel , что и настройка rel="noopener" , которая не устанавливает window.открывалка . См. совместимость браузера для статуса поддержки.

    Устаревшие атрибуты

    имя

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

Добавить комментарий

Ваш адрес email не будет опубликован.