2. КАРТА-ИЗОБРАЖЕНИЯ ПОЗВОЛЯЕТ
ПРИВЯЗЫВАТЬ ССЫЛКИ К РАЗНЫМ
ОБЛАСТЯМ ОДНОГО ИЗОБРАЖЕНИЯ.

3. РАССМОТРИМ СИНТАКСИС КАРТЫ
ИЗОБРАЖЕНИЯ:
<IMG SRC= " 1.gif " usemap="# имя карты">
…
<MAP NAME="имя карты">
<AREA…>
<AREA…>
…
<AREA…>
</ MAP >

4. Имя Возможные значения Смысл
атрибута
SHAPE RECT – прямоугольник определяет форму
CIRCLE – круг области
POLY – многоугольник
COORDS координаты области в
пикселях
ТЕГ <AREA...>
HREF URL адрес документа
ОПИСЫВАЕТ УЧАСТОК ИЗОБРАЖЕНИЯ И СТАВИТ
NOHREF данной области не
ЕМУ В СООТВЕТСТВИЕ URL ИЛИ КАРТИНКУ.
соответствует никакая
ВОЗМОЖНЫЕ АТРИБУТЫ:
ссылка
TITLE строка Название выделенной
области
ALT строка текстовое описание
области
TARGET _BLANK – загружает страницу в новое куда браузер будет
окно браузера загружать документ
_SELF – загружает страницу в текущее
окно

5. ВИДЫ COORDS ДЛЯ КАЖДОЙ
ФОРМЫ :
Значение SHAPE Синтаксис Значения
COORDS COORDS
RECT прямоугольник COORDS="x1, y1, x2,
y2"
CIRCLE круг COORDS="x0, y0, r"
POLY многоугольник COORDS="x1, y1, x2,
y2, x3, y3, ..."

6. АТРИБУТ COORDS - ОПРЕДЕЛЯЕТ КООРДИНАТЫ
(ПОЛОЖЕНИЕ НАШЕЙ ГЕОМЕТРИЧЕСКОЙ ФОРМЫ).
ЧИСЛО КООРДИНАТ И ПОРЯДОК ИХ ЗНАЧЕНИЙ
ЗАВИСЯТ ОТ ВЫБРАННОЙ НАМИ ФОРМЫ.
Отсчет ведется от левого верхнего угла картинки,
считайте его началом координат (0;0).
x1 и y1 – координаты верхнего левого угла
x2 и y2 – координаты нижнего правого угла
Порядок записи координат для атрибута coords следующий:
<AREA SHAPE= "RECT" COORDS="x1,y1,x2,y2">

7. x0 и y0 - координаты центра,
r – радиус круга
Порядок записи координат для атрибута coords следующий:
<AREA SHAPE= " CIRCLE" COORDS="x0,y0,r" >

8. x1, y1, x2, y2, x3, y3, ...- координаты вершин многоугольника.
Порядок записи координат для атрибута coords следующий:
<AREA SHAPE="poly" coords="x1,y1,x2,y2,x3,y3,…" >

9. ДАВАЙТЕ РАССМОТРИМ ПРИМЕР СОЗДАНИЯ
ВИНЬЕТКИ:
- области подпишем как имя и фамилия человека на фото;
- сделаем ссылку для каждой фотографии на страницу вк;
- каждая страница должна открываться в новом окне браузера

10. КООРДИНАТЫ РАСПОЛОЖЕНИЯ ФОТОГРАФИЙ МОЖНО НАЙТИ
С ПОМОЩЬЮ САЙТА
HTTP://WWW.MASCHEK.HU/IMAGEMAP/IMGMAP

11. СОЗДАДИМ КАРТУ И СВЯЖЕМ ЕЁ С
КАРТИНКОЙ. ПИШЕМ:
<IMG SRC="пример.png" USEMAP="#karta">
<MAP NAME="karta">

12. ПОТОМ ОПРЕДЕЛЯЕМ ОБЛАСТЬ ОЧЕРТАНИЯ
КАЖДОЙ ФОТОГРАФИИ:
<AREA SHAPE="rect" COORDS="26,24,187,194" >
<AREA SHAPE= "rect" COORDS="321,208,461,371" >
<AREA SHAPE="rect" COORDS="585,26,744,194" >

13. НАЗОВЕМ НАШИ ОБЛАСТИ:
<AREA SHAPE="rect" COORDS="26,24,187,194"
TITLE="Шевченко Екатерина" >
<AREA SHAPE= " rect" COORDS="321,208,461,371"
TITLE="Груба Лилия" >
<AREA SHAPE="rect" COORDS="585,26,744,194"
TITLE="Малишевская Анна" >

14. ТЕПЕРЬ ПРОПИШЕМ КУДА ОБЛАСТИ
ОЧЕРТАНИЯ БУДУТ ССЫЛАТЬСЯ:
<AREA SHAPE="rect" COORDS="26,24,187,194"
TITLE="Шевченко Екатерина"
HREF="http://vk.com/id13096361">
<AREA SHAPE= " rect"
COORDS="321,208,461,371" TITLE="Груба
Лилия"
HREF=" http://vk.com/id107900288">
<AREA SHAPE="rect" COORDS="585,26,744,194"
TITLE="Малишевская Анна"
HREF="http://vk.com/id33387953">

15. С ПОМОЩЬЮ АТРИБУТА TARGET СДЕЛАЕМ ТАК, ЧТОБЫ
СТРАНИЦА ЗАГРУЖАЛАСЬ В НОВОЕ ОКНО БРАУЗЕРА:
<AREA SHAPE="rect" COORDS="26,24,187,194"
TITLE="Шевченко Екатерина"
HREF="http://vk.com/id13096361"target="_blank">
<AREA SHAPE= " rect" COORDS="321,208,461,371"
TITLE="Груба Лилия" HREF="
http://vk.com/id107900288 "target="_blank">
<AREA SHAPE="rect" COORDS="585,26,744,194"
TITLE="Малишевская Анна"
HREF="http://vk.com/id33387953" target="_blank">

16. НУ, И ЗАКОНЧИ ВСЕ ЭТО ЗАКРЫВАЮЩИМСЯ
ТЕГОМ:
</MAP>

17. А SRC="пример.png" USEMAP="#karta">
<IMG ВОТ И ПОЛНЫЙ КОД ВСЕХ ТРЕХ КНОПОК
<MAP NAME="karta"> ИЗОБРАЖЕНИЯ:
НАШЕГО
<AREA SHAPE="rect" COORDS="26,24,187,194"
TITLE="Шевченко Екатерина"
HREF="http://vk.com/id13096361"target="_blank">
<AREA SHAPE= " rect" COORDS="321,208,461,371"
TITLE="Груба Лилия"
HREF=" http://vk.com/id107900288 "target="_blank">
<AREA SHAPE="rect" COORDS="585,26,744,194"
TITLE="Малишевская Анна"
HREF="http://vk.com/id33387953" target="_blank">
</MAP>