16.10. Как работать с тегами MAP и AREA?

В: Как разметить картинку на кликабельные зоны?

О: Чтобы выводить на экран изображение (тег <img>) и его разметку (теги <map> и <area>), необходимо в первую очередь включить распознавание HTML:

usehtml=1

Далее с помощью тега <img> выводим на экран изображение:

*p "<img src='путь к файлу изображения/картинка.jpg' usemap='#groundit'>"

В атрибуте src тега указываем путь к файлу изображения, а в атрибуте usemap прописываем символ # (решётка) и значение, вписанное в атрибут name тега <map>, о котором далее. Атрибут usemap — это своего рода ссылка на соответствующий тег <map>. Таким образом вы можете разметить несколько изображений, ссылаясь из тегов <img> на соответстующие контейнеры <map> с помощью атрибута usemap.

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

! открываем контейнер MAP, не забывая указать значение атрибуту name
*p "<map name='groundit'>"
    ! перечисляем кликабельные области в тегах AREA

    ! размечаем прямоугольную область:
    *p "<area shape='rect' coords='50,50,350,200' href='EXEC:pl ""Вы кликнули по прямоугольнику.""'>"
    ! размечаем круглую область:
    *p "<area shape='circle' coords='475,325,75' href='EXEC:pl ""Вы кликнули по круглой области.""'>"
    ! размечаем область в форме звезды
    *p "<area shape='poly' coords='100,420,139,333,80,285,160,285,180,240,197,285,260,285,211,327,245,420,171,360' href='EXEC:pl ""Вы кликнули по полигону в форму звезды.""'>"
    ! размечаем область в форме стрелки
    *p "<area shape='poly' coords='401,84,506,84,506,52,611,117,506,181,506,149,401,149' href='EXEC:pl ""Вы кликнули по полигону в форму стрелки.""'>"
! закрываем контейнер MAP
*p "</map>"

Итак, каждый тег <area> используется, чтобы описать отдельную кликабельную область изображения. Здесь мы используем следующие атрибуты:

shape — в этом атрибуте указываем форму кликабельной области. Можно указать такие значения:
- rect — задаём прямоугольную кликабельную область. При выборе такого значения для shape, в атрибуте coords перечисляются координаты левого верхнего угла прямоугольника (X1,Y1) и координаты нижнего правого угла (X2,Y2):
```
coords='X1,Y1,X2,Y2'
```
- circle — задаём круглую кликабельную область. При выборе этого значения, в атрибуте coords перечисляются значения: X1,Y1 — координаты центра круга; R1 — радиус в пикселях:
```
coords='X1,Y1,R1'
```
- poly — задаём полигональную кликабельную область, то есть многоугольник. При выборе этого значения, в атрибуте coords можно прописывать довольно много значений точек, которые являются вершинами углов многоугольника, указывая координаты: X1, Y1, X2, Y2 и т.д.:
```
coords="X1,Y1,X2,Y2,X3,Y3,...,XN,YN"
```
coords — в этом атрибуте перечисляются координаты областей. Выше подробно описано, какие значения, для каких форм областей следует указывать. Координаты высчитываются в пикселях от верхнего левого угла изображения (0,0). Ось X — это горизонтальная ось координат (абсцисса), ось Y — вертикальная ось координат (ордината).
href — в данном атрибуте в обыкновенном HTML-документе как правило прописывается адрес страницы в интернете (url), однако в QSP мы можем поместить сюда строку кода, который будет выполнен при клике на области. Для этого вписываем в начале значения атрибута ключевое слово EXEC: (двоеточие обязательно), а после двоеточия пишем строку кода:
```
href="EXEC:*pl 'Выводим текст при клике по области.' & ! строка кода"
```

Если кликабельные области пересекаются, накладываются друг на друга, реагировать на клик будет та область, которая находится выше в HTML-коде.

Обратите внимание, что в классическом QSP при наведении на кликабельную область курсор не будет менять свой вид.