Что такое карта изображений
Карты-изображения
Карты-изображения позволяют привязывать ссылки к разным областям одного изображения. Реализуется в двух различных вариантах — серверном и клиентском. В случае применения серверного варианта браузер посылает запрос на сервер для получения адреса выбранной ссылки и ждет ответа с требуемой информацией. Такой подход требует дополнительного времени на ожидание результата и отдельные файлы для каждой карты-изображения.
В клиентском варианте карта располагается в том же 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
Карта изображений (Image Map) позволяет привязывать ссылки к фрагментам изображения. Щелкая мышью на отдельных частях изображения, пользователь может переходить по той или иной ссылке на разные Web-страницы.
Карта изображения состоит из участков изображения и соответствующих им ссылок. Описывает участок изображения и ставит ему в соответствие ссылку одиночный тег .
Атрибуты тега
| shape | Очертания области. Возможные значения атрибута:
| ||||||
| coords | Координаты области. Для прямоугольника – координаты левого верхнего и правого нижнего углов. Для круга – координаты центра и радиус. Для многоугольника – координаты всех углов. | ||||||
| href | Адрес файла, на который делается ссылка. | ||||||
| nohref | Означает, что эта область не действует. Удобен для вырезания дыр. | ||||||
| alt | Текстовое описание области. Служит альтернативой при отключенной в браузере загрузке изображений. | ||||||
| title | Всплывающий текст, появляющийся при наведении курсора мышки на заданную область. |
Координаты по умолчанию измеряются в пикселях.
Начало отсчета координат – это верхний левый угол экрана, т.е.
Примеры различных форм областей карты изображений
Если две описанных области накладываются друг на друга, то используется ссылка, принадлежащая первой из них. Эту особенность можно использовать в ситуации, когда пользователь щелкает мышью на точке, которая не принадлежит ни одной из областей карты, определив последнюю область карты как прямоугольник шириной и высотой во всю картинку.
Чтобы использовать изображение, как карту, в тег необходимо ввести дополнительный атрибут usemap, определяющий имя карты изображения. Перед этим именем ставится знак «#».
Пример использования Image Map
При кликах на различные области данного изображения меняется цвет соответствующего текста:
Область 1
Область 2
Область 3
Область 4
Применение технологии Image Map
Технология Image Map применяется в самых различных областях. Однако наиболее часто ее применение можно увидеть при создании графических меню, когда создается одно большое изображение с элементами меню, и каждому участку изображения предписывается определенное действие.
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 Справочник тегов.
HTML Карты изображений
С помощью карт изображений HTML можно создавать зоны, на которые можно кликать.
В этой теме:
Карты изображений
Попробуйте кликнуть на компьютере, телефоне или чашке кофе на изображении ниже:
Пример
Вот исходный HTML код для карты изображений выше:
Как это работает?
Идея карты изображений заключается в том, что вы должны иметь возможность выполнять различные действия в зависимости от того, где на картинке вы кликаете.
Для создания карты изображений вам нужно изображение и некоторый HTML-код, который описывает области, на которые можно кликнуть.
Изображения
Изображение вставляется с помощью тега Единственное отличие от других изображений заключается в том, что вы должны добавить атрибут usemap :
Примечание: Вы можете использовать любое изображение для карты изображений!
Создать карту изображений
Элемент используется для создания карты изображений и связывается с изображением с помощью необходимого атрибута name :
Кликабельные области
Потом добавьте кликабельные области.
Форма кликабельной области
Вы должны определить форму области, на которую можно кликнуть, и вы можете выбрать одно из этих значений:
Вы также должны определить некоторые координаты, чтобы можно было разместить область, на которую можно нажать на изображении.
Shape=»rect»
Координаты для shape=»rect» состоят попарно, одна для оси x, и одна для оси y.
Т.о., координаты 34,44 расположены на 34 пикселей от левого поля и 44 пикселей от верхнего:
Координаты 270,350 расположены в 270 пикселей от левого поля и 350 пикселей от верхнего:
Теперь у нас есть достаточно данных, чтобы создать прямоугольную область, на которую можно нажать:
Пример
Это область, которая становится интерактивной и направляет пользователя на страницу «computer.html»:
Shape=»circle»
Чтобы добавить область круга, сначала найдите координаты центра окружности:
Затем укажите радиус окружности:
Теперь у вас есть достаточно данных для создания интерактивной круговой области:
Пример
Это область, которая становится интерактивной и направляет пользователя на страницу «coffee.html»:
Shape=»poly»
shape=»poly» содержит несколько координатных точек, создает фигуру, образованную прямыми линиями (многоугольник).
Это можно использовать для создания любой фигуры.
Как, возможно, форма круассана!
Как мы можем сделать так, чтобы круассан на картинке ниже стал ссылкой, которую можно кликнуть?
Мы должны найти координаты x и y для всех краев круассана:
Координаты подаются попарно, одна для оси x и одна для оси y:
Пример
Это область, которая становится интерактивной и направляет пользователя на страницу «croissant.html»:
Карта изображений и JavaScript
Интерактивная область может также вызвать функцию JavaScript.
Пример
Здесь мы используем атрибут onclick для выполнения функции JavaScript при нажатии на область:
Резюме
HTML Теги изображения
| Тег | Описание |
|---|---|
| Определяет изображение | |
| Определяет карту изображений | |
| Определяет кликабельную область внутри карты изображений | |
| Определяет контейнер для нескольких ресурсов изображений |
Для ознакомления с полным списком всех доступных HTML тегов посетите HTML Справочник тегов на нашем сайте.
Вопросы для самоконтроля
ПАЛИТРА ЦВЕТОВ
ПРИСОЕДИНЯЙТЕСЬ!
Получите ваш
Сертификат сегодня!
Связь с админом
Если вы хотите сообщить об ошибке, а также внести предложение о работе сайта, добавить объявление или рекламу на сайт, не стесняйтесь отправить админу электронное письмо на email:
Топ Учебники
Топ Справочники
Топ Примеры
Веб Сертификаты
Этот сайт оптимизирован для обучения и тестирования. Примеры могут быть упрощены для улучшения чтения и базового понимания. Учебные пособия, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность и работоспособность всего контента. Используя этот сайт, вы соглашаетесь с тем, что прочитали и приняли условия использования, cookie и политику конфиденциальности.
Также вы можете абсолютно бесплатно скачать офлайн версию сайта W3Schools на русском архивом с GitHub и пользоваться локально на своём компьютере.
Также доступна версия сайта W3Schools на украинском языке.
Copyright 1999-2021 by Refsnes Data. All Rights Reserved.
Сайт работает на фреймворке W3.CSS.
Рисуем карту изображения мышкой
Теория
Начнём пожалуй с теории, куда ж без неё. Карта изображения содержит в себе два тега: map — контейнер карты и area — зона выделения. Карта не ограничена одной зоной и может содержать неограниченное их количество. Тег area кроме стандартных атрибутов имеет и свои собственные:
Так как зона выделения у меня должна была быть многоугольной, значение атрибута shape, тега area, мы указываем как poly — полигональная область. В таком режиме через запятую указываются координаты точки относительно левого верхнего угла — x,y. Точки также разделяются запятыми, что по началу при чтении такого кода вызывает недоумение.
Пишем Paint
Меня не тешила перспектива фотошопом находить координаты каждой точки, переписывать вручную цифры с окошка Info, а инструменты, которые попадались в гугле, были слишком монструозны. Было принято решения на коленке написать свой небольшой скрипт, который бы позволял расставлять точки просто кликая по нужной зоне на изображении, и выводил бы готовый код.
Для начала подготовим вёрстку:
В #bar будут вставляться кнопки для управления «пеинтом».
В #info будет выводится сгенерированный html код.
В javascript’е всё достаточно просто. В процессе написания я использовал свою боевую библиотечку, так что не удивляйтесь нестандартным функциям. Для начала повесим событие mousedown на #canvas, в котором будет рендериться точка на изображении и записываться её координаты.
Затем напишем функцию, которая будет генерировать html код нашей карты.
Обрамим всё в класс, немного вспомогательных функций, вот и всё. Надеюсь кому-то будет полезна сея тулза.
Ссылки
PS. Добавил ссылку на гитхаб.
PS2. Теперь «paint» работает на канвасе.