Интерактивные карты и схемы стали очень удобным инструментом навигации и поиска нужных мест на местности и информации об объектах. Выполняются они на HTML5, просматриваются на всех устройствах и адаптированы под различные размеры экранов.
Для размещения карты на странице сайта должны быть заранее определены размеры блока (они соответствуют размерам рекламного места на площадке). Для корректного отображения горизонтальной карты блок должен быть горизонтальной ориентации и, соответственно, для вертикальной блок также должен быть вертикальным. И таким образом выделенное на странице рекламное место будет использовано оптимально.
Ниже представлены несколько примеров таких карт.
Пример №1. Простейшая карта России с представителями в некоторых городах. При нажатии на кнопку показывается информация и контакты представителя, которые можно копировать. Карта версталась очень давно, поэтому в ней применено мало дополнительных функций. Карта с фиксированными размерами, поэтому под гаджеты с узкими экранами не адаптирована и просматривается полностью на мобилках при её прокрутке пальцем.
Пример №2. Адаптивный план микрорайона в котором находится салон красоты. Показана схема прохода к нему.
Пример №3. Эскиз интерактивной мультимедийной карты. При щелчке по контурам Красноярского края и Якутии визуально изменяется цвет в контуре. Но фактически накладывается новая картинка, в которой можно разместить любую информацию в виде текста, изображний, подключить аудио и видео с ютуба. В этом примере только 4 интерактивных блока. Блоки не полностью между собой синхронизированы, поэтому при открытии некоторых элементов другие не закрываются. Можно ещё добавить дополнительные крестики и назначить им действие по закрытию нужных слоёв. Но это просто эскиз показывающий функциональность скриптов, над доработкой которого можно ещё поработать.
Пример №4. Схема проезда к месту сбора туристов.
Пример №5. Пример простого интерактивного мультимедийного приложения, презентации. После прочтения подсказок на кружках нажимайте на них и сможете ознакомиться с активными действиями и анимацией. Нажмите на иконку мобильника и перейдёте на другую страницу.
Обращайтесь, задавайте вопросы. Не пожалеете. Отвечу всем. Работаю в рабочее время без выходных и праздников.
С уважением, Валерий. Моя страница профиля в Кворке: https://kwork.ru/user/ovalery.
Может это также будет Вам интересно:
Адаптивные баннеры. Примеры HTML5-баннеров.
Слайдеры для сайта, для визиток и для баннеров.