Как найти координаты на сайте - AvtoShod.ru - решение различных проблем

Я например хочу обхватить блоком верх страницы, но не знаю как получить необходимые мне координаты. Как их определяете вы?

Вопрос задан

более трёх лет назад
1597 просмотров

Пригласить эксперта

при помощи html или css координаты вычислить невозможно т.к. это язык разметки, а не язык программирования. При помощи javascript или jquery например
height() — высота элемента без учета отступов и толщины рамки.
innerHeight() — высота элемента с учетом размера внутренних отступов (padding).
outerHeight(includeMargin) — высота элемента с учетом внутренних отступов, рамки (border-width) и при необходимости внешних отступов

Показать ещё
Загружается…

26 мая 2023, в 12:06

2000 руб./за проект

26 мая 2023, в 11:53

350000 руб./за проект

26 мая 2023, в 11:52

2000 руб./за проект

Минуточку внимания

Источник

Вот код с javascript.ru собраный до кучи.

function getOffset(elem) {
        if (elem.getBoundingClientRect) {
        var box = elem.getBoundingClientRect();
        var body = document.body;
        var docElem = document.documentElement;
        var scrollTop = window.pageYOffset || docElem.scrollTop || body.scrollTop;
        var scrollLeft = window.pageXOffset || docElem.scrollLeft || body.scrollLeft;
        var clientTop = docElem.clientTop || body.clientTop || 0;
        var clientLeft = docElem.clientLeft || body.clientLeft || 0;
        return { top: Math.round(box.top +  scrollTop - clientTop), left: Math.round(box.left + scrollLeft - clientLeft) }      
        } else {
             var top=0, left=0
        while(elem) {
            top = top + parseFloat(elem.offsetTop);
            left = left + parseFloat(elem.offsetLeft);
            elem = elem.offsetParent ;
           }
           return {top: top, left: left};
           }
    }

Немного комментариев:
ф-ция getBoundingClientRect вызвала спор, mozilla цитата

Возвращаемое значение getBoundingClientRect — это объект TextRectangle, содержащий свойства
только для чтения left, top, right и bottom, описывающие бокс с
границами в пиксельном измерении. Значения top и left даются
относительно верхнего левого угла порта просмотра.

т.е. уже с учётом скролла и отступов документа, которые приходится вычитать если нужны координаты относительно начала системы координат листа (левый верхний угол документа). Даная функция getBoundingClientRect даст верный результат, если выполняется два условия: 1) позиция скроллинга ноль (на старте часто так), 2) если у документа (body) отступы не заданы, или заданы в ноль. Так как эти условия не всегда соблюдены — приходится использывать более сложные решения.

От себя добавлю, что если используется система отчёта position=fixed то getBoundingClientRect выдаст координаты которые подойдут к этой системе отчёта, но fixed редко используется, поскольку при изменении позиции скрола — позиция на экране сохраняется и елемент будет «плавать». А для absolute и static прийдётся делать пересчёт коодинат. Система relative — просто относительные координаты, в отдельных случаях её можно использовать.

Источник

2 / 3 / 0

Регистрация: 19.02.2010

Сообщений: 58

Как узнать координаты

11.07.2010, 13:37. Показов 43679. Ответов 17

Есть такой вот рисунок, нужно узнать координаты в этом рисунке 2 прямоугольников. Мне именно нужно узнать как на компе это измерить и если это делается через какую то прогу то через какую. Заранее спасибо.

Комментарий модератора

Прикрепляйте изображения к сообщению.

Изображения

2378 / 941 / 129

Регистрация: 25.04.2009

Сообщений: 2,635

Записей в блоге: 4

11.07.2010, 13:39

Даже в paint внизу координаты мышки показываются.

3 / 3 / 0

Регистрация: 03.07.2010

Сообщений: 30

11.07.2010, 14:04

или просто в фотошопе,там линейка есть,там как по мне намного удобнее

2378 / 941 / 129

Регистрация: 25.04.2009

Сообщений: 2,635

Записей в блоге: 4

11.07.2010, 16:24

Как я понял, Вам для map нужны координаты.
Есть специальные онлайн сервисы. Поищите в гугле.

БТР — мой друг

333 / 277 / 47

Регистрация: 07.01.2010

Сообщений: 1,932

11.07.2010, 19:27

Не понял задачи.

2 / 3 / 0

Регистрация: 19.02.2010

Сообщений: 58

11.07.2010, 21:30

[ТС]

Dimedrol да для map, а нельзя ли через фотошоп или дримвиевер узнать и если можно то поподробнее как.

3 / 3 / 0

Регистрация: 03.07.2010

Сообщений: 30

11.07.2010, 22:38

нажми Ctrl+R? появится линейка, на циферках нажми правой кнопкой и выбери пикселы, наводиш ПРИЦЕЛ(забыл как называется) на нужную тебе точку, и смотриш координаты слева и сверху. Все. А, забыл сказать что это в фотошопе

БТР — мой друг

333 / 277 / 47

Регистрация: 07.01.2010

Сообщений: 1,932

12.07.2010, 05:55

В Paint.NET’e к примеру они снизу написаны.

2 / 3 / 0

Регистрация: 19.02.2010

Сообщений: 58

12.07.2010, 18:41

[ТС]

Cepera_mail сделал как вы сказали, но выводит совсем неправильно. Вот правильные координаты у прямоугольника №1 координаты такие: x1=25, y1=36, x2=114, y2=98 . Так вот незнаю как самому их найти.

3 / 3 / 0

Регистрация: 03.07.2010

Сообщений: 30

12.07.2010, 18:49

а выставил линейку в пикселах?

3 / 3 / 0

Регистрация: 03.07.2010

Сообщений: 30

12.07.2010, 19:03

вот, все работает…..

Изображения

2 / 3 / 0

Регистрация: 19.02.2010

Сообщений: 58

13.07.2010, 13:40

[ТС]

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

Миниатюры

2 / 3 / 0

Регистрация: 19.02.2010

Сообщений: 58

13.07.2010, 13:41

[ТС]

Так y1=36 такое там не выхожит на прямоугольнике N1

3 / 3 / 0

Регистрация: 03.07.2010

Сообщений: 30

13.07.2010, 16:17

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

#define книжный_червь Я

185 / 96 / 21

Регистрация: 30.01.2010

Сообщений: 780

13.07.2010, 17:27

Правой кнопкой мыши нажимаешь на фото, дальше нажимаешь на свойство. Нам написано сколько на сколько. Я если ты хочешь сделать карту на фото, возьми paint, нажми «выделить» и выдели ту часть которая тебе нужна. Внизу напишут координаты.

Добавлено через 1 минуту
skryptman, а в фотошопе я ничего не понимаю.)))) Paint самый простой!)))

2 / 3 / 0

Регистрация: 19.02.2010

Сообщений: 58

13.07.2010, 20:35

[ТС]

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

БТР — мой друг

333 / 277 / 47

Регистрация: 07.01.2010

Сообщений: 1,932

14.07.2010, 07:03

Не по теме:

[акер;855295]Skryptman, а в фотошопе я ничего не понимаю.)))) Paint самый простой!)))

Я тоже!

Сообщение от skryptman

Жесть способ. Лучше с помощью Paint.NET’a.

2 / 3 / 0

Регистрация: 19.02.2010

Сообщений: 58

14.07.2010, 11:22

[ТС]

Конечно способ не самый лучший, но все же работает.

Источник

Координаты элемента на странице

Попытка 1. Суммируем offset’ы
Попытка 2: getBoundingClientRect
Демо улучшенного варианта
Комбинированный вариант
Резюме

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

Эта статья — о том, как вычислять координаты не только кросс-браузерно, но и правильно. Да, и еще — быстро.

Попытка 1. Суммируем offset’ы

Логика этого подхода довольно проста.

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

В качестве offsetParent обычно выступает родитель parentNode. Но это не всегда так.

Например, для элемента с position='absolute' родителем по позиционированию является ближайший позиционированный родитель, то есть первый элемент в цепочке вложенности, у которого свойство position — одно из: absolute, relative или fixed(не поддерживается IE<7).

Наиболее подробно это описано в стандарте CSS: containing block details. Этот самый «containing block» — как раз и определяет offsetParent, от которого отсчитывается позиция элемента.

Как браузер находит elem.offsetParent

Двигаемся вверх по цепочке родителей elem, останавливаясь на следующих элементах, которые являются offsetParent:

<body>
элемент, у которого position — не static(значение по умолчанию)
элементы table,th,td — если elem.position='static'

У элемента <body> никогда нет offsetParent.

В IE 7+/Opera у элементов с elem.position='fixed' нет offsetParent.

Сдвиг относительно offsetParent‘а задается свойствами offsetTop/offsetLeft:

Остается пройтись по всем offsetParent и просуммировать сдвиги. Последним offsetParent обычно является body:

function getOffsetSum(elem) {
    var top=0, left=0
    while(elem) {
        top = top + parseFloat(elem.offsetTop)
        left = left + parseFloat(elem.offsetLeft)
        elem = elem.offsetParent        
    }
    
    return {top: Math.round(top), left: Math.round(left)}
}

Основных проблем с этим кодом две.

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

Вместо того, чтобы писать длинный кроссбраузерный код с разбором багов, который уж точно везде работает корректно, рассмотрим альтернативное решение, которое мало того что соответствует стандарту — его отлично поддерживают Internet Explorer 6+, Firefox 3+ и Opera 9.62+.

Попытка 2: `getBoundingClientRect`

Этот малоизвестный метод по стандарту должен быть у каждого элемента DOM.

На момент написания статьи он реализован в SVN у Webkit. Для нас это значит, что Chrome и Safari с его поддержкой будут готовы уже скоро.

Он возвращает прямоугольник, ограничивающий элемент.

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

Координаты элемента на странице — это левый-верхний угол прямоугольника + прокрутка страницы.

Код обработчика onclick:

var br=this.getBoundingClientRect()
alert("Top:"+br.top+", Left:"+br.left+", Right:"+br.right+", Bottom:"+br.bottom)

Как работает getBoundingClientRect() ?

По стандарту CSS любое содержимое находится внутри некоторого прямоугольника: css box.

В случае с блочными элементами, например DIV — этим прямоугольником яляется сам элемент. Такой прямоугольник называют block box.
Если элемент строчный, например, длинный текст — он уже может быть не такой простой формы, а требует для отображения нескольких прямоугольников anonymous box. Обо всем этом подробно об этом написано в стандарте: http://www.w3.org/TR/CSS21/visuren.html#anonymous-block-level».

Так что содержание элемента DOM может находится как в одном, так и в нескольких прямоугольниках css box.

Можно получить список всех прямоугольников, соответствующих elem, вызовом elem.getClientRects(). Здесь IE<8 может сделать свои прямоугольники, не соответствующие стандарту, но они для нас не играют роли, так как метод getClientRects() нам не нужен.

Метод elem.getBoundingClientRect() возвращает один (минимальный) прямоугольник, который включает в себя все прямоугольники getClientRects() с содержимым элемента.

На основе метода elem.getBoundingClientRect() мы можем сделать новый вариант функции:

function getOffsetRect(elem) {
    // (1)
    var box = elem.getBoundingClientRect()
    
    // (2)
    var body = document.body
    var docElem = document.documentElement
    
    // (3)
    var scrollTop = window.pageYOffset || docElem.scrollTop || body.scrollTop
    var scrollLeft = window.pageXOffset || docElem.scrollLeft || body.scrollLeft
    
    // (4)
    var clientTop = docElem.clientTop || body.clientTop || 0
    var clientLeft = docElem.clientLeft || body.clientLeft || 0
    
    // (5)
    var top  = box.top +  scrollTop - clientTop
    var left = box.left + scrollLeft - clientLeft
    
    return { top: Math.round(top), left: Math.round(left) }
}

Получить ограничивающий прямоугольник для элемента.
Задать две переменных для удобства
Вычислить прокрутку документа. Все браузеры, кроме IE, поддерживают pageXOffset/pageYOffset, а в IE, при наличии DOCTYPE прокрутка вычисляется либо на documentElement(<html>), иначе на body — что есть то и берем
Документ(html или body) бывает сдвинут относительно окна (IE). Получаем этот сдвиг.
Прибавляем к координатам относительно окна прокрутку и вычитаем сдвиг html/body, чтобы получить координаты относительно документа

Для Firefox дополнительно мы округляем координаты вызовом Math.round().

Демо улучшенного варианта

На демо находятся 3 вложенных DIV‘а. Все они с border, некоторые с position/margin/padding.

Клик на внутреннем отображает значения getOffsetSum/getOffsetRect, а также показывает координаты курсора на момент клика: event.pageX/pageY.

Координаты выводятся сразу под DIV‘ами.

На момент написания статьи демо работает в IE6+,Firefox 3+ и Opera 9.62+.

Сравнить getOffsetSum и getOffsetRect

getOffsetSum:значение getOffsetSum()

getOffsetRect:значение getOffsetRect()

event:координаты клика мышью относительно документа

Обратите внимание: результаты getOffsetSum(elem) и getOffsetRect(elem) не во всех браузерах совпадают.

Чтобы увидеть, какой вариант правильный — кликните на самой верхней-левой точке элемента (на самом верхнем-левом уголке черной рамки).

Тогда в pageX/pageY события появятся реальные значения угла элемента, и вы сможете их сравнить с getOffsetSum/getOffsetRect. Именно для такого сравнения в демо и добавлен вывод event.

Комбинированный вариант

Что делать, если метод getBoundingClientRect не поддерживается?

С одной стороны, мы могли бы рассмотреть корректную кросс-браузерную реализацию для FF2/Safari/Chrome/Konqueror. Она включает в себя много кода для обхода браузерных багов при подсчетах, которые нам совсем не интересны.

С другой — FF2 давно умер, а движок Safari/Chrome содержит поддержку getBoundingClientRect в SVN, и значит она скоро будет в релизе.
Думаю, и такие явные аутсайдеры как Konqueror подсуетятся, т.к движок Konqueror — по сути такой же, как и Safari.

Поэтому предлагаю использовать:

function getOffset(elem) {
    if (elem.getBoundingClientRect) {
        // "правильный" вариант
        return getOffsetRect(elem)
    } else {
        // пусть работает хоть как-то
        return getOffsetSum(elem)
    }
}

Скачать полный финальный вариант.

Резюме

Вы узнали, как вычислять координаты элемента на странице: быстро и точно в IE6+/FF3+/Opera 9.62+, и как-то чтоб работало — в Safari/Chrome/Konqueror.

Скоро и в Safari/Chrome/Konqueror будет поддержка правильного метода, поэтому аутсайдерами останутся лишь совсем редкие и багливые браузеры, и все будет работать ок .

Источник

Устанавливает координаты области, она также называется «горячая область». Такая область может быть ссылкой на файл или связана с действием, определяемым скриптом.

Значения координат представляют собой набор чисел, разделённых запятыми. Если две области перекрываются между собой, приоритет имеет та, которая определена в коде HTML выше.

Синтаксис

Значения

Набор координат определяется формой «горячей области», которая задается атрибутом shape. Отсчёт координат обычно ведётся от левого верхнего угла изображения и указывается в пикселях.

Для прямоугольника ( shape=»rect» ) определяется четыре координаты — X₁, Y₁, X₂, Y₂, как показано на рис. 1.

Рис. 1. Координаты для прямоугольника

Для окружности ( shape=»circle» ) определяется три координаты — координаты центра окружности (X, Y) и ее радиус (R), как показано на рис. 2.

Рис. 2. Координаты для окружности

Для полигона (многоугольника) ( shape=»poly» ) последовательно указываются координаты каждой вершины (X₁, Y₁, X₂, Y₂, :), как показано на рис. 3.

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

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

Тег <map> используется для определения изображения-карты. Изображение-карта представляет собой изображение с определённой активной областью. Элемент <map> содержит ряд <area> тегов, которые определяют интерактивные области в изображении-карте, т.е. при клике на определённую область изображения происходят определённые действия, например, открывается отдельная страница с описанием данного участка изображения.

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

Атрибутами тега <area> мы указываем как координаты области (атрибут coords ), так и тип необходимой нам фигуры (атрибут shape ):

Значение атрибута	Определение
default	Весь регион.
rect	Прямоугольная область (x1,y1,x2,y2).
circle	Круглая область (x,y,r- радиус).
poly	Многоугольную область (x1,y1,x2,y2. xn,yn).

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

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

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

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

Разместили изображение (тег <img>), которое мы в последствии будем использовать при составлении изображении-карты. В атрибуте usemap необходимо обязательно указать имя изображения-карты, которое мы будем использовать в элементе <map> (необходимо обязательно перед именем указать решетку).
Размещаем изображение-карту (тег <map>), задаем единственный и обязательный атрибут элемента name (имя). Обратите внимание, что в отличие от тега <img> мы задаем имя без решетки, в остальном они должны совпадать.
Размещаем четыре тега <area>, которые определяют интерактивные области в изображении-карте:
- Первой мы задаем прямоугольную область (атрибут shape со значением «rect» ), она соответствует нашему первому изображению (первые два значения соответствуют верхнему левому углу, следующие два значения определяют правый верхний и нижний угол).
- Второй указываем круглую область (атрибут shape со значением «circle» ), она соответствует нашему второму изображению (первое значение соответствует координатам по оси x, а второе по оси y, третее определяет радиус).
- Что касается третей и четвертой фигуры, то они составлены по принципу многоугольной области (атрибут shape со значением «poly» ). Вы определяете необходимое количество точек на изображении, высчитываете координаты этих точек (графический редактор) и указываете в таком порядке, чтобы браузер их мог соединить одной линией. На примере треугольника (третий рисунок): первая точка (координаты x и y вершины), вторая точка (координаты x и y левого нижнего угла) и третяя точка (координаты x и y правого нижнего угла).
Обращаю Ваше внимание на то, что если у тега <area> используется атрибут href , который определяет гиперссылку на площади, то необходимо обязательно указывать атрибут alt (альтернативный текст для области).

В HTML5, если у элемента <map> указан глобальный атрибут id, то он должен иметь то же значение, что и атрибут name .

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

Рис. 49 Пример построения изображения-карты в HTML.

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

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

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

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

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

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

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

Не бойтесь, это вовсе не сложно. Самое главное – понять теорию и закрепить практикой.

Ну что, приступим к теории.

Карты изображения (навигационные карты) задаются тегом <map></map> .
Тег <map></map> — это коробка, внутри которой размещают теги <area> .
Тег <area> предназначен для определения геометрической области с ссылкой, привязанной к каждой области.

Атрибуты areа

1. Атрибут shape
shape – определяет форму области (прямоугольником, кругом, многоугольником).
Прямоугольник — » rect «. Пример: shape color: #008000;»>rect » ;
круг — » circle «. Пример: shape color: #008000;»>circle » ;
многоугольник — » poly «. Пример: shape color: #008000;»>poly «

2. Атрибут coords
coords – это расположение геометрической формы.

Давайте рассмотрим пример на геометрической форме прямоугольника.

Прямоугольная область

Вы уже знаете, что если вам нужна форма прямоугольника, значит нужно прописать в атрибуте shape значение « rect ».

Теперь переходим к координатам.
Точка отсчета начинается с левого верхнего угла картинки, координаты которого (0;0)

Порядок записи координат для атрибута coords будет таким:

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

Для примера с прямоугольником №1 возьмите такие координаты:

x1=25, y1=36, x2=114, y2=98

Вот так будет выглядеть код:

Дальше нужно указать путь(ссылку) для выбранной области. Как сделать ссылку в HTML, вы уже знаете.

Все пока что хорошо. Но нам теперь нужно связать картинку с картой.
Для этого придумайте любое название для карты, например, « karta1 » и пропишите его в теге <map> через атрибут name .

Теперь свяжем карту с картинкой. Для этого используем атрибут usemap .
Пример написания:
usemap color: #0000ff;»>»

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

Теперь соберем все вместе и пропишем еще координаты к другому прямоугольнику №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 (навигационная карта) мы разобрались.