THE BELL

Есть те, кто прочитали эту новость раньше вас.
Подпишитесь, чтобы получать статьи свежими.
Email
Имя
Фамилия
Как вы хотите читать The Bell
Без спама

Рассмотрим пример как выглядит карта изображений в html:

При наведении курсора мышкой на области зеленого прямоугольника видно, что она является ссылкой на "#green_link " (метка выбрана для примера, можно сделать ссылку на любую страницу в интернете). У красного квадрата на "#red_link ", а у синего круга соответственно на "#blue_link ".

Код этого примера:

img/primer-kartu-izobrazheniy-1.jpg ">

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

Описание примера

1. Необходимо создать связку изображения и карты . В изображении нужно сослаться на карту с помощью атрибута usemap="#primer1" . А ниже нужно описать код карты.

При создании карты ссылок атрибут usemap является обязательным для тега img.

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

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

Примечание

Области могут перекрывать друг друга. В этом случае ссылка будет вести на тот объект, что описан последним.

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

1. Атрибут shape="тип_объекта" - задает тип объекта. Может принимать следующие значения:

  • circle - круг;
  • rect - прямоугольник;
  • poly - многоугольник;

2. Атрибут coords="значения_координат" - определяет геометрическое расположение объекта и его размеры.

Точкой отчета изображения является верхний левый угол. Т.е. если вы указали отступ 10 по высоте, то это означает 10 пикселей вниз.

В зависимости от типа объекта нужно задавать значения координат в разных форматах. Все значения указывается в пикселях (пометку px писать не нужно).

  • Для типа circle: coords = (x,y,r) , где x,y координаты центра круга, а r - радиус круга;
  • Для типа rect: coords = (x1,y1,x2,y2) , где x1,y1 координаты левой верхней точки прямоугольника, x2,y2 - координаты нижний правой точки прямоугольника;
  • Для типа poly: coords = (x1,y1,x2,y2,...,xn,yn) , последовательно указываются координаты x,y каждой точки многоугольника;

3. Атрибут href="адрес_перехода" - задает ссылка для перехода (аналогично ). Помимо адреса перехода можно использовать функции JavaScript для выполнения какого-то действия.

4. Атрибут target="значение" - аналогично тегу определяет действие перехода по ссылке. Может принимать значения:

  • _blank - открывает страницу в новом окне
  • _self - загружает страницу в текущее окно
  • _parent - загружает страницу во фрейм-родитель
  • _top - отменяет все фреймы и загружает страницу в полном окне браузера

5. Атрибут title="подсказка" - выводит всплывающую подсказку. можно также сделать более красивую всплывающую подсказку: как сделать красивую всплывающую подсказку для ссылки »

6. Атрибут nohref - делает область неактивной. Используется при перекрытии объектов. Используется довольно редко, но иногда это может стать незаменимым решением. Например можно сделать маленький круг внутри большого круга неактивным.

Обязательно область nohref должна идти первой.

Пример кода:

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

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

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

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

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

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

1. Координаты

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

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

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

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

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

2. HTML-код

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

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

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

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

теги карты

теги областей

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

  • width=«640» height=«367» — размеры изображения
  • src="https://сайт/f02c73a3cd94.jpg" — адрес изображения на сайте
  • usemap="#picture" — условное наименование изображения-карты (может быть любое)
  • map name=«picture» — имя карты (полностью соответствует указанному выше)

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

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

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

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

  • href="https://сайт/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://сайт/showjournal.php?journalid=2447247&keywordid=929323" — адрес страницы постов из раздела «Уроки Photoshop»
  • shape="circle" — обозначение формы «круг»
  • coords="551,198,65" — координаты круга: центр — точка Q (551,198) и радиус — R=65

3. Финиш

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

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

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

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

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

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

В итоге в прошлом видео мы сделали картинку-ссылку . А затем из изображения сделали серверную карту изображения, которая поможет нам в определении координат активных областей.

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

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

HTML-тег map.

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

Данный тег имеет обязательный атрибут name . В котором мы должны указать имя нашей карты изображения. Кроме того стоит отметить что этот тег не является блочным элементом, а значит необходимо его прописывать внутри блочного элемента, например тега абзаца или универсального тега div .

HTML-тег area.

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

Здесь также хочу упомянуть о том, о чем забыл сказать в видео уроке, что этот тег легко заменяется тегом для указания гиперссылок в HTML-документе . То есть тегом . Если Вы помните, то именно у тега есть точно такие же атрибуты shape и coords , которые предназначены именно для указания базовой фигуры и ее координат.

Определение координат квадрата, прямоугольника, круга и многоугольника.

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

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

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

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

Видео урок: Создание карты избражения в HTML.

HTML-справочник и другие материалы можно и нужно скачать !

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

В 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 » и пропишите его в теге через атрибут name .

Теперь свяжем карту с картинкой. Для этого используем атрибут 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.

Карта изображения в HTML (навигационные карты). Урок №11

Теперь смотрите на результат. Нажмите на круг №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.

Карта изображения в HTML (навигационные карты). Урок №11

Теперь смотрите на результат. Нажмите на многоугольник №1 и на многоугольник №2:

Возможность комбинирования

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

Дополнение с использованием TITLE

Для каждой области можно прописать подсказки, используя атрибут title.

Карта изображения в HTML (навигационные карты). Урок №11

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

Вот и все. С картой изображения в HTML (навигационная карта) мы разобрались.

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

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

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

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

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

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

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


Нашу карту надо подключить к нашей картинке, для этого в тег надо добавить параметр usemap , в качестве значения которого выступает имя нашей карты после значка # (решетки):
Для описания конкретных областей внутри тегов используются теги . Этот тег имеет следующие параметры:
  • shape - определяет форму области, может принимать следующие значения:
    • rect - область в виде прямоугольника,
    • circle - область в виде круга,
    • poly - область в виде многоугольника,
    • default - вся область.
  • cootds - задает координаты отдельной области:
    • для rect задаются координаты верхнего левого и правого нижнего углов прямоугольника,
    • для circle задаются координаты центра круга и радиус,
    • для poly задаются координаты вершин многоугольника в нужном порядке.
  • href - определяет адрес ссылки.
  • target - применяется при использовании фреймов и указывает фрейм в который нужно загрузить страницу.
  • alt - задает альтернативный текст для области.
У нас три области, значит будет три тега : первый - прямоугольная область вокруг пылесоса, второй - прямоугольная область вокруг стиральной машины, третья - вокруг холодильника.
Теперь надо определиться с координатами этих областей. На самом деле это самый трудоемкий процесс. В нашем примере мы решили, что области будут прямоугольными и значительно облегчили себе задачу, а представьте, сколько точек нужно задать, например, для обвода страны на карте. Тем не менее, нам надо задать координаты верхнего левого и правого нижнего углов трех прямоугольников.

Для этих целей обычно используется какая-нибудь программа, например, Image Ready, которая имеет специальный инструмент для обводки областей и автоматически строит описания этих областей. Рассмотрение работы этих программ не входит в курс HTML, поэтому здесь мы зададим координаты "на глаз". Посмотрите еще раз на наше изображение:

Ширина нашей картинки 738 пикселов, а высота - 192 пиксела. Проведем линии по границам наших областей и примерно определим координаты. Теперь мы готовы добавить эти параметры в наши теги .


Результат:

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

На этом наши уроки подошли к концу. Вы ознакомились со всеми возможностями языка HTML. Для закрепления навыков ознакомьтесь с двумя уроками Делаем сайт - табличная верстка .

Напоследок, надо сказать, что в HTML есть еще два замечательных элемента - теги

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

THE BELL

Есть те, кто прочитали эту новость раньше вас.
Подпишитесь, чтобы получать статьи свежими.
Email
Имя
Фамилия
Как вы хотите читать The Bell
Без спама