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