Что нужно знать
• Используйте изображение нормального размера, которое браузер не будет масштабировать. Вам также понадобится редактор изображений и HTML или текстовый редактор.
• При вставке изображения добавьте дополнительный атрибут для определения координат карты.
• Например:
В этой статье объясняется, как создавать карты изображений с использованием тегов HTML вместо редактора карт изображений. Большинство редакторов изображений покажут вам координаты вашей мыши, когда вы наведете курсор на изображение, и это все данные, которые вам нужны, чтобы начать работу с картами изображений.
Создание карты изображений
Чтобы создать карту изображений, сначала выберите изображение, которое будет служить основой для карты. Изображение должно быть «нормального размера», то есть вы не должны использовать изображение настолько большое, что браузер его масштабирует.
При вставке изображения вы добавите дополнительный атрибут, определяющий координаты карты:
Когда вы создаете карту-изображение, вы создаете область, которую можно щелкнуть на изображении, поэтому координаты карты должны совпадать с высотой и шириной выбранного вами изображения. Карты поддерживают три разных типа фигур:
- прямоугольник или четырехугольник
- poly-многоугольник или многогранная фигура
- круг-круг
Чтобы создать области, вы должны изолировать определенные координаты, которые вы собираетесь нанести на карту. Карта может состоять из одной или нескольких определенных областей изображения, при нажатии на которые открывается новая гиперссылка.
Для прямоугольника вы сопоставляете только верхний левый и нижний правый углы. Все координаты указаны как x, y (над, вверх). Итак, для верхнего левого угла 0, 0 и нижнего правого угла 10, 15 вы должны ввести 0, 0, 10, 15. Затем вы включаете его в карту:
Для многоугольника вы сопоставляете каждую координату x, y отдельно. Веб-браузер автоматически соединяет последний набор координат с первым; все, что находится внутри этих координат, является частью карты.
Круговые фигуры требуют только двух координат, как и прямоугольник, но для второй координаты вы указываете радиус или расстояние от центра круга. Итак, для круга с центром в 122, 122 и радиусом 5 вы должны написать 122, 122, 5:
Все области и фигуры могут быть включены в один и тот же тег карты:
Соображения
Карты изображений были гораздо более распространены в эпоху Web 1.0 с 1990-х до самого начала 2000-х годов - карты изображений часто служили основой навигации по веб-сайту. Дизайнер создавал какую-то картинку для обозначения пунктов меню, а затем устанавливал карту.
Современные подходы поощряют адаптивный дизайн и используют каскадные таблицы стилей для управления размещением изображений и гиперссылок на странице.
Хотя тег карты по-прежнему поддерживается в стандарте HTML, использование мобильных устройств с малыми форм-факторами может привести к непредвиденным проблемам с производительностью карт изображений. Кроме того, проблемы с пропускной способностью или битые изображения снижают ценность карт изображений.
Итак, не стесняйтесь продолжать использовать эту стабильную, хорошо изученную технологию, зная, что в настоящее время в моде у веб-дизайнеров есть более эффективные альтернативы.
