38 | ```
39 |
40 | - В `id="ar-inter"` прописываем идентификатор блока с интерактивным изображением (например `ar-inter1`, `ar-inter2` ...).
41 | Блоков с интерактивными изображениями может быть несколько на странице, поэтому не забывайте менять `id`.
42 | - Тег `span` отвечает за конкретную метку на изображении (является необязательным), в них не надо ничего записывать.
43 | Вы можете создать до 50 меток (тегов `span`).
44 | - Блок `class="right"` является необязательным.
45 | Вы можете создать только изображение с метками, без заголовков и текстового описания, либо создать изображение с описанием, но без меток. Ничего дополнительно настраивать не придется.
46 | - Тег `button` отвечает за кнопку-заголовок (является необязательным). В тег `button` (начиная со второго по счету) необходимо записать текстовое содержимое.
47 | Самый первый тег `button` является кнопкой возврата к исходному состоянию блока, его не надо редактировать.
48 | - Тег `div` — это контейнер для подробного описания каждой метки и каждого заголовка (является необязательным).
49 | В данном контейнере Вы можете разместить текст, ссылки, изображения и т.д.
50 | Самый первый тег `div` будет отображаться по умолчанию в исходном состоянии блока.
51 | - Не рекомендуется создавать или менять классы у элементов.
52 | При необходимости подключайтесь к уже созданным классам через CSS и кастомизируйте под собственный проект.
53 |
54 | ### В CSS необходимо настроить изображение и позицию меток:
55 |
56 | Вы можете записать следующие строки в своем файле CSS:
57 |
58 | - Указываем путь до главного изображения.
59 | Указывайте правильный ID (`#ar-inter`) для настраиваемого блока.
60 |
61 | ```css
62 | #ar-inter .ar-img {
63 | background: url('путь до изображения');
64 | }
65 | ```
66 |
67 | - Указываем увеличение и положение изображения при активации первой метки.
68 | При необходимости настраиваем положение для остальных меток (.ar-btn1, .ar-btn2, ..., .ar-btn49, .ar-btn50).
69 |
70 | ```css
71 | #ar-inter .ar-img.ar-btn1 {
72 | background-size: 460% !important;
73 | background-position-x: 25% !important;
74 | background-position-y: 20% !important;
75 | }
76 | ```
77 |
78 | - Вы можете подставлять разные изображения на каждую метку.
79 | Для этого необходимо указать путь до изображения и его позицию для нужной метки.
80 | При необходимости настраиваем и для остальных меток (.ar-btn1, .ar-btn2, ..., .ar-btn49, .ar-btn50).
81 |
82 | ```css
83 | #ar-inter .ar-img.ar-btn1 {
84 | background-image: url('путь до изображения');
85 | background-size: 100% !important;
86 | background-position-x: 0% !important;
87 | background-position-y: 0% !important;
88 | }
89 | ```
90 |
91 | - Указываем положение метки на изображении.
92 | При необходимости настраиваем остальные метки (.ar-btn1, .ar-btn2, ..., .ar-btn49, .ar-btn50).
93 |
94 | ```css
95 | #ar-inter .ar-img .ar-btn1 {
96 | left: 27%;
97 | bottom: 70%;
98 | }
99 | ```
100 |
101 | - Вы можете настроить всплывающую подсказку при наведении на метку.
102 | При необходимости настройте содержимое `content` для каждой метки (.ar-btn1, .ar-btn2, ..., .ar-btn49, .ar-btn50).
103 |
104 | ```css
105 | #ar-inter .ar-img .ar-btn1::before {
106 | content: 'Текст';
107 | }
108 | ```
109 |
110 | ### В JS необходимо вызвать функцию `arInter()`:
111 |
112 | - Вызов функции вы можете прописать в любом JS-файле, подключённом в HTML после `artag.js`.
113 | - Вызывать функцию `arInter()` необходимо для каждого блока.
114 | - Обязательные атрибуты функции `arInter()`: ID блока, ширина изображения, высота изображения.
115 | Указываем ширину и высоту исходного изображения, чтобы корректно работала адаптивность.
116 |
117 | ```javascript
118 | arInter('#ar-inter', 2560, 2005);
119 | ```
120 | - Скрипт по умолчанию поддерживает до 50 меток на изображении.
121 | Если необходимо увеличить количество меток, то указываем это при вызове фунцкции arInter()
122 | Последним атрибутом передаем количесвто меток:
123 |
124 | ```javascript
125 | arInter('#ar-inter', 2560, 2005, 60);
126 | ```
--------------------------------------------------------------------------------