Как сделать интерактивную карту на Tilda

Видеоинструкция (для тех, кому неудобно работать с текстом)

Стандартная стрелка мыши — это скучно. Если вы хотите выделить свой сайт и сделать его запоминающимся, кастомный курсор — отличное решение. В этой статье я покажу, как заменить обычный курсор на уникальную картинку всего за 5 минут.
Шаг 1. Готовим картинку для курсора

Первым делом нам нужна картинка. Вы просто находите свой курсор в интернете — какой хотите. Можно взять готовую иконку, можно нарисовать что-то своё. Главное — проверьте право безопасного использования, чтобы потом не было проблем с авторами. Желательный формат - PNG с прозрачным фоном.

Если вам нужно задизайнить курсор с нуля под ваш бренд — обращайтесь к нам, задизайним.

Помочь с разработкой курсора

Шаг 2. Создаём блок с изображениями

На странице нажимаем «Добавить блок» (Рисунок 1.1)
Выбираем раздел «Изображения» (Рисунок 1.2)
Выбираем любой шаблон, например, IM01 (Рисунок 1.2)
Кликаем на блок с изображением, нажимаем «Загрузить файл» и загружаем вашу картинку курсора (Рисунок 1.3)
После этого заходим в настройки "контента", там будет ссылка, по которой изображение загрузилось на сервер. (Рисунок 1.4).
Кликаем по ссылке — она откроется в браузере отдельной вкладкой. Копируем ссылку из адресной строки и сохраняем, она в дальнейшем пригодится. (Рисунок 1.5)

Шаг 5. Вставляем код в HEAD
Код нужно вставить не в HTML-окно блока, а в хедер сайта.

Заходим в «Настройки» вашего сайта
Выбираем раздел «Ещё» (или «Дополнительно»)
Находим поле «HTML-код для вставки внутрь HEAD» (Рисунок 1.6)
Вставляем туда код, который находится внизу статьи

Код для интеграции нового курсора

<div id="cursor" style="position:fixed;width:40px;height:40px;background:url('ссылка');background-size:contain;background-repeat:no-repeat;background-position:center;pointer-events:none;z-index:9999;"></div>

<script>
document.addEventListener('mousemove', function(e) {
    var cursor = document.getElementById('cursor');
    cursor.style.left = (e.clientX - 20) + 'px';
    cursor.style.top = (e.clientY - 20) + 'px';
});
</script>

<style>
* {
    cursor: none !important;
}
</style>

Шаг 6. Финальный штрих

В коде вместо "ссылка" вставляем ссылку, которую скопировали на шаге 4 (Рисунок 1.5)
Нажимаете «Сохранить»
Как изменить размер курсора: в коде меняете width: 40px и height: 40px на нужный размер