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

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

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

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

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

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

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

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

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

Статьи

Разработки

Комментарии

TerrellLub

15:13 21-04-2019

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>

Реклама

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

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