Генератор карты изображения (кликабельные области)
Выберите изображение и форму и рисуйте: прямоугольник и круг — перетаскиванием, многоугольник — щелчками по углам (щёлкните по первой точке или дважды, чтобы замкнуть).
Как пользоватьсяКликабельные области на изображении
Доступно на: 
Генератор карты изображения (кликабельные области): для чего нужен
Карта изображения превращает части картинки в ссылки: участки плана, магазины торгового центра, детали товара или блюда меню. Выберите изображение и рисуйте области перетаскиванием (прямоугольник и круг) или щелчками по углам (многоугольник).
Для каждой области укажите ссылку и альтернативный текст. Код получается в классическом формате с map и area или в адаптивной версии со ссылками, расположенными в процентах (и clip-path для многоугольников), которая подстраивается под изображение на экране любого размера.
Как пользоваться
- Выберите изображение.
- Нарисуйте области и заполните ссылку и текст.
- Выберите формат и скопируйте код.
Когда использовать
- План посёлка или квартиры.
- Карта магазинов или мероприятия.
- Фото товара с кликабельными частями.
Частые вопросы
Работает ли карта изображения на телефоне?
Классический map с area использует координаты в пикселях исходного изображения, поэтому области смещаются, когда изображение уменьшается на экране телефона. Поэтому генератор выдаёт и адаптивную версию со ссылками, расположенными в процентах поверх изображения, которые подстраиваются под любой размер.
Доступны ли области?
Каждая область получает альтернативный текст (alt или aria-label), который говорит, куда она ведёт. Заполните его: именно его озвучивают скринридеры, и он отображается, если изображение не загрузилось.
Правда бесплатно?
Да, 100% бесплатно. Без регистрации, без подписки и без ограничений использования. Все инструменты Tools123 бесплатны.