Html area coords как узнать координату на рисунке
Перейти к содержимому

Html area coords как узнать координату на рисунке

  • автор:

Атрибут coords

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

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

Синтаксис

Обязательный атрибут

Значения

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

Для прямоугольника ( shape=»rect» ) определяется четыре координаты — X1, Y1, X2, Y2, как показано на рис. 1.

Рис. 1

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

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

Рис. 2

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

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

Рис. 3. Координаты для полигона

Рис. 3. Координаты для полигона

Значение по умолчанию

HTML5 IE Cr Op Sa Fx

    Тег AREA, атрибут coords  

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.

Типы тегов

HTML5

Блочные элементы

Строчные элементы

Универсальные элементы

Нестандартные теги

Осуждаемые теги

Видео

Документ

Звук

Изображения

Объекты

Скрипты

Списки

Ссылки

Таблицы

Текст

Форматирование

Формы

Фреймы

Html area coords как узнать координату на рисунке

Блог веб разработки статьи | видеообзоры | исходный код

webfanat вконтакте webfanat youtube

карта изображения html

карта изображения html

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

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

Проигрыватель

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

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

За создание карты изображения отвечают два тега 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 для обработки события клика.

карты изображений html5 area

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

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

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

document.querySelector('img').addEventListener('mousemove', function(e)< console.log(e.clientX, e.clientY); >);

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

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

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

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

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

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

Оцените статью:
Статьи
  • contenteditable HTML
  • JavaScript ошибки
  • Работа с выделением текста и курсором.
  • Трейты php
  • Мета теги
  • Javascript json
  • Javascript console.time
  • php.ini php
  • память выделяемая php
Комментарии

Внимание. Комментарий теперь перед публикацией проходит модерацию

Все комментарии отправлены на модерацию

© 2017-2024 webfanat.com Все права защищены.

Реклама

Запись экрана

Данное расширение позволяет записывать экран и выводит видео в формате webm

Добавить приложение на рабочий стол

Атрибут coords

Атрибут / параметр coords (от англ. » coord inate s » ‒ «координаты») задаёт координаты активной области карты-изображения. Точкой отсчёта координат выступает левый верхний угол карты-изображения.

Условия использования

В зависимости от типа фигуры (задаётся атрибутом « shape ») активной области задаются определённые координаты и параметры области. (Расчёт координат ведётся в пикселях.)

Поддержка браузерами

Спецификация

Верс. Раздел
HTML
2.0
3.2 MAP
4.01 13.6.1 Client-side image maps: the MAP and AREA elements
coords = coordinates [CN].
DTD: Transitional Strict Frameset
Перевод
5.0 4.7.12 The area element
The coords attribute.
5.1 4.7.16. The area element
The coords attribute.
XHTML
1.0 Extensible HyperText Markup Language
DTD: Transitional Strict Frameset
1.1 Extensible HyperText Markup Language

Значения

В качестве значения указываются координаты активной области карты-изображения:

Правильный четырёхугольник [ shape=»rect» ]

х1,y1,x2,y2 Задаются « x » и « y » координаты левой верхней и правой нижней вершины прямоугольника.

Активная область в виде правильного четырёхугольника.

1 2
x 27 229
y 62 161

.

Окружность [ shape=»circle» ]

х,y,r Задаются « x » и « y » координаты центра окружности и значение радиуса (« r »).

Значение радиуса может быть выражено в процентах. В этом случае вычисление радиуса происходит по координате центра окружности с наименьшим значение (то есть за основу берётся либо значение « x », либо значение « y »).

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

x y r (px) r (%)
120 99 71 71.72
 .  Радиус в пикселях --> Радиус в процентах -->

Многоугольник [ shape=»poly» ]

х1,y12,y23,y3. хn,yn Задаются « x » и « y » координаты всех вершин многоугольника. Первая и последняя пара « x » и « y » координат должна быть одинаковой, для того чтобы образовать многоугольник. В случае, когда эти значения координат не совпадают браузер должен самостоятельно создать дополнительную пару координат совпадающую с первой парой координат, для того чтобы образовался многоугольник.

Активная область в виде треугольника.

1 2 3
x 60 130 200
y 162 31 162
 .  Допустимое написание --> Рекоммендованное написание --> 60,162, 130,31, 200,162, 60,162" href=. "> 

Активная область в виде трапеции.

1 2 3 4
x 35 80 172 217
y 150 63 63 150
 .  Допустимое написание --> Рекоммендованное написание --> 35,150,80,63, 172,63, 217,150, 35,150" href=. "> 

Активная область в виде пятиугольника.

1 2 3 4 5
x 19 68 156 220 109
y 130 21 59 155 170
 .  Допустимое написание --> Рекоммендованное написание --> 19,130, 68,21, 156,59, 220,155, 109,170, 19,130" href=. "> 

Атрибут coords

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

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

Синтаксис

Значения

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

Для прямоугольника ( shape=»rect» ) определяется четыре координаты — X1, Y1, X2, Y2, как показано на рис. 1.

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

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

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

Для полигона (многоугольника) ( shape=»poly» ) последовательно указываются координаты каждой вершины (X1, Y1, X2, Y2,…, Xn, Yn), как показано на рис. 3.

Рис. 3. Координаты для полигона

Значение по умолчанию

Пример

AREA, атрибут coords

Браузеры

3 12 1 15 1 1

В таблице браузеров применяются следующие обозначения.

  • — элемент полностью поддерживается браузером;
  • — элемент браузером не воспринимается и игнорируется;
  • — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.

Число указывает версию браузреа, начиная с которой элемент поддерживается.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *