Атрибут coords
Устанавливает координаты области, она также называется «горячая область». Такая область может быть ссылкой на файл или связана с действием, определяемым скриптом.
Значения координат представляют собой набор чисел, разделенных запятыми. Если две области перекрываются между собой, приоритет имеет та, которая определена в коде HTML выше.
Синтаксис
Обязательный атрибут
Значения
Набор координат определяется формой «горячей области», которая задается атрибутом shape . Отсчет координат обычно ведется от левого верхнего угла изображения и указывается в пикселах.
Для прямоугольника ( shape=»rect» ) определяется четыре координаты — X1, Y1, X2, Y2, как показано на рис. 1.
Рис. 1. Координаты для прямоугольника
Для окружности ( shape=»circle» ) определяется три координаты — координаты центра окружности (X, Y) и ее радиус (R), как показано на рис. 2.
Рис. 2. Координаты для окружности
Для полигона (многоугольника) ( shape=»poly» ) последовательно указываются координаты каждой вершины (X1, Y1, X2, Y2, :), как показано на рис. 3.
Рис. 3. Координаты для полигона
Значение по умолчанию
HTML5 IE Cr Op Sa Fx
Тег AREA, атрибут coords
Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.
Типы тегов
HTML5
Блочные элементы
Строчные элементы
Универсальные элементы
Нестандартные теги
Осуждаемые теги
Видео
Документ
Звук
Изображения
Объекты
Скрипты
Списки
Ссылки
Таблицы
Текст
Форматирование
Формы
Фреймы
Html area coords как узнать координату на рисунке
Блог веб разработки статьи | видеообзоры | исходный код
карта изображения html
Всем доброго времени суток. Сегодня мы рассмотрим карты изображений благодаря которым мы можем сделать нашу картинку динамичной. Итак, поехали!
У нас есть, картинка:
На картинке мы видим элементы проигрывателя. Допустим мы хотим чтобы каждый элемент проигрывателя на картинке выполнял свои функции. Здесь нам и пригодится карта изображения.
За создание карты изображения отвечают два тега 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. Заиграет музыка!
С другими элементами проигрывателя действуем по аналогии. Для более удобного отслеживания координат точек на картинке вы можете в консоли браузера выполнить следующий код:
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,y1,х2,y2,х3,y3. хn,yn Задаются « x » и « y » координаты всех вершин многоугольника. Первая и последняя пара « x » и « y » координат должна быть одинаковой, для того чтобы образовать многоугольник. В случае, когда эти значения координат не совпадают браузер должен самостоятельно создать дополнительную пару координат совпадающую с первой парой координат, для того чтобы образовался многоугольник.
1 | 2 | 3 | |
---|---|---|---|
x | 60 | 130 | 200 |
y | 162 | 31 | 162 |
1 | 2 | 3 | 4 | |
---|---|---|---|---|
x | 35 | 80 | 172 | 217 |
y | 150 | 63 | 63 | 150 |
1 | 2 | 3 | 4 | 5 | |
---|---|---|---|---|---|
x | 19 | 68 | 156 | 220 | 109 |
y | 130 | 21 | 59 | 155 | 170 |
Атрибут 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. Координаты для полигона
Значение по умолчанию
Пример
!DOCTYPE>
Браузеры
3 | 12 | 1 | 15 | 1 | 1 |
В таблице браузеров применяются следующие обозначения.
- — элемент полностью поддерживается браузером;
- — элемент браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.
Число указывает версию браузреа, начиная с которой элемент поддерживается.