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

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

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

карта изображения 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.

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

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

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

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

Статьи

HTML Drag-and-drop
Три полезных метода для работы с объектами в javaScript
Слияние веток GIT
камера html
User select css
Аргументы функций php
DOMParser
Php zip

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

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

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

Подсвечивать места на картинке согласно координатам map — area

Есть картинка, к ней прописаны через map>area координаты мест для кликов. Вопрос: можно ли эти места как-то подсвечивать при наведении на них мышкой? Форма подсветки может быть простой (в виде квадрата) или более сложной (что-то вроде tooltip’a). Идея использовать статические Гугл карты, внутри которых кастомные маркеры. При наведении на которые, будут переходы по ссылкам. Но нужно как-то показать, что это «активные маркеры» на изображении. Поэтому и возникла идея исследовать этот вопрос.

Отслеживать

задан 15 июн 2021 в 13:36

2,897 1 1 золотой знак 14 14 серебряных знаков 24 24 бронзовых знака

Атрибут coords

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

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

Синтаксис

Значения

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

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

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

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

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

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

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

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

Пример

AREA, атрибут coords

Браузеры

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

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

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

Атрибут coords

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

Синтаксис

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

Значения

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

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

Рис. 1

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

Рис. 2

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

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

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

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

HTML5 IE Cr Op Sa Fx

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

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