Адаптивные координаты для image map: CSS, JavaScript решения

Быстрый ответ

Можно создать адаптивные карты изображений, используя сочетание CSS для "жидкости" изображений и jQuery-плагина rwdImageMaps, который масштабирует координаты карты. Для этого применяется следующий код:

<img src="image.jpg" usemap="#map" class="responsive">

<map name="map">
  <!-- Тут возможно использование форм "rect" и "poly". Желаете проверить? Поищите информацию в Google! 😎 -->
  <area shape="rect" coords="34,44,270,350" href="#" alt="Адаптивная область">
</map>

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-rwdImageMaps/1.6/jquery.rwdImageMaps.min.js"></script>
<!-- Магия происходит здесь... Нет, просто продуктивно работающий JavaScript! -->
<script>$(function() { $('img[usemap]').rwdImageMaps(); });</script>

С помощью такого подхода активные зоны карты изображений будут масштабироваться вместе с изображением, сохраняя интерактивность на всех устройствах.

Эволюция адаптивных карт изображений

SVG – Векторное волшебство

У вас есть возможность переключиться на использование SVG (Scalable Vector Graphics), чтобы внести современное звучание в классические карты изображений. Без лишней настройки — сразу приступайте к работе!

<svg viewBox="0 0 100 100" class="responsive-svg">
  <a xlink:href="#" >
    <!-- Невидимые зоны влияния, как у ниндзя. Опасные, но невидимые! 🕵️‍♂️ -->
    <rect x="34" y="44" width="236" height="306" fill-opacity="0" />
  </a>
</svg>

Пользуйтесь преимуществами масштабируемости и интерактивности элементов SVG! Ваши "точки сохранения" адаптируются под размеры экрана и остаются реагирующими на пользовательские действия.

Подробнее об этом расскажет наш спикер на видео

CSS & HTML – Элегантные активные зоны

Простота – это искусство. Используйте якорные теги с CSS-позиционированием вместо координатных карт. Ваша задача — создать эффект!

<div class="image-container" style="position: relative;">
  <img src="image.jpg" class="responsive" alt="Изображение с наложенными ссылками">
  <!-- Встречайте нововведение – элегантные наложенные ссылки, не замедляющие загрузку сайта! 🏎️ -->
  <a href="#" class="map-overlay" style="position: absolute; top: 20%; left: 30%; width: 20%; height: 10%;"></a>
</div>

Теперь HTML и CSS берут на себя задачи, которые ранее требовали JavaScript. Просто и понятно!

Выбор формы активных зон

При настройке вашей карты изображений важно определить форму активных зон — прямоугольную или круглую. Это влияет на удобство масштабирования:

<map name="map">
  <!-- Круг или квадрат – выбирайте свой стиль!🥊 -->
  <area shape="circle" coords="60,60,25" href="#" alt="Круглая область">
  <area shape="rect" coords="110,160,210,260" href="#" alt="Прямоугольная область">
</map>

Совет: Очень полезно будут альтернативные тексты alt для каждого элемента.

Тестирование в реальном времени

Пришло время практики! Используйте инструмент "Инспектор" в вашем браузере, чтобы наблюдать за происходящими изменениями.

Визуализация

Можно представить адаптивную карту изображений как гибкую сетку, наложенную на ваше изображение:

💠 Стандартное отображение:
+----+----+----+
| 🔍 | 💎 | 🌴 |
+----+----+----+
| 🐍 | 🗺️  | 🔑 |
+----+----+----+
| 🚢 | 💰 | 🏝️ |
+----+----+----+

➡️ Адаптация для мобильных устройств:
+--+--+--+
|🔍|💎|🌴|
+--+--+--+
|🐍|🗺️|🔑|
+--+--+--+

Итоги:

• Масштабирование без потери контента: вы не потеряете детали, всё на своих местах! 🔍⇄🐍.
• Сохранение кликабельности: это не ошибка, это возможности! 💎👆🔑.
• Удобство навигации: Настраивайте оборудование и отправляйтесь в плавание! 🌊📱.

Продвинутое использование карт изображений

Важность доступности

Не забывайте о пользователях с ограниченными возможностями: предоставьте alt-текст для каждой активной зоны. Облегчите навигацию с помощью клавиатуры, добавив атрибут tabindex.

Инструменты для вашего проекта

Вы можете использовать zaneray.com для трансформации карт изображений в адаптивные якорные теги. За советами и плагинами обращайтесь к сообществу на GitHub.

Возможные "драконы" на вашем пути

Будьте осторожны с уменьшенными экранами и чрезмерным масштабированием! Когда активные зоны становятся слишком малы для взаимодействия с ними, пора обновить карту изображений. Также стоит быть осмотрительным с устаревшими браузерами, требующими специального внимания и тестирования.

Полезные материалы

1. MDN Web Docs – Использование HTML карт изображений — детальное рассмотрение элемента map: Карта изображений.
2. W3Schools – Справочник по тегам карт изображений — сжатый справочник по HTML тегу map.
3. GitHub – jQuery-rwdImageMaps: Плагин адаптивных карт изображений для jQuery — инструментарий для создания адаптивных карт изображений.
4. Адаптивные изображения – A List Apart — статья об основах создания адаптивных изображений.
5. Отзывчивый веб-дизайн: что это такое и как его использовать — Smashing Magazine — основательная статья о адаптивном веб-дизайне.
6. GitHub – davidjbradshaw/image-map-resizer: Плагин для адаптивных HTML-карт изображений — дополнительный инструмент для создания адаптивных карт изображений.