Карта html изображения: Изображение карта — Учебник HTML — Schoolsw3.com

Leave a Comment / Html / By /

Учебник 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 :: Карты-изображения

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

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

Карта-изображение (от англ. image map) – это изображение, содержащее специальные активные зоны, являющиеся гиперссылками.

Карты-изображения применяются в двух вариантах: серверном и клиентском, которые задаются, соответственно, атрибутами ismap и usemap элемента «img». Первый атрибут является логическим и не принимает значений, являясь индикатором, а второй – в качестве значения принимает имя специального элемента «map», перед которым ставится знак решетки.

Рассмотрим эти два вида графических карт подробнее.

Серверные карты-изображения строятся следующим образом: создается элемент «a», атрибут href которого указывает адрес программы-обработчика, расположенной на сервере, затем внутри гиперссылки «a» располагается элемент «img», у которого указывается атрибут ismap. При нажатии по какой-либо активной зоне такого изображения, на сервер будут переданы координаты x и y щелчка мыши, которые отсчитываются от верхнего левого угла изображения. Координаты отправляются на сервер методом GET, т.е. передаются вместе с адресом серверной программы-обработчика, указанного в атрибуте href гиперссылки, непосредственно в самом адресе и перечисляются через запятую после знака вопроса. На сервере программа-обработчик принимает координаты и решает, какой документ необходимо отправить в ответ. Рассмотрим конкретный код, показанный в примере №1. Отображение соответствующей страницы в браузере показано на рис.

№2.

HTML okmysiteCodes

<!DOCTYPE html>
<html>
<head>
	<!-- Привыкаем задавать служебные элементы -->
	<meta charset="utf-8">	
	<base href="https://site.name/okmysite_files/">
	<link rel="stylesheet" href="css/style_1.css">
	<script src="javascript/code_1.js"></script>
	<title>Серверная карта-изображение</title>
</head>
<body>
	Это изображение &ndash; серверная карта. <br>
	
	<!-- Создаем серверную карту -->
	<a href="php/test.php">
		<img src="images/html_images/example_4_3a.png" alt="map_2" ismap>
	</a> 
	
	<p>
		Кликните по нужной фигуре, чтобы перейти <br>
		на страницу ее описания.
	</p>
</body>
</html>

Пример №1. Формирование серверной карты-изображения

Рис. №2. Отображение страницы с использованием серверной карты-изображения браузером

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

Клиентские карты-изображения, наоборот, располагаются полностью на компьютере пользователя и строятся с использованием элементов «map» и «area». Элемент «map» формируется парным тегом <map> (от англ. map

– карта). Он связывается с картой-изображением через свой атрибут name. Значение данного атрибута должно совпадать со значением атрибута usemap (знак решетки при этом нужно опускать) соответствующего элемента «img», выступающего в роли клиентской карты-изображения. Кроме того, элемент «map» является контейнером для хранения элементов «area», каждый из которых определяет активную область карты-изображения и превращает их в гиперссылки. Формируется элемент «area» при помощи одиночного тега <area> (от англ. area – область, регион), т. е. является пустым элементом (см. пример №3).

HTML okmysiteCodes

<!DOCTYPE html>
<html>
<head>
	<!-- Привыкаем задавать служебные элементы -->
	<meta charset="utf-8">	
	<base href="http://localhost/test/">
	<title>Клиентская карта-изображение</title>
</head>
<body>
	Это изображение &ndash; клиентская графическая карта. <br>
	
	<!-- Привязываем к изображению карту map_3 (не забываем про знак решетки) -->
	<img src="images/html_images/example_4_5a.png" alt="map_3" usemap="#map_3">
	
	<map name="map_3">
		<!-- Указываем активные области карты -->
		<area href="page_1.html" shape="circle" coords="70,75,50">
		
		<!-- Эта ссылка откроется в новом окне -->
		<area href="page_2.html" target="_blank" shape="poly" 
		coords="130,125, 150,125, 140,25, 130,125">
		
		<area href="page_3.html" shape="rect" coords="170,125, 240,25">
	</map>
	
	<p>
		Кликните по нужной фигуре, чтобы перейти <br>
		на страницу ее описания. 
	</p>
</body>
</html>

Пример №3. Формирование клиентской карты-изображения

Поскольку элемент «area» служит для создания гиперссылок, то он обладает всеми атрибутами элемента «a»: href, target, download, rel, hreflang, type (смотреть). Кроме того, он связан с изображением и служит для определения его активных зон, поэтому обладает еще и дополнительными атрибутами: alt, shape и coords (от англ. coordinates).

Атрибут alt задает альтернативный текст для данной активной зоны изображения.

Атрибут shape определяет форму данной активной зоны изображения, а coords задает для нее координаты в пикселях, которые отсчитываются от верхнего левого угла изображения, где считается, что x=0px и y=0px. В качестве значений shape принимает:

  • «circle» – область в виде окружности; через запятую указываются координаты x и y центра окружности, а также ее радиус, например, coords=»150, 200, 120″;
  • «default» – вся область изображения;
  • «poly» (от англ. polygon) – область в виде произвольного многоугольника; через запятую указываются координаты x, y его вершин, начиная с любой и заканчивая обход в стартовой точке, например, coords=»50,70, 64,82, 85,82, 130,60, 50,70″;
  • «rect» (от англ. rectangle) – область в виде прямоугольника; через запятую указываются координаты x, y левого верхнего и правого нижнего углов, например, coords=»50,70, 154,213″.

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

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

Еще один пример карты-изображения можно посмотреть на соответствующей странице нашего учебного сайта №1.

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

О DoITУчебник по HTMLУчебник по JavaScriptУчебник по XMLУчебник по PHP

Глава 1. Создание веб-страниц Глава 2. Базовый макет документа Глава 3. Основные стили документа Глава 4. Форматирование текста Глава 5. Графические изображения Глава 6. Применение специальных стилей Глава 7. Связывание страниц — Использование таблицГлава 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 » который указывает на одноименный тег , дающий описание области изображения, доступные для ссылки. Общие форматы для и <карта> 9Теги 0051 показаны в листинге 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" (полигон), координаты задаются как можно большим количеством пар 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 <область> Тег также может открывать внешний веб-сайт в том же или в новом окне браузера.


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

Краткая история карт изображений

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

- Марк Андриссен, ссылаясь на добавление карт изображений в Mosaic в 1993 .

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

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

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

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

Например, я могу создать карту изображений:

При нажатии на это изображение браузер отправит пользователя по URL-адресу с добавленными координатами:

 /cgi-bin/handle-map-click.pl?16,122

(это предшествовало полному внедрению современного синтаксиса параметров GET, предложенного Марком Андриссеном в 1993 г.) большой ужас сообщества стандартов). Тег был добавлен только в феврале 1993 года.

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

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

Тим Бернерс-Ли сделал интересное предложение, что вместо отправки значений пикселей браузер должен отправлять значение с плавающей точкой от 0,0 до 1,0 , представляющее, где пользователь щелкнул относительно высоты и ширины изображения. Это позволит браузерам отправлять изображения разного размера в зависимости от пропускной способности и разрешения клиента, используя один и тот же код на стороне сервера. (Однако фактическая реализация этого динамического размера изображения не войдет в спецификацию HTML5 более десяти лет).

Спецификация была усовершенствована для перехода к использованию реальных параметров GET в HTML+ (это было кодовое название работы над HTML примерно в 1993 году). Атрибут ismap также был перенесен в элемент fig , который считался лучшей заменой img :

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

Спецификация также допускала приложения, в которых вы щелкаете и перетаскиваете область изображения, отправляя вас на URL-адрес с суффиксом:

 ?x=X&y=Y&w=W&h=H

Спецификация также, что очень интересно, включала поддержку размещения кнопок поверх изображений, подобно тому, как сегодня работают аннотации на YouTube:

 
Нажмите на треугольник или прямоугольник
Линейный рисунок с

треугольник и
 5,0.25&0.5,0.5&0.8,0.5&0.8,0.25" HREF="button2.html">
прямоугольник

Что будет отображаться как:

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

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

Так было до тех пор, пока в январе 19 года не был представлен HTML 3.2.97, что была введена «современная» реализация карт изображений. Это реализация, с которой вы, скорее всего, сталкивались (надеюсь, раньше) в своей карьере.

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

  png" alt="Карта веб-сайта" usemap="#mapname" />
<имя карты="имя карты">
  <площадь форма="прямая" координаты="9,372,66,397" href="http://en.wikipedia.org/" alt="Википедия" title="Википедия" >

Элементы area могут использовать shape rect для прямоугольников, poly для произвольных многоугольников и circle для... кругов.

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

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

Карты изображений на стороне клиента привели к распространению всевозможных полезных карт изображений, таких как этот пример из Википедии:

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

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *