Опубликован: 25.10.2006 | Уровень: для всех | Доступ: платный
Лекция 7:

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

< Лекция 6 || Лекция 7: 12345 || Лекция 8 >

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

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

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

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

Карты изображений, обрабатываемые браузером

Автономные (обрабатываемые браузером) карты изображений описываются с помощью атрибута usemap тега <img>:

<img src="figure_1.png" usemap="#coordinates">

Где "figure_1.png" - имя файла, содержащего изображение, "#coordinates" - ссылка на часть HTML-документа, описывающего координатные области.

Координатные области карты изображений определяются при помощи тегов <map> и <area>.

Тег <area> описывает координаты отдельной области изображения, параметры которой и адрес гиперссылки задаются при помощи атрибутов shape, coords и href.

Атрибут shape определяет форму области-ссылки. По умолчанию ему присваивается значение shape="rect" - прямоугольник. Также область может быть описана в форме окружности ( shape="circle" ) или многоугольника ( shape="poly" ).

Атрибут coords определяет размеры области. В зависимости от типа размечаемой области может меняться значение этого атрибута. Так для shape="rect" указываются две пары координат (левого верхнего и правого нижнего угла прямоугольника) в пикселях. Для shape="circle" указываются координаты центра окружности и ее радиус, а для shape="poly" последовательно указываются координаты вершин многоугольника.

Атрибут href задает URL-адрес ссылки для перехода в случае щелчка мышью на выбранной области.

Заданные при помощи тегов <area> координатные области изображения ограничиваются при помощи тегов <map> - </map>.

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

<html>
<body>
<img src="figure_1.png" width="297" height="210" border="0" 
  alt="Карта изображений" usemap="#coordinates">
<map name="coordinates">
  <area shape="rect" coords="130,194,270,130" href="rect.html" alt="Прямоугольник">
  <area shape="circle" coords="73,90,40" href="circle.html" alt="Круг">
  <area shape="poly" coords="168,109,280,109,223,13" href="polygon.html" 
 alt="Полигон (треугольник)">
</map>
</body>
</html>

Пример выполнения данного HTML-кода

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

<html>
<body>
  Вы выбрали прямоугольник
</body>
</html>

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

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

<html>
<body>
<img src="figure_2.png" width="297" height="210" border="0" usemap="#coordinates">
<map name="coordinates">
  <area shape="rect" coords="84,173,224,109" href="rect.html" alt="Прямоугольник">
  <area shape="circle" coords="130,110,40" href="circle.html" alt="Круг">
  <area shape="poly" coords="105,138,217,138,161,42" href="polygon.html" 
  alt="Полигон (треугольник)">
</map>
</body>
</html>

Пример выполнения данного HTML-кода

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

<html>
<body>
<img src="figure_2.png" width="297" height="210" border="0" usemap="#coordinates">
<map name="coordinates">
  <area shape="circle" coords="130,110,40" href="circle.html" alt="Круг">
  <area shape="poly" coords="105,138,217,138,161,42" href="polygon.html" 
  alt="Полигон (треугольник)">
  <area shape="rect" coords="84,173,224,109" href="rect.html" alt="Прямоугольник">
</map>
</body>
</html>

Пример выполнения данного HTML-кода

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

Карты изображений, обрабатываемые на сервере, описываются с помощью атрибута ismap тега <img>, располагающегося между тегами <a> - </a>, например:

<a href="tryhtml_ismap.htm">
  <img src="figure_1.png" ismap>
</a>

Где "tryhtml_ismap.htm" – файл на сервере, описывающий координатные области изображения.

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

<html>
<body>
<a href="tryhtml_ismap.htm">
  <img src="figure_1.png" width="297" height="210" border="0" alt="Карта       
  изображений" ismap>
</a>
</body>
</html>

Пример выполнения данного HTML-кода

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

< Лекция 6 || Лекция 7: 12345 || Лекция 8 >
Анна Королёва
Анна Королёва

Пожалуйста, уточните, кто автор курса Основы работы с HTML ?

Федор Антонов
Федор Антонов

Здравствуйте!

Записался на ваш курс, но не понимаю как произвести оплату.

Надо ли писать заявление и, если да, то куда отправлять?

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