Графические карты html. Рисуем карту изображения мышкой
HTML - Урок 15. Навигационные карты - map
Многие html-страницы используют для организации ссылок так называемые карты-изображения. При таком подходе берется изображение и к различным его областям привязываются ссылки. Самым распространенным примером являются туристические карты мира, щелкаете по ее части с какой-либо страной и попадаете на страницу, посвященную этой стране.Такие карты-изображения могут быть клиентскими и серверными. Ссылки клиентских карт хранятся в самом документе и по щелчку мыши браузер сам определяет, к какой области относятся координаты этой точки и осуществляет переход по нужной ссылке.
При серверном варианте эти координаты сначала передаются на сервер, там обрабатываются специальной программой и только после этого происходит переход по ссылке.Очевидно, что клиентские навигационные карты предпочтительнее. Их мы и рассмотрим.
Для примера представим, что мы являемся магазином бытовой техники и в шапке нашего сайта у нас расположена вот такая картинка:
Сделаем из нее навигационную карту, т.е. при щелчке по холодильнику будет осуществляться переход на страницу, посвященную холодильникам (с моделями, описанием и ценами), при щелчках по пылесосу и стиральной машине на соответствующие им страницы.
Для этого нам надо описать области на этой картинке, которые будут ссылками. Для описания таких областей используются теги с единственным параметром name , который задает имя карты-ссылок и используется потом для ссылки на эту карту.
Нашу карту надо подключить к нашей картинке, для этого в тег
Для описания конкретных областей внутри тегов используются теги . Этот тег имеет следующие параметры:
- shape
- определяет форму области, может принимать следующие значения:
- rect - область в виде прямоугольника,
- circle - область в виде круга,
- poly - область в виде многоугольника,
- default - вся область.
- cootds
- задает координаты отдельной области:
- для rect задаются координаты верхнего левого и правого нижнего углов прямоугольника,
- для circle задаются координаты центра круга и радиус,
- для poly задаются координаты вершин многоугольника в нужном порядке.
- href - определяет адрес ссылки.
- target - применяется при использовании фреймов и указывает фрейм в который нужно загрузить страницу.
- alt - задает альтернативный текст для области.
Теперь надо определиться с координатами этих областей. На самом деле это самый трудоемкий процесс. В нашем примере мы решили, что области будут прямоугольными и значительно облегчили себе задачу, а представьте, сколько точек нужно задать, например, для обвода страны на карте. Тем не менее, нам надо задать координаты верхнего левого и правого нижнего углов трех прямоугольников.
Для этих целей обычно используется какая-нибудь программа, например, Image Ready, которая имеет специальный инструмент для обводки областей и автоматически строит описания этих областей. Рассмотрение работы этих программ не входит в курс HTML, поэтому здесь мы зададим координаты "на глаз". Посмотрите еще раз на наше изображение:
Ширина нашей картинки 738 пикселов, а высота - 192 пиксела. Проведем линии по границам наших областей и примерно определим координаты. Теперь мы готовы добавить эти параметры в наши теги .
Результат:
Теперь наши области стали ссылками (если подвести курсор мыши, он превращается в ладошку). На этом сайте нет страниц, посвященных холодильникам, поэтому ссылки ведут на эту же страницу, но если вы создадите нужные страницы, то при щелчке по области будет осуществляться переход.
На этом наши уроки подошли к концу. Вы ознакомились со всеми возможностями языка HTML. Для закрепления навыков ознакомьтесь с двумя уроками Делаем сайт - табличная верстка .
Напоследок, надо сказать, что в HTML есть еще два замечательных элемента - теги
В html-документ.
Теперь давайте выясним, что такое карта изображения.
С помощью карты изображения вы можете сделать так, что при нажатии на разные области одной и той же картинки, вы попадаете на разные страницы. Карту изображения некоторые называют еще навигационной картой.
Я понимаю, что на словах это тяжело понять, потому предлагаю посмотреть пример, как выглядит карта изображения вживую.
Только обратите внимание: картинка одна, а области и путь перехода разный.
Не бойтесь, это вовсе не сложно. Самое главное – понять теорию и закрепить практикой.
Ну что, приступим к теории.
Карты изображения (навигационные карты) задаются тегом
.
Тег
- это коробка, внутри которой размещают теги
.
Тег
предназначен для определения геометрической области с ссылкой, привязанной к каждой области.
Атрибуты areа
1. Атрибут shape
shape
– определяет форму области (прямоугольником, кругом, многоугольником
).
Прямоугольник
- "rect
". Пример: shape="rect
"
;
круг
- "circle
". Пример: shape="circle
"
;
многоугольник
- "poly
". Пример: shape="poly
"
2. Атрибут coords
coords
– это расположение геометрической формы.
Давайте рассмотрим пример на геометрической форме прямоугольника.
Вы уже знаете, что если вам нужна форма прямоугольника, значит нужно прописать в атрибуте shape значение « rect ».
Точка отсчета начинается с левого верхнего угла картинки, координаты которого (0;0)
Значит, нужно указать координаты рабочей области у прямоугольника верхний-левый и нижний-правый угол.
Для примера с прямоугольником №1 возьмите такие координаты:
x1=25, y1=36, x2=114, y2=98
Вот так будет выглядеть код:
Все пока что хорошо. Но нам теперь нужно связать картинку с картой.
Для этого придумайте любое название для карты, например, «karta1
» и пропишите его в теге
Теперь свяжем карту с картинкой. Для этого используем атрибут usemap
.
Пример написания:
usemap="
#имя_карты"
В нашем случае это будет выглядеть следующим образом:
Теперь соберем все вместе и пропишем еще координаты к другому прямоугольнику №2 с такими данными (x1=153, y1=11, x2=219, y2=127).
Теперь смотрите на результат. Нажмите на прямоугольник №1 и на прямоугольник №2
Для начала нужно указать тип области. Для этого пропишем в атрибуте shape значение «circle ».
Теперь переходим к координатам.
Чтобы создать координаты для круглой области, нужно прописать данные к центру (xy) и указать длину радиуса (R).
Порядок записи координат для атрибута coords будет таким:
Для круга №1 возьмите такие координаты:
x=46, y=48; а длина радиуса - R=35
Теперь соберем все вместе и пропишем еще координаты к кругу №2 с такими данными x=158, y=75, R=53.
Теперь смотрите на результат. Нажмите на круг №1 и на круг №2:
Многоугольная область самая сложная область в навигационной карте.
Для начала нужно указать тип области. Для этого пропишите в атрибуте shape значение «poly »
Теперь переходим к координатам.
Порядок записи координат для атрибута coords будет таким:
Разъяснение:
x1
,y1
-
координаты первого угла;
x2
,y2
-
координаты второго угла;
xN
,yN
-
координаты последнего угла
То есть, для многоугольника №2 это выглядит вот так:
Теперь дадим карте название и привяжем карту к рисунку:
Теперь соберем все вместе и пропишем еще координаты к шестиугольнику №1 с такими данными: x1=54, y1=20, x2=109, y2=20, x3=147, y3=58, x4=109, y4=96, x5=54, y5=96, x6=16, y6=58.
Теперь смотрите на результат. Нажмите на многоугольник №1 и на многоугольник №2:
Возможность комбинирования
Бывают такие случаи, когда нужно использовать одновременно на одной картинке разные области, например, круг и прямоугольник:
Дополнение с использованием TITLE
Для каждой области можно прописать подсказки, используя атрибут title.
Теперь смотрите на результат. Наведите курсор мышки на круг, а потом на прямоугольник:
Вот и все. С картой изображения в HTML (навигационная карта) мы разобрались.
HTML-изображения
добавляются на веб-страницы с помощью тега . Использование графики делает веб-страницы визуально привлекательнее. Изображения помогают лучше передать суть и содержание веб-документа.
С помощью HTML-тегов
Вставка изображений в HTML-документ
1. Тег ![]()
Элемент представляет изображение и его резервный контент, который добавляется с помощью атрибута alt . Так как элемент
является строчным, то рекомендуется располагать его внутри блочного элемента, например,
Или
Тег имеет обязательный атрибут src , значением которого является абсолютный или относительный путь к изображению:
Для тега доступны следующие атрибуты:
| Атрибут | Описание, принимаемое значение |
|---|---|
| alt | Атрибут alt добавляет альтернативный текст для изображения. Выводится на месте появления изображения до его загрузки или при отключенной графике, а также выводится всплывающей подсказкой при наведении курсора мыши на изображение. Синтаксис: alt="описание изображения" . |
| crossorigin | Атрибут crossorigin позволяет загружать изображения с ресурсов другого домена с помощью CORS-запросов. Изображения, загруженные в холст с помощью CORS-запросов, могут быть использованы повторно. Допускаемые значения: anonymous — Cross-origin запрос выполняется с помощью HTTP-заголовка, при этом учетные данные не передаются. Если сервер не даёт учетные данные серверу, с которого запрашивается контент, то изображение будет испорчено и его использование будет ограничено. use-credentials — Cross-origin запрос выполняется с передачей учетных данных. Синтаксис: crossorigin="anonymous" . |
| height | Атрибут height задает высоту изображения в px . Синтаксис: height="300" . |
| ismap | Атрибут ismap указывает на то, что картинка является частью изображения-карты, расположенного на сервере (изображение-карта — изображение с интерактивными областями). При нажатии на изображение-карту координаты передаются на сервер в виде строки запроса URL-адреса. Атрибут ismap допускается только в случае, если элемент Синтаксис: ismap . |
| longdesc | URL расширенного описания изображения, дополняющее атрибут alt . Синтаксис: longdesc="http://www.example.com/description.txt" . |
| src | Атрибут src задает путь к изображению. Синтаксис: src="flower.jpg" . |
| sizes | Задаёт размер изображения в зависимости от параметров отображения. Работает только при заданном атрибуте srcset . Значением атрибута является одна или несколько строк, указанных через запятую. |
| srcset | Создаёт список источников для изображения, которые будут выбраны, исходя из разрешения экрана. Может использоваться вместе или вместо атрибута src . Значением атрибута является одна или несколько строк, разделенных запятой.
|
| usemap | Атрибут usemap определяет изображение в качестве карты-изображения. Значение обязательно должно начинаться с символа # . Значение ассоциируется со значением атрибута name или id тега |
| width | Атрибут width задает ширину изображения в px . Синтаксис: width="500" . |
1.1. Адрес изображения
Адрес изображения может быть указан полностью (абсолютный URL), например:
url(http://anysite.ru/images/anyphoto.png)
Или же через относительный путь от документа
или корневого каталога
сайта:
url(../images/anyphoto.png) — относительный путь от документа,
url(/images/anyphoto.png) — относительный путь от корневого каталога.
Это интерпретируется следующим образом:
../ — означает подняться вверх на один уровень, к корневому каталогу,
images/ — перейти к папке с изображениями,
anyphoto.png — указывает на файл изображения.
1.2. Размеры изображения
Без задания размеров изображения рисунок отображается на странице в реальном размере. Отредактировать размеры изображения можно с помощью атрибутов width и height . Если будет задан только один из атрибутов, то второй будет вычисляться автоматически для сохранения пропорций рисунка.
1.3. Форматы графических файлов
Формат JPEG (Joint Photographic Experts Group) . Изображения JPEG идеальны для фотографий, они могут содержать миллионы различных цветов. Сжимают изображения лучше GIF, но текст и большие площади со сплошным цветом могут покрыться пятнами.
Формат GIF (Graphics Interchange Format) . Идеален для сжатия изображений, в которых есть области со сплошным цветом, например, логотипов. GIF-файлы позволяют установить один из цветов прозрачным, благодаря чему фон веб-страницы может проявляться через часть изображения. Также GIF-файлы могут включать в себя простую анимацию. GIF-изображения содержат всего лишь 256 оттенков, из-за чего изображения выглядят пятнистыми и нереалистичного цвета, как плакаты.
Формат PNG (Portable Network Graphics) . Включает в себя лучшие черты GIF- и JPEG-форматов. Содержит 256 цветов и дает возможность сделать один из цветов прозрачным, при этом сжимает изображения в меньший размер, чем GIF-файл.
Формат APNG (Animated Portable Network Graphics) . Формат изображения, основанный на формате PNG. Позволяет хранить анимацию, а также поддерживает прозрачность.
Формат SVG (Scalable Vector Graphics) . SVG-рисунок состоит из набора геометрических фигур, описанных в формате XML: линия, эллипс, многоугольник и т.п. Поддерживается как статичная, так и анимированная графика. Набор функций включает в себя различные преобразования, альфа-маски, эффекты фильтров, возможность использования шаблонов. Изображения в формате SVG могут изменяться в размере без снижения качества.
Формат BMP (Bitmap Picture) . Представляет собой несжатое (оригинальное) растровое изображение, шаблоном которого является прямоугольная сетка пикселей. Bitmap-файл состоит из заголовка, палитры и графических данных. В заголовке хранится информация о графическом изображении и файле (глубина пикселей, высота, ширина и количество цветов). Палитра указывается только в тех Bitmap-файлах, которые содержат палитровые изображения (8 и менее бит) и состоят не более чем из 256 элементов. Графические данные представляют саму картинку. Глубина цвета в данном формате может быть 1, 2, 4, 8, 16, 24, 32, 48 бит на пиксель.
Формат ICO (Windows icon) . Формат хранения значков файлов в Microsoft Windows. Также, Windows icon, используется как иконка на сайтах в интернете. Именно картинка такого формата отображается рядом с адресом сайта или закладкой в браузере. Один ICO-файл содержит один или несколько значков, размер и цветность каждого из которых задаётся отдельно. Размер значка может быть любым, но наиболее употребимы квадратные значки со сторонами 16, 32 и 48 пикселей.
2. Тег
Тег
Для тега доступен атрибут name , который задает имя карты. Значение атрибут name для тега
Элемент
3. Тег
Тег описывает только одну активную область в составе карты изображений на стороне клиента. Элемент не имеет закрывающего тега. Если одна активная область перекрывает другую, то будет реализована первая ссылка из списка областей.
| Атрибут | Краткое описание |
|---|---|
| alt | Задает альтернативный текст для активной области карты. |
| coords | Определяет позицию области на экране. Координаты задаются в единицах длины и разделяются запятыми: для круга — координаты центра и радиус круга; для прямоугольника — координаты верхнего левого и правого нижнего углов; для многоугольника — координаты вершин многоугольника в нужном порядке, также рекомендуется указывать последние координаты, равные первым, для логического завершения фигуры. |
| download | Дополняет атрибут href и сообщает браузеру, что ресурс должен быть загружен в момент, когда пользователь щелкает по ссылке, вместо того, чтобы, например, предварительно открыть его (как PDF-файл). Задавая имя для атрибута, мы таким образом задаем имя загружаемому объекту. Разрешается использовать атрибут без указания его значения. |
| href | Указывает URL-адрес для ссылки. Может быть указан абсолютный или относительный адрес ссылки. |
| hreflang | Определяет язык связанного веб-документа. Используется только вместе с атрибутом href . Принимаемые значения — аббревиатура, состоящая из пары букв, обозначающих код языка. |
| media | Определяет, для каких типов устройств файл будет оптимизирован. Значением может быть любой медиа-запрос. |
| rel | Дополняет атрибут href информацией об отношении между текущим и связанным документом. Принимаемые значения: alternate — ссылка на альтернативную версию документа (например, печатную форму страницы, перевод или зеркало). author — ссылка на автора документа. bookmark — постоянный URL-адрес, используемый для закладок. help — ссылка на справку. license — ссылка на информацию об авторских правах на данный веб-документ. next/prev — указывает связь между отдельными URL. Благодаря этой разметке Google может определить, что содержание данных страниц связано в логической последовательности. nofollow — запрещает поисковой системе переходить по ссылкам на данной странице или по конкретной ссылке. noreferrer — указывает, что переходе по ссылке браузер не должен посылать заголовок HTTP-запроса (Referrer), в который записывается информация о том, с какой страницы пришел посетитель сайта. prefetch — указывает, что целевой документ должен быть кэширован, т.е. браузер в фоновом режиме загружает содержимое страницы к себе в кэш. search — указывает, что целевой документ содержит инструмент для поиска. tag — указывает ключевое слово для текущего документа. |
| shape | Задает форму активной области на карте и ее координаты. Может принимать следующие значения: rect — активная область прямоугольной формы; circle — активная область в форме круга; poly — активная область в форме многоугольника; default — активная область занимает всю площадь изображения. |
| target | Указывает, куда будет загружен документ при переходе по ссылке. Принимает следующие значения: _self — страница загружается в текущее окно; _blank — страница открывается в новом окне браузера; _parent — страница загружается во фрейм-родитель; _top — страница загружается в полное окно браузера. |
| type | Указывает MIME-тип файлов ссылки, т.е. расширение файла. |
4. Пример создания карты-изображения
1) Размечаем исходное изображение на активные области нужной формы. Координаты областей можно вычислить с помощью программы для обработки фотографий, например, Adobe Photoshop или Paint .
Рис. 1. Пример разметки изображения для создания карты
2) Задаем имя карты, добавив его в тег
Jpg" alt="flowers_foto" width="680" height="383" usemap="#flowers">
Рис. 2. Пример создания карты-изображения, при нажатии курсора мыши на цветок осуществляется переход на страницу с описанием
Тег
Внутри контейнера
- один или более элементов < >. Эти элементы не имеют содержимого, но определяют геометрические регионы карты изображений и гиперссылки, ассоциированные с каждым регионом
- содержимое уровня блока. Это содержимое должно включать < >, которые специфицируют геометрические регионы карты и ссылки, ассоциированные с каждым регионом
Если тег
Если регионы перекрываются, элемент, определяющий регион, который появился раньше в документе, имеет приоритет.
HTML : 3.2 | 4 / XHTML : 1.0 | 1.1
Синтаксис
Атрибуты
| class | определяет имя используемого класса |
|---|---|
| dir | определяет направление символов:
|
| id | уникальный идентификатор |
| lang | определяет язык отображаемого документа |
| name | имя карты изображения. Используется, как значение параметра usemap тега |
| onblur | потеря фокуса элементом |
| onclick | щелчок на элементе |
| ondblclick | двойной щелчок на элементе |
| onfocus | получение фокуса элементом |
| onkeydown | нажатие клавиши, когда элемент имеет фокус |
| onkeypress | нажатие и освобождении клавиши, когда элемент имеет фокус |
| onkeyup | освобождение ранее нажатой клавиши, когда элемент имеет фокус |
| onmousedown | нажатие кнопки мыши, когда элемент имеет фокус |
| onmousemove | движение указателя мыши, когда элемент имеет фокус |
| onmouseout | смещение указателя мыши с элемента |
| onmouseover | помещение указателя мыши на элемент |
| onmouseup | освобождение ранее нажатой кнопки мыши, когда элемент имеет фокус |
| style | задает встроенную таблицу стилей |
| title | всплывающая подсказка |
Пример
- закрывающий тег обязателен ()
- атрибут id является обязательным
- рекомендуется предоставлять текстовую альтернативу графической карте для тех случаев, когда графика недоступна или пользователь не может её получить
- не рекомендуется использовать карту-изображений в качестве основной навигации, из-за слабой поддержки старыми и голосовыми браузерами
Тег — элемент уровня блока, т.е. содержимое тега всегда начинается с новой строки. После тега также добавляется перенос строки.
Плюсы
- Карты-изображения позволяют задать любую форму области ссылки, что особенно пригодится для указания географического района. Поэтому, карты-изображения применяются наиболее часто в географической тематике.
- С одной картинкой удобнее работать - не приходится заботиться о состыковке отдельных фрагментов при разрезании, и рисунок легко можно поместить в нужное место.
Минусы
- При сложной форме области ссылки увеличивается объём кода HTML. Контур аппроксимируется набором прямых отрезков, для каждой точки такого отрезка следует задать две координаты, а общее количество таких точек может быть достаточно велико.
- Соответственно, увеличивается сложность задания координат. Вручную их указывать не удобно, поэтому приходится пользоваться специальными программами, которые визуально показывают области и позволяют их редактировать.
- При смене изображения, например, при увеличении масштаба придётся заново задавать координаты всех областей ссылок.
- К картам-изображениям нельзя применять разные эффекты, которые доступны при разрезании одного рисунка на фрагменты: эффект перекатывания, частичная анимация, индивидуальная оптимизация картинок для их быстрой загрузки.
- Нет чётко выделенных границ ссылок. Поэтому эти границы приходится выделять разными средствами непосредственно на изображении. Если рисунок не загрузился по каким-либо причинам, то разобраться в наборе ссылок становится весьма проблематично.
С позиции удобства пользователей карты-изображения имеют только одно преимущество - включение ссылок разнообразной формы. Это добавляет наглядность в представлении информации - мы не ограничены прямоугольной формой ссылки и можем использовать ссылки сложной конфигурации для своих целей.
Карты-изображения реализуются в двух различных вариантах - серверном и клиентском. В случае применения серверного варианта браузер посылает запрос на сервер для получения адреса выбранной ссылки и ждёт ответа с нужной информацией. Такой подход требует дополнительного времени на ожидание результата и отдельные файлы для каждой карты-изображения.
В клиентском варианте карта располагается в том же HTML-документе, что и ссылка на изображение. Для указания того, что изображение является картой, применяется атрибут usemap
элемента
. В качестве значения используется указатель на описание конфигурации карты, которая устанавливается с помощью элемента
Пример 1. Создание карты-изображения
Внутри контейнера
Элемент имеет следующие атрибуты.
- shape - определяет форму активной области. Форма может быть в виде окружности (circle), прямоугольника (rect), полигона (poly).
- alt - добавляет альтернативный текст для каждой области. Служит лишь комментарием для ссылки, поскольку на экран не выводится. Обязательный атрибут при наличии href .
- title - выводит всплывающую подсказку при наведении курсора на область.
- href - задаёт адрес документа, на который следует перейти, по своему действию аналогичен подобному атрибуту элемента .
- coords - задаёт координаты активной области. Координаты отсчитываются в пикселях от левого верхнего угла изображения, которому соответствует значение 0, 0. Первое число является координатой по горизонтали, второе - по вертикали. Список координат зависит от формы области.
Для окружности задаются три числа - координаты центра круга и радиус.