Блог веб разработки

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

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

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

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

<img src="img/player.jpg"   alt="Проигрыватель">
карты изображений html5

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

За создание карты изображения отвечают два тега map и area.

map - тег map служит контейнером для тега area

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

Сделаем на картинке кнопку play активной:

<img src="img/player.jpg"  alt="Проигрыватель" usemap="#Player" >
<map name="Player">
    <area shape="poly" coords="153,153,257,151,263,263,168,280" onclick="document.querySelector('audio').play()"  title="Проиграть музыку" >
</map>

Теперь разбираемся. Для того чтобы связать нашу картинку с контейнером 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 у нас выполниться следующий код:

document.querySelector('audio').play()

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

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

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

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

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

<area shape="poly" coords="153,153,257,151,263,263,168,280" href="https://webfanat.com"  title="Перейти на сайт webfanat" >

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

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

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

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

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

Еще статьи

Object.is js

gitignore GIT

Метки GIT

камера html

Задержки php

Типы параметров функций и методов в php7

Коллекции javascript

javascript время

css zoom

Комментарии

Проверочный код

TerrellLub

Get 221 uplifting royalty free Hip-Hop music kits on AudioJungle. Buy uplifting music and sounds from $20. <div style="display:none">http://v.ht/VGn61</div> <div style="display:none">http://v.ht/BWNm</div> <div style="display:none">http://v.ht/62Tc</div> <div style="display:none">http://v.ht/MZhx</div> <div style="display:none">http://v.ht/Nam8/</div> <div style="display:none">http://v.ht/vM2A</div> <div style="display:none">http://v.ht/bi2i</div>

15:13 21-04-2019

История

    ПОДПИСКА

    • Подпишись и получай информацию о выходе новых статей на почту! Просто введите свою почту, нажмите кнопку подписаться. На почту должно будет прийти сообщение с потверждением подписки. Если сообщение не пришло проверьте раздел спам или попробуйте другую почту. Также по всем техническим проблемам вы можете написать в поддержку

    НОВОСТИ

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