Выделение областей любой формы. Интерактивная карта в Тильде. Полигоны при наведении в Тильде

Выделение областей любой формы. Интерактивная карта в Тильде. Полигоны при наведении в Тильде. ================= ССЫЛКА на программный код: ================= 🏆 Мой СУПЕР-Курс по программированию в Тильде: Скорая помощь по Тильде (и не только): ================= ЗАРАБАТЫВАЙТЕ СО МНОЙ: ================= Код для выделения по наведению мыши областей любой формы в Тильде. Подходит также для создания ссылок любой формы, интерактивных карт или для окрашивания по наведению мыши отдельных участков изображений. Наверняка вы сталкивались с задачей заливки областей неправильной формы при наведении мыши. Это, например, может быть какая-то карта с участками земли. Такое нередко практикуется на сайтах агентств по недвижимости или недавно встречал похожую задачу для страховой компании, там кузов автомобиля схематично делился на области повреждений. Или например карта районов доставки с разными тарифами. Ну и можно придумать ещё множество вариантов, где это пригодится. На первый взгляд, решение лежит на поверхности. Надо просто создать элемент «ВЕКТОР» поверх карты и задать ему какую-то форму. Потом зайти в настройки SBS-анимации и по ховеру установить на первом шаге в ноль секунд нулевую видимость, а вторым шагом сделать объект видимым. Но если попробуете, то поймёте, что так оно не работает. Ну во-первых, при нулевой видимости мы не знаем где находится элемент, потому что не видим его границы. А во-вторых, он всё равно становится видимым не при наведении на границы рисунка, а при наведении на границы фрейма, в котором рисунок располагается. То есть – один фиг ховер работает по прямоугольнику. Обычно такие задачи решаются созданием SVG элемента совместно с программированием. Но это умеют делать не все, и я придумал как существенно упростить эту задачу для тех, кто не умеет программировать и даже не умеет рисовать SVG. Достаточно уметь пользоваться стандартными возможностями Тильды и один раз потратить небольшую сумму для покупки моего кода, который всё будет делать за вас. Код платный, потому что задача довольно специфическая, и те, кому это надо, заработают на этом немалые деньги, а значит и я имею право на небольшое вознаграждение, помогая Вам в этом. Да и вообще я очень много информации на своём канале даю бесплатно, а на моём сайте есть много бесплатных полезных кодов. Переходите и выбирайте по своим задачам. Теперь давайте покажу как легко и просто решается проблема. Добавляем в ZERO-блок элемент «ВЕКТОР», задаём ему необходимую конфигурацию, толщину границ и заливку если надо. Потом по правой клавише мыши выбираем пункт выпадающего меню «Add CSS class name» - добавить имя CSS-класса. Справа появляется специальное поле и туда вписываем имя класса «mypolygon». Таких векторов добавляем сколько угодно и у всех будет тот же CSS-класс. При этом для них можно задавать ещё и ссылку, по которой мы провалимся при клике. Это может быть ссылка на другую страницу или якорная ссылка – а значит она может вести на какой-то информационный блок или может открывать всплывающее окно. Или эта ссылка может вести вообще на другой сайт. Неважно. Далее добавляем на страницу из раздела «ДРУГОЕ» блок Т123-HTML, жмём «КОНТЕНТ» и вставляем туда содержимое файлика с моим программным кодом. Вот и всё! Публикуем страницу, наводим мышь на элементы, и они закрашиваются точно при попадании курсора в их границы. А при клике переходим по ссылкам. Ключевые слова: интерактивная карта в тильде выделить области изображений в тильде полигоны при наведении в тильде часть изображения по наведению в тильде интерактивная карта в tilda выделить области изображений в tilda полигоны при наведении в tilda часть изображения по наведению в tilda