Карты изображений — это интересный и интересный способ оживить ваш веб-сайт. С их помощью вы можете загружать изображения и делать их части доступными для других онлайн-ресурсов. Если вы в затруднительном положении и не хотите загружать редактор изображений, создать карту с помощью тегов HTML просто.
Вам понадобится изображение, редактор изображений и какой-то редактор HTML или текстовый редактор. Большинство графических редакторов покажут вам координаты вашей мыши, когда вы укажете на изображение. Эти данные координат — все, что вам нужно для начала работы с картами изображений.
Создание карты изображений
Чтобы создать карту изображений, сначала выберите изображение, которое будет служить основой карты. Изображение должно быть «нормального размера», то есть вы не должны использовать изображение настолько большого размера, чтобы браузер масштабировал его.
Когда вы вставите изображение, вы добавите дополнительный атрибут, который идентифицирует координаты карты:
<img src = "kittens.gif" width = "250" height = "150" alt = "Котята!" usemap = "#"> babycats
Когда вы создаете карту изображения, вы создаете область, по которой можно щелкнуть изображение, поэтому координаты карты должны совпадать с высотой и шириной выбранного вами изображения. Карты поддерживают три разных типа фигур:
- прямоугольник — прямоугольник или четырехсторонняя фигура
- поли — многоугольник или многогранная фигура
- круг — круг
Чтобы создать области, вы должны выделить конкретные координаты, которые вы хотите отобразить. Карта может состоять из одной или нескольких определенных областей на изображении, при нажатии на которые открывается новая гиперссылка.
Для прямоугольника вы отображаете только верхний левый и нижний правый углы. Все координаты указаны как x, y (вверх, вверх). Таким образом, для верхнего левого угла 0,0 и нижнего правого угла 10,15 вы должны набрать 0,0,10,15 . Затем вы включаете его в карту:
<map name = "babycats">
<area shape = "rect "ordins =" 0,0,10,15 "href =" morris.htm "alt =" Morris ">
</ map>
Для многоугольника вы отображаете каждую координату x, y отдельно. Веб-браузер автоматически связывает последний набор координат с первым; все, что находится внутри этих координат, является частью карты.
<map name = "babycats">
<area shape = "poly "ordins =" 17,34,41,96,110,121 "href =" garfield.htm "alt =" Garfield ">
</ map>
Форма окружности требует только две координаты, как прямоугольник, но для второй координаты вы указываете радиус или расстояние от центра круга. Итак, для круга с центром в 122,122 и радиусом 5 вы бы написали 122,122,5:
<map name = "babycats">
<area shape = "circ "ordins =" 122,122,5 "href =" catbert.htm "alt =" Catbert ">
</ map>
Все области и фигуры могут быть включены в один тег карты:
<map name = "babycats">
<area shape = "rect "ordins =" 0,0,10,15 "href =" morris.htm "alt =" Morris ">
<area shape =" poly "ordins = "17 , 34,41,96,110,121 "href =" garfield.htm "alt =" Garfield ">
<area shape =" circ "координаты =" 122,122,5 "href =" catbert.htm "alt =" Catbert ">
</ map >
Соображения
Графические карты были гораздо более распространены в эпоху Web 1.0 в 1990-х и в самом начале 2000-х годов — графические карты часто составляли основу навигации сайта. Дизайнер создаст какое-то изображение для обозначения пунктов меню, а затем установит карту.
Современные подходы поощряют адаптивный дизайн и используют каскадные таблицы стилей для управления размещением изображений и гиперссылок на странице.
Хотя тег map все еще поддерживается в стандарте HTML, использование мобильных устройств с небольшими форм-факторами может привести к неожиданным проблемам с производительностью карт изображений. Кроме того, проблемы с пропускной способностью или искаженные изображения имеют значение для карты изображений.
Поэтому не стесняйтесь продолжать использовать эту стабильную, понятную технологию, зная, что в настоящее время в моде у веб-дизайнеров есть более эффективные альтернативы .