Создание карты изображения в 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, который поможет нам связать картинку с картой изображения. И рассмотрим еще парочку живых примеров карт изображений на разных картинках.