Онлайн-справочник по самым часто задаваемым вопросам из темы "Как сделать?" на форуме QSP.su
16.10. Как работать с тегами MAP и AREA?
В: Как разметить картинку на кликабельные зоны?
О:
Чтобы выводить на экран изображение (тег `<img>`) и его разметку (теги `<map>` и `<area>`), необходимо в первую очередь включить распознавание HTML:
Далее с помощью тега `<img>` выводим на экран изображение:
В атрибуте `src` тега указываем путь к файлу изображения, а в атрибуте `usemap` прописываем символ `#` (решётка) и значение, вписанное в атрибут `name` тега `<map>`, о котором далее. Атрибут `usemap` — это своего рода ссылка на соответствующий тег `<map>`. Таким образом вы можете разметить несколько изображений, ссылаясь из тегов `<img>` на соответстующие контейнеры `<map>` с помощью атрибута `usemap`.
Теги `<map>` и `<area>` используются для разметки кликабельных областей на изображении. Тег `<map>` является контейнером, объединяющим кликабельные области, каждая из которых описывается отдельным тегом `<area>`.
*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 при наведении на кликабельную область курсор не будет менять свой вид.