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