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


Содержание
Работа над прямоугольным объектом В окошке Dimension (размеры) можете полюбоваться на уже готовые координаты! Но и это не все! Нам же с вами лень код писать, пускай программа сама напишет, раз уж мы сюда залезли. Выполняем File | Preview in (Файл | Предварительный Просмотр В) и в открывающемся диалоге выбираем браузер для просмотра, нажимаем ОК и о чудо! Открывается браузер, в котором наша картинка, вся информация о ней, а также весь написанный код! Наводим мышкой на книжку, убеждаемся, что появляется всплывающая подсказка «все о книгах», нажимаем, убеждаемся, что ссылка работает и все! Нам остается только сдуть нужный нам код и поместить его на свою страничку. Точно также обрабатываем оставшиеся ссылки – круглую шкатулку и многоугольную пепельницу. Только в этих случаях выбираем соответственно Circle Image Map Tool – для круглой ссылки, либо Polygon Image Map Tool – для многоугольной ссылки. Вот порядок действий для круглой ссылки-пепельницы: Установите указатель мыши слева от окружности. Нажмите и удерживайте левую кнопку мыши. Не отпуская левую кнопку мыши, перемещайте мышь к правому нижнему концу ок-ружности. Отпустите левую кнопку мыши. Вокруг шкатулки появится замкнутая кривая А вот для многоугольника-пепельницы: Щелкните мышкой около любого угла пепельницы с внешней стороны. За мышкой потянулась прямая. Щелкните мышкой около следующего угла пепельницы. Прямая зафиксировалась в этой точке и дальше тянется за мышкой. Обойдите с мышкой вокруг пепельницы, фиксируя нажимами все выступающие точки. Закончите свой путь над первой точкой, появится значок – крестик с кружочком, подтверждающая, что ломаная замкнулась, щелкните по первой точке, линия окра-сится в красный цвет. На этом я заканчиваю тему Карты изображений. Ну, и думаю, нам давно пора заняться звуком. Так что загремим под фанфары.
  • High Star
  • Уроки веб-мастеру
  • Карты изображений
  • Adobe Photoshop
  • Карты изображений в Image Ready
  • Илон Маск рекомендует:  Что такое код pdf_place_image

    HTML — Урок 15. Навигационные карты — map

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

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

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

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

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

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

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

    Карта изображения создаёт на изображении одну или несколько областей, которые являются ссылками. Вот пример такого изображения:

    Нажмите на определённую часть картинки и Вы перейдёте на соответствующий сайт.

    Карта изображения создаётся при помощи тега . У него должен быть атрибут name , который задаёт имя карты. А у тега должен быть атрибут usemap . Его значение совпадает с именем карты, только в начале идёт знак #. Таким образом изображение связывается с определённой картой. Для примера сделаем такое изображение, как на этой странице. Добавим на страницу картинку и создадим для неё карту.

    shape=»default» — всё изображение

    Кроме формы области указываются её координаты при помощи атрибута coord . Координаты указываются в пикселях и отсчитываются от левого верхнего угла изображения. Они перечисляются через запятую. Для каждой формы области координаты определяются по-разному. Для прямоугольника нужно указать два угла:

    X первого угла, Y первого угла, X второго, Y второго

    Для круга указываются координаты центра и радиус:

    X центра, Y центра, радиус

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

    В примере сделаем одну круглую область и одну прямоугольную. Для этого добавим в тег такой код:

    Области на карте изображения могут пересекаться. Выше будет та область, которая идёт раньше в коде страницы.

    Коприрование материалов сайта возможно только с согласия администрации

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

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

    У нас есть, картинка:

    На картинке мы видим элементы проигрывателя. Допустим мы хотим чтобы каждый элемент проигрывателя на картинке выполнял свои функции. Здесь нам и пригодится карта изображения.

    За создание карты изображения отвечают два тега map и area.

    map — тег map служит контейнером для тега area

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

    Сделаем на картинке кнопку play активной:

    Теперь разбираемся. Для того чтобы связать нашу картинку с контейнером map мы должны задать картинке атрибут usemap и в качестве значения указать имя тега map.

    Заметьте что значение атрибута usemap начинается с решетки. Далее после того как связали изображение с картой(map), мы определяем активную область с помощью одинарного тега area.

    В нем указываем следующие обязательные атрибуты:

    — shape — указывает форму области и может принимать следующие значения (default — весь регион, rect — прямоугольная область, circle — круглая область , poly — многоугольная область)

    Я выбрал многоугольную область(poly)

    — coords — данный атрибут задает координаты активной области на изображении. Кто знаком с svg я думаю не составит труда разобраться. Кто же не знаком поясню:

    У нас задана многоугольная область изображения(poly), поэтому я использую такой формат представления координат coords=»153,153,257,151,263,263,168,280″ где каждая пара чисел это координата x и y определенной точки. Отрисовка идет по ходу перемещения от точки к точке. В результате у нас получается четыре точки соединенные прямыми линиями между собой.

    Помимо обязательных атрибутов мы указали атрибут title для подсказки и onclick для обработки события клика.

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

    И воспроизведется содержимое тега audio. Заиграет музыка!

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

    В результате в консоли у вас будут выводится координаты курсора вашей мыши относительно картинки и вам будем удобнее находит x и y определенных точек.

    Помимо обработки событий мы можем в активных областях переходить по ссылкам через атрибут href.

    Здесь также можно пользоваться атрибутами target, accesskey, alt.

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

    На этом дорогие друзья у меня на сегодня все. Надеюсь данная статья была для вас интересна и познавательна.

    Желаю удачи и успехов! Пока!

    Оцените статью:

    Статьи

    TerrellLub

    Get 221 uplifting royalty free Hip-Hop music kits on AudioJungle. Buy uplifting music and sounds from $20.

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

    Дата публикации: 2009-07-30

    Всем привет. С Вами Бернацкий Андрей.

    В этом уроке я расскажу о том, как создавать карты-изображений в HTML.

    Карта-изображения – это какая-либо картинка, может быть фотография, которая имеет несколько активных зон.

    Например, при нажатии мыши на активную зону переходим на определенный URL. Если сидите в vkontakte.ru, там пример карты-изображения – это когда отмечают на фотографии, и при наведении курсора мыши на человека, отмеченного на фотографии, показывается его имя и фамилия, а при щелчке мыши происходит переход на страницу этого человека.

    Сначала предлагаю Вам видео версию данного урока:

    Как создать сайт самому?

    Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

    Делается это все достаточно просто. Берем любую фотографию с друзьями. Лучше вставить ее в свой отдельный блок

    Я взял для примера свою фотографию.

    Для div задан id для того, что бы можно было назначить какие-нибудь отступы или еще, что нужно будет. Я в своем примере ничего задавать не буду.

    Главный параметр у тега img в данном случае – это usemap=»#img-nav». Он указывает на карту с каким именем мы будем ссылаться.

    Далее создаем саму карту изображения. Карту создает тег . Итак сейчас опишем активную зону, по нажатию на которую перейдем на сайт webformyself.com.

    Идем по порядку.

    — значение параметра name должно совпадать со значением параметра usemap тега img, только у тега map оно записывается без символа #.

    Далее тег — говорит, что сейчас выделим активную зону.

    Как создать сайт самому?

    Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

    Параметр shape тега — показывает, какого типа будет наша область. На то, какая будет наша область, показывает значение параметра shape:

    rect – указывает, что область будет в виде прямоугольника.

    poly – произвольный многоугольник.

    circle – область будет в виде круга.

    Параметр coords содержит координаты нашей области.

    Если shape=»rect», то указываются координаты левого верхнего угла и правого нижнего. То есть первая пара чисел указывает на левый верхний, а вторая пара чисел – на правый нижний угол.


    Если shape=»poly», то указываются координаты каждой вершины многоугольника. shape=»poly» coords=»80,100,150,100,210,40,300,40,300,110″ в данном случае координаты первой вершины будут 80,100, второй 150,100, третий — 210,40, четвертой — 300,40, пятой — 300,110.

    Если shape=»circle» , то указываем координаты центра и радиус. shape=»circle» coords=»300,300,100″ здесь координаты центра 300,300 и радиус 100.

    Далее параметр shref содержит адрес страницы, или E-mail адрес. То есть, то же что и у обычной ссылки.

    title=»Andrey» alt=»Andrey» уже знакомые параметры. Останавливаться на них не буду.

    Создание ссылок на участках изображения: карта (map) ссылок

    В предыдущем посте «Создание карты (map) для ссылок в Photoshop» я сделал заготовку для размещения на определенных ее участках ссылок на разные web-страницы («Как сделать картинку ссылок»)

    Теперь если кликнуть на фигуры с надписями, то откроются соответствующие им странички: профиль, дневник или все посты из раздела «Уроки Photoshop» (внимание! после переноса блога на вордпресс и его переделки, ссылки не работают! но урок остается актуальным!)

    Для того, чтобы картинка заработала, я написал примерно такой HTML-код:

    Этот код можно вставить в поле сообщения (при нажатой кнопочке «Источник») или в эпиграф…

    Кстати, есть и другие посты по теме: «Что такое HTML», «HTML-код рисунков», «Картинка-ссылка» и так далее.

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

    Система координат: ось X — сверху вниз, ось Y — слева направо
    Для задания координат фигуры нужно установить:
    — квадрат (или прямоугольник), стороны которого параллельны осям — координаты двух противоположных углов — X1, Y1 и X2, Y2
    — многоугольник — координаты ВСЕХ углов
    — круг — координаты центра и радиус.

    В моем случае, выходит, нужны координаты точек A,C — для ссылки «Профиль» (прямоугольник), точек D,E,F,G,H — для ссылки «Дневник» (многоугольник), Q и длина R — для ссылки «Уроки Photoshop» (круг). Все эти числа в HTML-коде вверху выделены красным цветом. Кроме того, нужно знать размер изображения в пикселах (зеленый цвет)

    Необходимости в особой точности нет, поэтому определить координаты можно выяснить с помощью «линейки» в Photoshop — для ее вызова нажимаю Ctrl + R

    Мне было интереснее, чтобы кто-то другой посчитал координаты. Для этого запускаю MS Paint (Пуск — Все программы — Стандартные — Paint) и открываю в нем рисунок. При наведении курсора на искомые точки в нижней панели появляются их координаты, которые старательно записываю

    Навигационные карты задаются тэгом

    Тэг map включает себя тэги , которые определяют геометрические области карты-рисунка и связанные с ними ссылки.

    Разобрался я так — для создания навигационной карты нужны:

    теги с описанием изображения

    В моем случае, значения оказались такими:

    Значения для областей-ссылок — href — цель ссылки, shape — форма области и coords — координаты — соответствуют трем областям (area) на изображении.

    Прямоугольник «Профиль»

    • href=»https://bravedefender.ru/profile/» — адрес страницы профиля
    • shape=»rect» — обозначение формы «прямоугольник»
    • coords=»235,61,472,117″ — координаты точек A (235,61) и С (472,117)

    Многоугольник «Дневник»

    • href=»https://bravedefender.ru/blog» — адрес страницы дневника
    • shape=»poly» — обозначение формы «многоугольник»
    • coords=»235,118,362,118,474,152,457,207,229,146″ — координаты углов многоугольника: точки D (235,118), E (362,118), F (474,152), G (457,207) и H (229,146)

    Круг «Уроки Photoshop»

    • href=»https://bravedefender.ru/showjournal.php?journal — координаты круга: центр — точка Q (551,198) и радиус — R=65
    Илон Маск рекомендует:  GeekBrains хватит мечтать, начинайте кодить

    Подставил все полученные значения в «систему» HTML-кода для навигационной карты-изображения и получил следующее:

    Именно этот код при использовании «превращается» в картинку с областями-ссылками.

    Для тренировки есть «облегченный» легкий вариант создания участков-ссылок — пост «Тренировка: области-ссылки на изображении»

    Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

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

    Ниже приведён код, создающий карту изображений и привязывающий её к изображению:

    В результате получится следующее (активные зоны расположены над изображениями фигур):

    Преимущества и недостатки

    1. Карты позволяют задать любую форму области ссылки. Учитывая, что изображения по своей природе прямоугольны, сделать графическую ссылку сложной формы, например для указания географического района, без карт-изображений не представляется возможным.
    2. С одним файлом удобнее работать — не приходится заботиться о состыковке отдельных фрагментов.
    1. Нельзя установить всплывающую подсказку и альтернативный текст для отдельных областей. Альтернативный текст позволяет получить текстовую информацию о рисунке при отключенной в браузере загрузке изображений. Если отключить просмотр изображений, то в итоге увидим лишь один пустой прямоугольник.
    2. При сложной форме области ссылки увеличивается объем кода HTML. Контур состоит из набора прямых отрезков, для каждой точки которого следует задать две координаты, а общее количество таких точек может быть достаточно велико. Справедливости ради, следует отметить, что сложные формы являются частным случаем и применяются достаточно редко.
    3. С картами-изображениями нельзя сделать разные эффекты, которые доступны при разрезании одного рисунка на фрагменты: эффект перекатывания, частичная анимация, индивидуальная оптимизация картинок для их быстрой загрузки и т.д.

    Ссылки

    На эту статью не ссылаются другие статьи Википедии.

    Wikimedia Foundation . 2010 .

    Смотреть что такое «Карта изображений» в других словарях:

    Карта расширения — (адаптер) в информатике печатная плата, которую помещают в слот расширения материнской платы компьютерной системы с целью добавления дополнительных функций. Один край карты расширения оснащён контактами, точно соответствующими разъёму… … Википедия

    Сенсорная карта — Карта изображений (англ. image map, иногда cенсорная карта) это графический объект, содержащий специальные области (активные зоны), связанные с … Википедия

    Цифровая карта — (цифровая карта местности) цифровая модель местности, созданная путем цифрования картографических источников, фотограмметрической обработки данных дистанционного зондирования, цифровой регистрации. ГОСТ 28441 99 даёт такое определение: «Цифровая… … Википедия

    USIM-карта — (от англ. Universal Subscriber >Википедия

    Сканер изображений — У этого термина существуют и другие значения, см. Сканер. Сканер (ан … Википедия

    ХТМЛ — HTML Каскадные таблицы стилей (CSS) Кодировки символов Сравнение движков отображения Семейство шрифтов Редактор HTML Элементы HTML Мнемоники в HTML Скрипты в HTML Юникод и HTML Цвета в Web (Web colors) WWW Консорциум (W3C) HTML (от англ.… … Википедия

    Карты расширений — Карта расширения (адаптер) в информатике печатная плата, которую помещают в слот расширения материнской платы компьютерной системы с целью добавления дополнительных функций. Один край карты расширения оснащён контактами, точно… … Википедия

    Муми-дол — Карта Муми дола Долина муми троллей (швед. Mum … Википедия

    Список искусственных объектов на Луне — Карта Луны, на которой изображены места прилунения аппаратов Список искусственных объектов, которые достигли поверхности Луны. Общая масса всех искусственных объектов, достигших поверхности, составляет бо … Википедия

    Комплексная лаборатория исследования внеземных территорий (КЛИВТ) — Комплексная лаборатория исследования внеземных территорий КЛИВТ Руководители Jürgen Oberst Основание 1961 год … Википедия

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

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

    Плюсы

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

    Минусы

    • При сложной форме области ссылки увеличивается объём кода HTML. Контур аппроксимируется набором прямых отрезков, для каждой точки такого отрезка следует задать две координаты, а общее количество таких точек может быть достаточно велико.
    • Соответственно, увеличивается сложность задания координат. Вручную их указывать не удобно, поэтому приходится пользоваться специальными программами, которые визуально показывают области и позволяют их редактировать.
    • При смене изображения, например, при увеличении масштаба придётся заново задавать координаты всех областей ссылок.
    • К картам-изображениям нельзя применять разные эффекты, которые доступны при разрезании одного рисунка на фрагменты: эффект перекатывания, частичная анимация, индивидуальная оптимизация картинок для их быстрой загрузки.
    • Нет чётко выделенных границ ссылок. Поэтому эти границы приходится выделять разными средствами непосредственно на изображении. Если рисунок не загрузился по каким-либо причинам, то разобраться в наборе ссылок становится весьма проблематично.

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

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


    В клиентском варианте карта располагается в том же HTML-документе, что и ссылка на изображение. Для указания того, что изображение является картой, применяется атрибут usemap элемента . В качестве значения используется указатель на описание конфигурации карты, которая устанавливается с помощью элемента . Значение атрибута name у должно соответствовать имени в usemap . При этом значение usemap в начинается с символа решётки (пример 1).

    Пример 1. Создание карты-изображения

    • shape — определяет форму активной области. Форма может быть в виде окружности (circle), прямоугольника (rect), полигона (poly).
    • alt — добавляет альтернативный текст для каждой области. Служит лишь комментарием для ссылки, поскольку на экран не выводится. Обязательный атрибут при наличии href .
    • title — выводит всплывающую подсказку при наведении курсора на область.
    • href — задаёт адрес документа, на который следует перейти, по своему действию аналогичен подобному атрибуту элемента .
    • coords — задаёт координаты активной области. Координаты отсчитываются в пикселях от левого верхнего угла изображения, которому соответствует значение 0, 0. Первое число является координатой по горизонтали, второе — по вертикали. Список координат зависит от формы области.

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

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

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

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

    Иногда согласно дизайнерскому замыслу web-мастера в HTML-документ надо поместить изображение, отдельные части которого должны переводить по гиперссылке на разные целевые документы. Один из очевидных примеров такого изображения — географическая карта, щелкнув мышкой по определенным зонам которой, мы переходим к соответствующим документам. В этом случае организовать ссылку с использованием элемента a непосредственно нельзя, и приходится либо «разрезать» изображение на несколько отдельных, состыковать их и действовать обычным образом (см. раздел Гиперссылки), либо использовать элемент map, задающий навигационную карту, основанную на изображении.

    У элемента-контейнера map единственным обязательным артибутом является его имя name, которое должно быть использовано при описании атрибута usemap элемента img , описывающего изображение, призванного служить картой (см. пример, приведенный ниже). Внутри контейнера map каждой чувствительной к перемещению мыши зоне изображения должен соответствовать элемент area с атрибутами:

    coords = список Список через запятую координат активной зоны (зависит от типа заданной формы зоны)
    href = url Адрес целевого документа гиперссылки, связанного с указанной зоной
    shape = форма Возможные значения:
    circle (окружность — задается координатами центра и радиусом в пикселах)
    rectangle (прямоугольник — задается координатами левого верхнего и правого нижнего угла)
    polygon (многоугольник — задается координатами своих вершин)
    noref Иногда бывает нужно указать, что данная зона (заданная атрибутом SHAPE и координатами COORDS) не является активной, реакции на щелчок мыши нет
    alt Альтернативный текст; «всплывает» при наведении курсора мыши на данную зону изображения
    id, style, class, title, onClick, onDblClick, onKeyDown, onKeyPress, onKeyUp, onMouseDown, onMouseMove, onMouseOut, onMouseOver, onMouseUp, dir, lang необязательные атрибуты, описаны в разделе «Концепции HTML 4+».

    Пусть, например, у нас есть изображение russia.gif размера 360х196 пиксел и три HTML-документа, на которые надо организовать гиперссылки : peterburg.htm, moscow.htm и yakutsk.htm .

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

    Центры кружков, если принять за точку отсчета (0,0) левый верхний угол изображения, находятся примерно на уровне
    (48,84) — Москва
    (49,60) — Санкт-Петербург
    (256,93) — Якутск.

    Логично в данном случае выбрать окружность в качестве формы активной зоны. Приняв, например, радиус этой окружности равным 9 пикселам (с избытком), реализовать гиперссылки можно с помощью следующего HTML-кода:

    Изучив HTML-код, проверьте, как работает карта-изображение в нашем примере. Чтобы было удобнее, целевые документы выводятся в новых маленьких окнах.

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

    Определение карты-изображения

    Изображения на веб-странице можно использовать в качестве гиперссылок, для этого нужно поместить тег между открывающим и закрывающим тегами гиперссылки. В результате при клике по любой области данного изображения пользователь перейдет по адресу, указанному в атрибуте href элемента ‘a’. Однако иногда возникает потребность в том, чтобы различные области (части) одного и того же изображения являлись отдельными гиперссылками, ведущими в совершенно разные места. В этом случае приходится использовать карту-изображение, которое как раз и позволяет хранить в себе сразу несколько гиперссылок.

    (от англ. image map) – это изображение, содержащее специальные активные зоны, являющиеся гиперссылками.

    Атрибуты ismap и usemap

    Карты-изображения применяются в двух вариантах: и , которые задаются, соответственно, атрибутами ismap и usemap элемента ‘img’ . Первый атрибут является логическим и не принимает значений, являясь индикатором, а второй – в качестве значения принимает имя специального элемента ‘map’ , перед которым ставится знак решетки. Рассмотрим эти два вида графических карт подробнее.

    Серверные карты-изображения

    Серверные карты-изображения строятся следующим образом: создается элемент ‘a’ , атрибут href которого указывает адрес программы-обработчика, расположенной на сервере, затем внутри гиперссылки ‘a’ располагается элемент ‘img’ , у которого указывается атрибут ismap . При нажатии по какой-либо активной зоне такого изображения, на сервер будут переданы координаты x и y щелчка мыши, которые отсчитываются от верхнего левого угла изображения. Координаты отправляются на сервер методом GET , т.е. передаются вместе с адресом серверной программы-обработчика, указанного в атрибуте href гиперссылки, непосредственно в самом адресе и перечисляются через запятую после знака вопроса. На сервере программа-обработчик принимает координаты и решает, какой документ необходимо отправить в ответ. Рассмотрим конкретный код, показанный в примере №1. Отображение соответствующей страницы в браузере показано на рис. №2.

    Пример №1. Формирование серверной карты-изображения

    Рис. №2. Отображение страницы с использованием серверной карты-изображения браузером

    Если мы кликнем, например, по прямоугольнику, на сервер будут переданы координаты x и y клика. Программа проверит в какой диапазон попадают данные координаты и после проверки вернет нам веб-страницу с описанием свойств прямоугольника.

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

    Клиентские карты-изображения, наоборот, располагаются полностью на компьютере пользователя и строятся с использованием элементов ‘map’ и ‘area’ . Элемент ‘map’ формируется парным тегом (от англ. map – карта). Он связывается с картой-изображением через свой атрибут name . Значение данного атрибута должно совпадать со значением атрибута usemap (знак решетки при этом нужно опускать) соответствующего элемента ‘img’ , выступающего в роли клиентской карты-изображения. Кроме того, элемент ‘map’ является контейнером для хранения элементов ‘area’ , каждый из которых определяет активную область карты-изображения и превращает их в гиперссылки. Формируется элемент ‘area’ при помощи одиночного тега (от англ. area – область, регион), т.е. является пустым элементом (см. пример №3).

    Пример №3. Формирование клиентской карты-изображения

    Поскольку элемент ‘area’ служит для создания гиперссылок, то он обладает всеми атрибутами элемента ‘a’ : href , target , download , rel , hreflang , type (смотреть). Кроме того, он связан с изображением и служит для определения его активных зон, поэтому обладает еще и дополнительными атрибутами: alt , shape и coords (от англ. coordinates).

    Атрибут alt задает альтернативный текст для данной активной зоны изображения.

    Атрибут shape определяет форму данной активной зоны изображения, а coords задает для нее координаты в пикселях, которые отсчитываются от верхнего левого угла изображения, где считается, что x=0px и y=0px . В качестве значений shape принимает:

    • «circle» – область в виде окружности; через запятую указываются координаты x и y центра окружности, а также ее радиус, например, coords=»150, 200, 120″ ;
    • «default» – вся область изображения;
    • «poly» (от англ. polygon) – область в виде произвольного многоугольника; через запятую указываются координаты x , y его вершин, начиная с любой и заканчивая обход в стартовой точке, например, coords=»50,70, 64,82, 85,82, 130,60, 50,70″ ;
    • «rect» (от англ. rectangle) – область в виде прямоугольника; через запятую указываются координаты x , y левого верхнего и правого нижнего углов, например, coords=»50,70, 154,213″ .

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

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

    Еще один пример карты-изображения можно посмотреть на соответствующей странице нашего учебного сайта №1.

    High Star

    Уроки веб-мастеру

    Как самому с нуля сделать сайт? Здесь даны основы сайтостроения, которых еще никто не отменял. Как пользоваться такими программами, как PhotoShop, ImageReady и другими. Полезные советы вебмастерам.

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

    Adobe Photoshop

    Мы уже с вами умеем делать ссылки. Ссылками могут быть и просто какой-то текст, при нажатии на который мы можем попасть на другую страничку. Ссылкой может быть и рисунок и анимированый gif. Это все мы знаем и вроде что тут еще рассусоливать? Однако вспомните, как порою сложно разместить эту ссылку в нужном месте страницы. Например, мы хотим разместить на главной странице нашего сайта несколько изображений-ссылок, причем в определенном месте! До этого урока у нас был бы всего лишь один выход для этого — сделать таблицу, и в какой-то ячейке поместить наш рисунок.

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

    Короче, вы уже наверняка догадались, что все это можно сделать с помощью Image Map (Карты Изображений).

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

    Да, это не смешно. Я вижу, как у вас опускаются уголки рта, тяжко склоняется голова на грудь и валятся обессиленно руки с клавы. Но. Проснись и пой мой читатель! Потому что я не буду объяснять всю эту галиматью. Потому что есть еще другой тип! клиентский. Вот этим клиентским типом мы и займемся. Не обещаю, что уложимся в один урок. Так что запаситесь терпеньем!

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

    И сделаем их кнопками – ссылками. Предположим, при нажатии на книжку мы попадаем на страничку book.html, при нажатии на кнопку-шкатулку попадаем прямиком на страничку shkatulka.html, ну и при нажатии на пепельницу попадаем на страничку, рассказывающую о вреде курения – nosmok.html.

    Скажу вам сразу, я специально взяла такие формы. Дело в том, что можно описать Shape (Формы) только трех видов: RECT (Прямоугольник), CIRCLE (Круг) и POLY (Многоугольник).

    Каждая форма описывается координатами X и Y, отсчет начинается с левого верхнего угла. Для RECT (Прямоугольника) достаточно всего двух точек координат — координаты X,Y верхнего левого угла и координаты правого нижнего угла. Для CIRCLE (окружности) хватает координаты центра окружности X,Y и величины радиуса R, а вот для сложной фигуры нужно задать координаты всех точек замкнутой ломаной. Если сложная фигура имеет плавные изгибы, ничего страшного! Можно ее обвести ломаными кривыми. Только хочу заметить, чем меньше будет этих ломаных, тем быстрее ваше творение загрузится. Так что особо не усердствуйте и не стремитесь к бесконечности.

    Открыв в Adobe Photoshop панель Info, кто не знает, тот нажимает Window | Info (Окно | Инфо) и, елозя мышкой от начала координат к нужным точкам, запоминаю сколько у меня там этих пикселов получилось.

    Если вам это непонятно, не переживайте, ниже мы это проделаем в нашей программе Image Ready.

    Итак, вот эти точки и вот эти координаты:

    Координаты каждой точки

    Приступим к самому главному. Начнем прописывать эти точки и все остальное в тегах. Пишем:

    Думаю тут нечего сложного для восприятия нет. Я загрузила свою картинку myris.jpg, указала, ширину 500 и высоту 355. А дальше присвоила имя этой карты, назвав ее mykarta. Обратите внимание, что перед именем я поставила решетку #. В следующей строчке указываю, что это рисунок не просто рисунок, а карта MAP и что карта эта привязана к mykarta. И тут уже решетка не нужна. Едем дальше. Сначала определяем область квадратной кнопки:

    Объясняю: определяемая область AREA SHAPE – Rect (Прямоугольник), значит для нее берем координаты левого верхнего угла (X=39 Y=33) и правого нижнего угла (X=173, y=259). TITLE — всплывающая подсказка, HREF=». « — сценарий, который выполняется при нажатии кнопки. В принципе, я могла написать просто какой-то адрес, например такой HREF=»http://www.dikarka.ru”, и тогда при нажатии этой кнопки вы попали бы на мою страничку. Но я — человек скромный, а потому решила ограничиться приветствием. Можно было бы еще заставить кнопку проигрывать музыку. но это мы еще с вами не проходили, так что обойдемся без музыкального туша.

    Далее опишем область воздействия на круглую кнопку-шкатулку. Как видим, радиус этого круга равен R=50 пикселам, а координаты центра окружности: X=274 и Y=112. Определяемой областью тут является Circle (Круг), а потому вы даже и без меня догадаетесь как нужно написать.

    Едем дальше. У нас осталась незадействованной третья кнопка-пепельница. К каждой точке мы у же определили координаты, так что нам осталось только указать тип AREA SHAPE обозначить как Poly (Многоугольник) и выставить по очереди координаты. Ну, и на этой стрелке моя скромность закончилась и я написала, что при нажатии на эту ссыл-ку вы попадете на мою начальную страничку сайта www.dikarka.ru Вот как это выглядит:

    Ну, и закончи все это закрывающимся тегом

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

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

    Карты изображений в Image Ready

    Опять возвращаемся в программу Image Ready. Надеюсь, вы уже подготовили рисунок, который мы украсим ссылками на другие странички? Работать будем с тем же изображением, как и в предыдущем уроке.

    1. Вызываем панель Image Map (Карта Изображений) — Window | Image Map (Окно | Карта Изображений).
    2. На вертикальной панели инструментов выбираем Rectangle Image Map Tool
    3. Удерживая мышку нажатой в левом верхнем углу нашего первого предмета – прямоугольной книжки, перетаскиваем ее к нижнему правому углу книжки. Теперь можно отпустить мышку и немного передохнуть. Мы увидим, что вокруг мышки образовалась замкнутая кривая с точками по углам и по центру каждой прямой, которые можно перемещать, чтобы подредактировать положение.

    Теперь можно перейти ко вкладке Image Map и заполнить окошечки. Я, например, решила Name (Имя) оставить по умолчанию — ImageMap_01, URL – адрес странички, которая загрузится после нажатия книжки-ссылки, Target – выбираем окно, в которое загрузится наш документ (я выбрала _blank – в новое окно) и, наконец, в окошке Alt – всплывающая подсказка, я написала “все о книгах”

    Работа над прямоугольным объектом

    В окошке Dimension (размеры) можете полюбоваться на уже готовые координаты!

    Но и это не все! Нам же с вами лень код писать, пускай программа сама напишет, раз уж мы сюда залезли.

    1. Выполняем File | Preview in (Файл | Предварительный Просмотр В) и в открывающемся диалоге выбираем браузер для просмотра, нажимаем ОК и о чудо! Открывается браузер, в котором наша картинка, вся информация о ней, а также весь написанный код!
    2. Наводим мышкой на книжку, убеждаемся, что появляется всплывающая подсказка «все о книгах», нажимаем, убеждаемся, что ссылка работает и все! Нам остается только сдуть нужный нам код и поместить его на свою страничку.

    Точно также обрабатываем оставшиеся ссылки – круглую шкатулку и многоугольную пепельницу. Только в этих случаях выбираем соответственно Circle Image Map Tool – для круглой ссылки, либо Polygon Image Map Tool – для многоугольной ссылки. Вот порядок действий для круглой ссылки-пепельницы:

    1. Установите указатель мыши слева от окружности.
    2. Нажмите и удерживайте левую кнопку мыши.
    3. Не отпуская левую кнопку мыши, перемещайте мышь к правому нижнему концу ок-ружности.
    4. Отпустите левую кнопку мыши. Вокруг шкатулки появится замкнутая кривая

    А вот для многоугольника-пепельницы:

    1. Щелкните мышкой около любого угла пепельницы с внешней стороны. За мышкой потянулась прямая.
    2. Щелкните мышкой около следующего угла пепельницы. Прямая зафиксировалась в этой точке и дальше тянется за мышкой.
    3. Обойдите с мышкой вокруг пепельницы, фиксируя нажимами все выступающие точки.
    4. Закончите свой путь над первой точкой, появится значок – крестик с кружочком, подтверждающая, что ломаная замкнулась, щелкните по первой точке, линия окра-сится в красный цвет.

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

    Понравилась статья? Поделиться с друзьями:
    Кодинг, CSS и SQL