В истории веб-дизайна был момент, когда многие сайты использовали функцию, известную как «карты изображений». Это список координат, прикрепленных к определенному изображению на странице. Эти координаты создают области гиперссылок на этом изображении, существенно добавляя «горячие точки» к графику, каждую из которых можно кодировать для ссылки на разные места. Это сильно отличается от простого добавления тега ссылки к изображению, которое может привести к тому, что весь графический объект станет одной большой ссылкой на один пункт назначения.
Примеры: представьте себе графический файл с изображением Соединенных Штатов. Если вы хотите, чтобы каждое состояние было «кликабельным», чтобы они переходили на страницы, посвященные этому конкретному состоянию, вы можете сделать это с помощью карты изображений. Точно так же, если у вас было изображение музыкальной группы, вы могли бы использовать карту изображений, чтобы каждый участник мог нажимать на последующую страницу об этом участнике группы.
Полезны ли карты изображений? Они, конечно, были, но они потеряли популярность в сегодняшней сети. Это, по крайней мере частично, потому что карты изображений требуют определенных координат для работы. Сайты сегодня построены так, чтобы быть отзывчивыми, а изображения масштабироваться в зависимости от размера экрана или устройства. Это означает, что предварительно установленные координаты, как работают карты изображений, распадаются, когда сайт масштабируется и изображения меняют размер. Вот почему карты изображений редко используются сегодня на производственных сайтах, но они все же имеют преимущества для демонстраций или случаев, когда вы увеличиваете размер страницы.
Хотите знать, как создать карту изображений, в частности, как это сделать с помощью Dreamweaver? Процесс не особенно сложный, но и не простой, поэтому вам нужно иметь некоторый опыт, прежде чем начать.
Начиная
Давайте начнем. Первый шаг, который вам нужно сделать, это добавить изображение на вашу веб-страницу. Затем нажмите на изображение, чтобы выделить его. Оттуда вам нужно перейти в меню свойств (и нажать на один из трех инструментов рисования горячей точки: прямоугольник, круг или многоугольник. Не забудьте назвать свое изображение, что вы можете сделать в панели свойств. Вы можете назвать это все, что вы хотите. Используйте «карту» в качестве примера.
Теперь нарисуйте желаемую форму на вашем изображении, используя один из этих инструментов. Если вам нужны прямоугольные пятна, используйте прямоугольник. То же самое для круга. Если вы хотите более сложные формы горячей точки, используйте многоугольник. Это то, что вы, вероятно, использовали бы в примере карты США, поскольку многоугольник позволил бы вам отбрасывать точки и создавать очень сложные и неправильные формы на изображении.
В окне свойств для горячей точки введите или перейдите на страницу, на которую должна ссылаться горячая точка. Это то, что создает эту связываемую область. Продолжайте добавлять горячие точки, пока ваша карта не будет заполнена и все ссылки, которые вы хотите добавить, будут добавлены.
Когда вы закончите, просмотрите вашу карту изображений в браузере, чтобы убедиться, что она работает правильно. Нажмите на каждую ссылку, чтобы перейти на соответствующий ресурс или веб-страницу.
Недостатки карт изображений
Еще раз, имейте в виду, что у карт изображений есть несколько минусов, даже за исключением вышеупомянутого отсутствия поддержки адаптивных веб-сайтов. Во-первых, мелкие детали могут быть скрыты на карте изображения. Например, карты географических изображений могут помочь определить, с какого континента пользователь, но эти карты могут быть недостаточно подробными, чтобы точно определить страну происхождения пользователя. Это означает, что карта изображения может помочь определить, является ли пользователь из Азии, но не из Камбоджи, в частности.
Карты изображений также могут загружаться медленно. Их не следует использовать несколько раз на веб-сайте, поскольку они занимают слишком много места для использования на каждой странице веб-сайта. Слишком много карт изображений на одной странице может создать серьезное узкое место и значительно повлиять на производительность сайта.
Наконец, карты изображений могут быть непростыми для пользователей с проблемами зрения. Если вы использовали карты изображений, вы должны также создать другую навигационную систему для этих пользователей в качестве альтернативы.
Нижняя линия
Время от времени используйте графические карты, пытаясь составить краткую демонстрацию дизайна и его работы. Например, если вы разрабатываете дизайн для мобильного приложения и хотите использовать карты изображений для создания горячих точек, имитирующих интерактивность приложения. Это гораздо проще сделать, чем кодировать приложение или даже создавать фиктивные веб-страницы, созданные в соответствии с текущими стандартами с использованием HTML и CSS. Но поместить их на рабочий сайт или в приложение очень сложно, и, скорее всего, этого следует избегать на современных веб-сайтах.
