#15 Карта изображения на HTML, Тег MAP и AREA на HTML

Карта изображения тег map и area. В этом видео уроке я расскажу вам о том как создать карту изображения на html и делать ссылки прямо на изображении. Теги для создания карты изображения html это теги map и area. Карта изображения html примеры на практике как создать карту изображения html.
✔Советую посмотреть:
Плейлист Уроки HTML: • Уроки по HTML
Материалы к уроку: yadi.sk/d/0TFe...
Тег source для мультимедиа: • #12 Как добавить аудио...
Тег изображения img: • #13 Как вставить изобр...
Тег canvas: • #14 Работа с CANVAS (к...
⚡️ Эксклюзив на Boosty - boosty.to/itdo...
💡 Telegram канал - t.me/itdoctor_...
🎥 Курсы на Stepik - stepik.org/use...
💰 Донаты на ЮMoney - sobe.ru/na/itd...
ВКонтакте - itdocto...
Яндекс Дзен - zen.yandex.ru/...
Rutube - rutube.ru/chan...
#html #html5 #itdoctor #обучение

[@ITDoctor]

Курс Frontend разработчик на HTML, CSS и JavaScript: stepik.org/z/113402

[@creekbrawlstars4994]

Огромное спасибо! Долго мучился с этой темой, учителя в школе рассказывали полный бред и ничего из их советов не помогало. 5 минут вашего видео - проблема устранена, всё работает😁

[@ITDoctor]

рад что было полезно. у нас тут много всего интересного. в плейлистах на канале особенно

[@A1_TR_812]

вот это супер, не знал раньше этого даже! спасибо

[@ITDoctor]

Спасибо что оценили

[@user-to7bo1rb3z]

Тема действительно сложноватая и запутанная для новичков. ITDoctor cпасибо! Всё понятно!

[@niktafortesss7962]

Внатуре запутано...

[@ITDoctor]

сейчас это почти никто не использует, но прикольно знать как люди раньше делали. Еще как нибудь расскажу про то как создать бегущую строку на сайте (чисто по фану) потому что сейчас так никто не делает а раньше это было модно. прям как по телику у тебя на сайте идет какой то текст в виде бегущей строки

[@niktafortesss7962]

@@ITDoctor а что используют сейчас?

[@ITDoctor]

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

[@DarkFenix139]

@@ITDoctor, ну, как товарищ подсказал, можно пасхалки делать с помощью этой штуки

[@АннаМихайловна-у8з]

Доступно и понятно, спасибо!

[@lumeaceaiuluisrl6343]

Спасибо за урок!

[@АкылбекБайзаков-н7ъ]

Классно! Спасибо!

[@ITDoctor]

Пожалуйста

[@DSASDFFSDASDWQTRG]

Спасибо, отличное видео

[@alexyaremenko7165]

добрый вечер!

[@topgoods1746]

Премного благодарен!

[@maxsmirnik9032]

В некоторых редакторах есть встроенная функция map - там ничего не нужно самому высчитывать.

[@maksymyakovchenko4796]

Спасибо! Удачи!)

[@ITDoctor]

Спасибо

[@АлександрЯворский-х8ж]

Спасибо

[@anastasi_moon]

спасибо!

[@ITDoctor]

Пожалуйста

[@DarkFenix139]

Пробовал сейчас с кругом Есть проблема 455х430 Такие координаты показывает ФШ 389х370 А такие координаты получились на деле (подстроился методом подстановки коорд)

[@dippdp1108]

Спасибо, доктор. А теперь я к окулисту, а то не видно ничего 😁

[@ITDoctor]

К сожалению на старых видео есть такая проблема. Опыта еще мало было в записи уроков

[@АлександрБольшаков-г5п]

Да, вот это было полезно

[@mrzadrot9120]

болшое спасибо

[@user-to7bo1rb3z]

Да, шрифт побольше бы. Видно некорректно даже при 720р

[@tamerlanmaglaev9435]

На 1080р более менее

[@Rexonamax]

Rect можно вбивать только если нужно выделить квадрат или четырехугольник ?

[@MxM_5835]

Спасибо за видео. Как Браузер называется?

[@ITDoctor]

firefox developer edition

[@olyailyina]

Можно ли сделать так чтобы при наведении на область она немного увеличивалась? И можно ли сделать якорные ссылки на эту же страницу?

[@ЛюблюМашу-о4д]

Можно,через JS

[@SC-eg3dv]

Спасибо за урок. А что за редактор у Вас?

[@ITDoctor]

В данном видео использую редактор Brackets вот подробный курс про данный редактор kzbin.info/aero/PLuY6eeDuleINjpdYGtf2podRhv6DdrvKn

[@aleksandrzhilkin4800]

это нынче кто-нибудь использует? Есть какие-то примеры из реальной жизни?

[@vikatiurne1000]

Почему в фотошопе координаты центра х=450, y=600 и радиус 270px, но когда я эти цыфры ввожу ссылка не появляется. Методом подбора то что мне нужно имеет coords="70,120,50". Что я делаю не так?

[@ITDoctor]

может какие то отступы есть у body например или начало координат в разных местах. нужно понять закономерность. поставить например 100 100 и сверить в чем отличие

[@СергейКондулуков-з9ч]

Не знаю. На мой взгляд это излишки. Обычно делают картинку ссылкой. Или просто как-то при помощи css украшают саму ссылку.

[@ITDoctor]

это одна из старых технологий которая сейчас практически не используется

[@гурбан-д4ш]

Здравствуйте, сможете сделать четкий снимок эти места 1) 37,976325 "N 54,297674" E 2) 39,742364° N 53,694992° E 3) 37.646579 ° N 54.42539 °

[@alexyaremenko7165]

подскажите пожалуйста что за редактор открыт где Вы с картинкой работаете?

[@ITDoctor]

Фотошоп

[@it_catt]

На видео данный способ работает или на гиф?

[@ITDoctor]

не понятен ваш вопрос

[@FilCapital]

Подскажите плиз, как в фотошопе вызвать окошко "инфо" как у Вас.

[@ITDoctor]

окно/инфо (F8) prntscr.com/ma29jh

[@FilCapital]

@@ITDoctor Спасибо!

[@ОльгаЗдоренко-ц6н]

Доброго дня) А как подсветить область area цветом при наведении курсора?

[@jekaterinastef7665]

Налепить сверху прозрачных цветных дивов-картинок, их сделать ссылками и добавить уменьшение прозрачности при наведении курсора. И это все оптимизировать под все экраны...

[@malex-maleth]

А если размеры изображения в % еденицах?

[@user-yx6kn1op6y]

Что за программа на видео используется?

[@user-yx6kn1op6y]

Понял,фотошоп

[@СергейКондулуков-з9ч]

Опять какой-то дурак поставил видео минус. Не нравится не смотрите, а видео портить не надо.

[@DarkFenix139]

Ютуб не видит разницы между дизами и лайками. Все одинаково хорошо влияет

[@mrzadrot9120]

я не понемаю как ты ето делаешь вышчитываешь в фотошопе у меня чет неполучяется ползоватся фотошопом обесни как ето ты делаешь

[@dareenglishteach]

А можно сделать красивые ссылки?

[@ITDoctor]

можно любые

[@nickneil152]

Слова опережают действия в видео

[@masterng56]

Что со звуком?

[@ЛёхаСнежный]

Как определять координаты без фотошопа ?

[@ITDoctor]

В Paint слева внизу показываются координаты относительно левого верхнего угла картинки

[@jekaterinastef7665]

document.getElementById('img').onclick = function(e) { var x = e.offsetX==undefined?e.layerX:e.offsetX; var y = e.offsetY==undefined?e.layerY:e.offsetY; alert(x +'x'+ y); } в помощь. Добавь в код, пощелкай нужные вершины, потом сотри.

[@logand5408]

Как открыть эту херню с координатами или что там?

[@tahminaqodirkulova4340]

видео отстает от вашей речи, исправьте пожалуйста)

[@ilya9697]

Это вообще еще актуально ?

[@ITDoctor]

для общего развития

[@alexdreamer11]

Это не кёркл циркл

[@ITDoctor]

учту

[@animenoname921]

Битый архив ((

[@ITDoctor]

Проверил, все работает на яндекс диске yadi.sk/d/0TFee9dy3T3DwW