что собой представляет карта изображение

Карты-изображения

Карты-изображения позволяют привязывать ссылки к разным областям одного изображения. Реализуется в двух различных вариантах — серверном и клиентском. В случае применения серверного варианта браузер посылает запрос на сервер для получения адреса выбранной ссылки и ждет ответа с требуемой информацией. Такой подход требует дополнительного времени на ожидание результата и отдельные файлы для каждой карты-изображения.

В клиентском варианте карта располагается в том же HTML-документе, что и ссылка на изображение.

Клиентский вариант карты-изображения

Рис. 1. Закладки являются ссылками, созданными с помощью карты

Чтобы сделать ссылки на закладки, показанные на рис. 1, следует использовать следующий код (пример 1).

Пример 1. Использование карты-изображения

Атрибуты тега AREA

shape

Определяет форму активной области. Форма может быть в виде окружности ( circle ), прямоугольника ( rect ), полигона ( poly ).

Добавляет альтернативный текст для каждой области. Служит лишь комментарием для ссылки, поскольку на экран не выводится.

coords

Задает координаты активной области. Координаты отсчитываются в пикселах от левого верхнего угла изображения, которому соответствует значение 0,0. Первое число является координатой по горизонтали, второе — по вертикали. Список координат зависит от формы области.

Для окружности задаются три числа — координаты центра круга и радиус.

Для прямоугольника — координаты левого верхнего и правого нижнего угла.

Для полигона задаются координаты его вершин (рис. 2).

Рис. 2. Координатные точки для полигона

Карты-изображения позволяют создавать ссылки на разные области одного изображения. Использование этого подхода наглядней, чем обычные текстовые ссылки и позволяет применять всего один графический файл для организации ссылок. Однако не нужно считать, что карты-изображения следует включать везде, где требуются графические ссылки. Прежде всего, следует оценить все доводы за и против, а также просмотреть альтернативные варианты.

Преимущества карт-изображений

1. Карты позволяют задать любую форму области ссылки. Учитывая, что изображения по своей природе прямоугольны, сделать графическую ссылку сложной формы, например для указания географического района, без карт-изображений не представляется возможным. Как правило, в географической тематике карты-изображения и применяются наиболее часто.

2. С одним файлом удобней работать — не приходится заботиться о состыковке отдельных фрагментов и рисунок легко можно поместить в нужное место.

Недостатки

1. Нельзя установить всплывающую подсказку и альтернативный текст для отдельных областей. Альтернативный текст позволяет получить текстовую информацию о рисунке при отключенной в браузере загрузке изображений. Поскольку загрузка изображений происходит после получения браузером информации о нем, то замещающий рисунок текст появляется раньше. А уже по мере загрузки текст будет сменяться изображением. Для карт-изображений эта особенность является актуальной, ведь если отключить просмотр изображений, что делают многие пользователи, то в итоге увидим лишь один пустой прямоугольник.

2. При сложной форме области ссылки увеличивается объем кода HTML. Контур аппроксимируется набором прямых отрезков, для каждой точки такого отрезка следует задать две координаты, а общее количество таких точек может быть достаточно велико. Справедливости ради, следует отметить, что сложные формы являются частным случаем и применяются достаточно редко.

3. С картами-изображениями нельзя сделать разные эффекты, которые доступны при разрезании одного рисунка на фрагменты: эффект перекатывания, частичная анимация, индивидуальная оптимизация картинок для их быстрой загрузки.

Юзабилити

С позиции удобства пользователей, карты-изображения имеют только одно преимущество — ссылки разнообразной формы. Это добавляет наглядность в представлении информации — мы не ограничены прямоугольной формой ссылки и можем использовать ссылки сложной конфигурации для своих целей. Во всех остальных отношениях от них проку нет — обычные текстовые ссылки более информативны и им не страшно отключение показа картинок в браузере. Тот факт, что одно изображение загружается быстрее, чем та же картинка, но порезанная на фрагменты и сохраненная в виде набора графических файлов, легко обходится. Каждый из таких конечных файлов можно уменьшить, используя индивидуальные настройки оптимизации. В итоге, общий объем всех фрагментов будет занимать меньше места, чем одно изображение. Не стоит сбрасывать со счетов и психологический фактор — человеку кажется, что набор маленьких картинок загружается быстрее, чем одна большая.

Основной недочет карт — нет четко выделенных границ ссылок. Поэтому эти границы приходится выделять разными средствами уже на изображении. Если рисунок не загрузился по каким-либо причинам, то разобраться в наборе ссылок становится весьма проблематичным.

Альтернативные варианты

Не всегда есть острая необходимость использовать карты-изображения, поэтому следует обратить внимание на то, что существуют и другие возможные варианты выполнения поставленной задачи.

Использование FLash

Во flash-роликах можно создавать разные области ссылок, используя возможности векторной графики. Благодаря широким возможностям, на Flash можно создавать потрясающие меню и средства навигации. Но тут тоже требуется осторожность, чтобы не потерять за деревьями леса.

Разрезание изображений

Это одно из популярных средств в дизайне. Одно изображение в этом случае разрезается с помощью специальных программ на фрагменты, которые окончательно сводятся вместе, создавая иллюзию цельной картинки. Хотя области разрезания могут быть только прямоугольные, в большинстве случаев этого вполне достаточно для создания ссылок. Для каждого фрагмента можно выбрать наиболее подходящий графический формат, в котором он будет сохранен, параметры оптимизации, добавить альтернативный текст. Тогда даже при отключенном показе картинок, будут хорошо видны границы областей и замещающий изображение текст.

Резюме

Как выяснилось, причина использовать карты-изображения только одна — сложная форма ссылок, продиктованная задачами дизайна. Типичное применение — регионы географической карты, которые служат ссылками. Во всех остальных случаях можно обойтись и текстовыми ссылками, а при необходимости создания графической навигации, одно изображение для удобства можно разрезать на фрагменты. Такой подход создаст больше удобства пользователям, особенно тем, которые в силу разных причин отключают показ изображений в браузере. О них тоже нужно помнить.

Источник

HTML Изображение карта

С помощью карт изображений можно добавлять интерактивные области на изображение.

Карта изображений

Нажмите на компьютер, телефон или чашку кофе на изображении ниже:

Пример

Вот исходный код HTML для приведенной выше карты изображений:

Как это работает?

Идея карты изображений заключается в том, что вы должны иметь возможность выполнять различные действия в зависимости от того, где в изображении вы нажимаете.

Для создания карты изображений вам понадобится изображение и карта, содержащая некоторые правила, описывающие кликабельные области.

Создание изображения

Значение usemap начинается с хэштега # затем следует имя карты изображений, и используется для создания связи между изображением и картой изображений.

Совет: Вы можете использовать любое изображение в качестве карты изображений.

Создание карты изображений

Элемент используется для создания карты изображений и связан с изображением с помощью атрибута name :

Примечание: Вы можете вставить элемент в любом месте, где вам нравится, он не должен быть вставлен сразу после изображения.

Создание области

Затем добавьте кликабельные области.

Форма

Вы должны определить форму области, и вы можете выбрать одно из этих значений:

Вы также должны определить некоторые координаты, чтобы иметь возможность разместить кликабельную область на изображении.

Shape=»rect»

Координаты для shape= «rect» приходят парами, один для оси x и один для оси Y.

Координата 34, 44 находится на расстоянии 34 пикселей от левого края и 44 пикселей от верхнего:

Координата 270, 350 находится на расстоянии 270 пикселей от левого края и 350 пикселей от верхнего:

Теперь у вас достаточно данных для создания кликабельной прямоугольной области:

Это область, которая становится кликабельной и отправляет пользователя на страницу computer.htm:

Shape=»circle»

Чтобы добавить область круга, сначала найдите координаты центра круга:

Затем укажите радиус окружности:

Теперь у вас есть достаточно данных, чтобы создать кликабельную круговую область:

Это та область, которая становится кликабельной и отправляет пользователя на страницу coffee.htm :

Shape=»poly»

shape=»poly» содержит несколько координатных точек, которые создают фигуру, образованную прямыми линиями (многоугольник).

Это может быть использовано для создания любой формы.

Например, в форме круассана!

Как мы можем сделать круассан на изображении ниже кликабельной ссылкой?

Мы должны найти координаты x и y для всех краев круассана:

Координаты делятся на пары: одна для оси x, другая для оси y:

Пример

Это та область, которая становится кликабельной и отправляет пользователя на страницу «croissant.htm»:

name attribute of the tag is associated with the ‘s usemap attribute and creates a relationship between the image and the map.

Изображение карта с JavaScript

Кликабельная область не обязательно должна быть ссылкой на другую страницу, она также может вызвать функцию JavaScript.

Пример

Вы можете использовать атрибут onclick для выполнения функции JavaScript при щелчке области.

Краткое содержание

HTML Теги изображений

Для получения полного списка всех доступных HTML тегов посетите HTML Справочник тегов.

Источник

Рисуем карту изображения мышкой

Теория

Начнём пожалуй с теории, куда ж без неё. Карта изображения содержит в себе два тега: map — контейнер карты и area — зона выделения. Карта не ограничена одной зоной и может содержать неограниченное их количество. Тег area кроме стандартных атрибутов имеет и свои собственные:

Так как зона выделения у меня должна была быть многоугольной, значение атрибута shape, тега area, мы указываем как poly — полигональная область. В таком режиме через запятую указываются координаты точки относительно левого верхнего угла — x,y. Точки также разделяются запятыми, что по началу при чтении такого кода вызывает недоумение.

Пишем Paint

Меня не тешила перспектива фотошопом находить координаты каждой точки, переписывать вручную цифры с окошка Info, а инструменты, которые попадались в гугле, были слишком монструозны. Было принято решения на коленке написать свой небольшой скрипт, который бы позволял расставлять точки просто кликая по нужной зоне на изображении, и выводил бы готовый код.

Для начала подготовим вёрстку:

В #bar будут вставляться кнопки для управления «пеинтом».
В #info будет выводится сгенерированный html код.

В javascript’е всё достаточно просто. В процессе написания я использовал свою боевую библиотечку, так что не удивляйтесь нестандартным функциям. Для начала повесим событие mousedown на #canvas, в котором будет рендериться точка на изображении и записываться её координаты.

Затем напишем функцию, которая будет генерировать html код нашей карты.

Обрамим всё в класс, немного вспомогательных функций, вот и всё. Надеюсь кому-то будет полезна сея тулза.

Ссылки

PS. Добавил ссылку на гитхаб.
PS2. Теперь «paint» работает на канвасе.

Источник

Построение изображения-карты

В этой статье мы с Вами рассмотрим как составить клиентскую изображение-карту, при клике на определенную область которой, мы сможем перейти по определенной ссылке. Составление изображений-карт можно редко встретить на сайтах, так как этот процесс довольно-таки трудоемкий, но если вы хотите удивить ваших посетителей необычной формой для ссылок и у вас есть в распоряжении свободное время для самообразования, то эта статья для вас.

Атрибут name элемента является обязательным, он связан с атрибутом usemap элемента (создает связь между изображением и картой).

Рис. 48 Создание активной области с использованием системы координат.

Пример использования

Давайте рассмотрим пример в котором при клике по определённой фигуре на одном рисунке происходит переход на разные веб-страницы, которые описывают эти фигуры (ссылки на Википедию):

И так по порядку, что мы сделали в этом примере:

Результат нашего примера в браузере (кликабельно) и на изображении:

Вопросы и задачи по теме

Перед тем как перейти к изучению следующей темы пройдите практическое задание:

Нюанс: для чистоты практического задания предлагаю в качестве первой точки использовать вершину звезды и двигаться по часовой стрелке. В качестве значения атрибута href я указал # в этом случае она выступает как заглушка (вы остаетесь на той же странице), вы можете сделать переход на любую страницу.

Подсказка: чтобы получить координаты изображения воспользуйтесь редактором изображений, даже самый простой редактор, например, Paint, отображет координаты курсора. Выпишите координаты на листок или в отдельный файл и внесите значения на страницу.

Если у Вас возникнут трудности с выполнением задания, то проинспектируйте код страницы, открыв пример в отдельном окне и внимательно его изучите.

Источник

Что собой представляет карта изображение

Электронная карта – картографическое изображение, сгенерированное на основе данных цифровых карт и визуализированное на видеомониторе компьютера или видеоэкране другого устройства, например, спутникового навигатора. Каждая конкретная электронная карта как средство оперативного контроля существует лишь в определённый момент времени, как правило, непродолжительный, пока её видно на устройстве отображения. И в этом их главное отличие от прочих визуальных картографических материалов, визуализируемых на твёрдой подложке, таких, как бумага, пластик, средствами графического вывода, например, принтерами.

Электронная карта (ЭК) — цифровая картографическая модель, визуализированная или подготовленная к визуализации на экране средства отображения информации в специальной системе условных знаков, содержание которой соответствует содержанию карты определенного вида и масштаба. При этом классификация электронных карт соответствует общей классификации карт, например: электронная топографическая карта, электронная геологическая карта, электронная авиационная карта, электронная кадастровая карта и другие.

Отсутствие необходимости иметь статичное изображение карты позволяет применять анимацию, например, мигание, для подсветки отдельных объектов, например, результатов поиска.

Благодаря развитию таких онлайновых картографических веб-сервисов, как Google Maps, Yandex Maps, например, которые не требуются устанавливать программное обеспечение на локальный компьютер, а также картографические данные постоянно обновляются. [1]

Для навигации обычно используются два вида карт: векторные или растровые. Также некоторые приложения могут использовать аэро- и космические снимки.

Растровая карта представляет собой цифровое изображение, получаемое путем сканирования обычной бумажной карты. Так же как и цифровая фотография, она является копией оригинала с точностью до элемента (пиксела) сканирования.

Растровые карты, по сути своей, это графический файл с изображением местности и файлом привязки. Файл привязки сопоставляет географические координаты и координаты точки рисунка.

Растровая карта местности представляет собой набор множества отдельных разноцветных точек (пикселей),расположенных в определенном порядке. Растровое изображение может быть сохранено в компьютере или на дисках различных форматах, то есть в виде файлов с различными расширениями. Основные растровые форматы, с которыми работают практически все графические программы: *.bmp, *.gif, *.jpg, *.tif, *.tiff, *.drg, *.png.

Основным достоинством растровой карты местности является то, что карта в электронный вид может быть переведена обычным сканированием с бумажного оригинала любого масштаба. При помощи компьютерной программы растровые карты местности можно масштабировать, детального посматривать карты большого размера, вручную корректировать объекты на карте, добавлять графическую и текстовую информацию.

Однако компьютер не распознает отдельные объекты в растровом изображении: реки, леса, дороги, строения воспринимаются программой как единый упорядоченный набор цветных точек и при увеличении масштаба четкость изображения ухудшается.

Растровая карта имеет две особенности:

Изготовить растровые карты можно и самостоятельно, достаточно иметь бумажную топографическую или туристическую карту и планшетный сканер. Для использования с GPS одного изображения недостаточно. Отсканированную карту необходимо будет привязать («откалибровать») по географическим координатам. Минимальную привязку карты можно выполнить по двум точкам, расположенным на противоположных краях изображения. При привязке необходимо как можно точнее сделать ориентацию на север. Карты больших размеров могут потребовать трех и более точек для привязки. Для максимально точной привязки рекомендуется использовать 5 точек (4 по краям и 1 в центре карты).

Значения координат точек привязки берутся с карты (если карта топографическая и имеет координатную сетку) или определяются опытным путем, непосредственно получив координаты на местности с помощью GPS. Качество и точность полученной растровой карты непосредственно зависит от сканирования, качества оригинала и точности ее привязки. [2]

На данный момент навигационная программа OziExplorer, включая модификацию OziCE дл КПК, практически не имеет конкурентов для работы с растровыми электронными картами.

Векторные карты местности

Векторные карты представляет собой хранилище изображений (базу данных) объектов (дороги, строения, лес, водоемы и др.) с описанием этих объектов в виде математических формул и алгоритмов, определяющих геометрическую форму, размер, цвет, местоположение объекта. Таким образом, компьютерная программа различает и опознает каждый объект индивидуально. Основное отличие векторной карты местности от растровой состоит в том, что в программе хранится не само изображение объекта, а информация, на основе которой объект создается непосредственно в процессе визуализации на экране компьютера.

Каждое перемещение по векторной карте означает перерисовку всех видимых объектов. Поэтому для ускорения работы с векторной картой объект в зависимости от выбранного масштаба может быть отображен подробно, схематически или скрыт.

Навигационная программа позволяет настраивать степень подробности отображения объектов и подписей на карте в зависимости от масштаба.

При загрузке подобной карты программа анализирует информацию, хранящуюся в базе данных, и на ее основе создает изображение карты местности. Так как векторная карта содержит минимальный объем графической информации, то и места в памяти программы и на флеш-карте занимает немного. К примеру, на карту объемом 1 Гб можно записать до 500 километровок (в зависимости от разрешения карты).

Подписи к объектам также находятся в базе данных и при необходимости оперативно генерируются на экране вместе с другими объектами векторной карты. Отдельные программы дают возможность управления цветом, шрифтом и расположением надписей. При увеличении масштаба программа следит за тем, чтобы надписи по возможности не перекрывались.

Форматы векторных карт, в отличие от форматов растровых карт, единого стандарта не имеют. Есть ряд форматов векторных карт, совместимых с большим количеством графических программ для работы с векторными изображениями. Некоторые же векторные форматы могут быть использованы только для какой-то определенной программы. [3]

При отображении векторных карт достаточно просто реализуются такие возможности как:

Электронные карты, работающие в режиме он-лайн.

Данные карты дают возможность посмотреть описание мира с детализацией стран, городов, ландшафта, городских и других объектов, возможность добавить новый объект, оставить комментарий к существующему, измерить расстояние и площадь.

Сервис представляет собой карту и спутниковые снимки всего мира (а также Луны и Марса). С сервисом интегрирован бизнес-справочник и карта автомобильных дорог, с поиском маршрутов, охватывающая США, Канаду, Японию, Гонконг, Китай, Великобританию, Ирландию (только центры городов) и некоторые районы Европы, в том числе и города в России. Пользователи, в частности, могут просматривать фотографии крупных европейских городов, населенных пунктов и пр. Например, через Google Maps можно с высоты спутника рассмотреть Москву, Лондон, Париж, Сидней и т.д.

Изображения можно сдвигать влево, вправо, вверх, вниз, уменьшать или увеличивать масштаб, а также быстро возвращаться в исходную точку, с которой начался просмотр.

Источник