No video :(

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

Подписаться 70 тыс.

Просмотров 33 тыс.

50% 1

Карта изображения тег 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 #обучение

Опубликовано:

27 авг 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 76

@ITDoctor 3 года назад

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

@creekbrawlstars4994 Год назад

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

@ITDoctor Год назад

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

@A1_TR_812 6 месяцев назад

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

@ITDoctor 6 месяцев назад

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

@user-hz5jy2to7l 4 года назад

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

@user-yj6qk2xg9g 5 лет назад

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

@user-to7bo1rb3z 5 лет назад

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

@niktafortesss7962 5 лет назад

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

@ITDoctor 5 лет назад

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

@niktafortesss7962 5 лет назад

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

@ITDoctor 5 лет назад

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

@DarkFenix139 3 года назад

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

@lumeaceaiuluisrl6343 4 года назад

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

@user-fg8pq3kk5l 2 года назад

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

@ITDoctor 2 года назад

Пожалуйста

@topgoods1746 3 года назад

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

@maksymyakovchenko4796 2 года назад

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

@ITDoctor 2 года назад

Спасибо

@maxsmirnik9032 2 года назад

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

@alexyaremenko7165 Год назад

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

@user-es3px4kx1l 5 лет назад

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

@dippdp1108 3 года назад

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

@ITDoctor 3 года назад

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

@anastasi_moon Год назад

спасибо!

@ITDoctor Год назад

Пожалуйста

@DarkFenix139 3 года назад

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

@user-om1jz6wd4n 4 года назад

Спасибо

@SC-eg3dv 6 лет назад

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

@ITDoctor 6 лет назад

В данном видео использую редактор Brackets вот подробный курс про данный редактор ru-vid.com/group/PLuY6eeDuleINjpdYGtf2podRhv6DdrvKn

@mrzadrot9120 4 года назад

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

@MxM_5835 5 лет назад

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

@ITDoctor 5 лет назад

firefox developer edition

@Rexonamax 4 года назад

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

@olyailyina 5 лет назад

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

@user-le9zq3pe1x 2 года назад

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

@user-to7bo1rb3z 5 лет назад

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

@tamerlanmaglaev9435 4 года назад

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

@alexyaremenko7165 Год назад

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

@ITDoctor Год назад

Фотошоп

@vikatiurne1000 Год назад

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

@ITDoctor Год назад

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

@aleksandrzhilkin4800 Год назад

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

@FilCapital 5 лет назад

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

@ITDoctor 5 лет назад

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

@FilCapital 5 лет назад

@@ITDoctor Спасибо!

@it_catt 6 месяцев назад

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

@ITDoctor 6 месяцев назад

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

@user-qh5fr3yo1w 5 лет назад

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

@ITDoctor 5 лет назад

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

@user-uz3cg7wp2t 3 года назад

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

@user-hn4bh4rf7x 4 года назад

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

@jekaterinastef7665 3 года назад

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

@malex-maleth 5 лет назад

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

@user-yx6kn1op6y 3 года назад

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

@user-yx6kn1op6y 3 года назад

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

@user-qh5fr3yo1w 5 лет назад

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

@DarkFenix139 3 года назад

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

@nickneil152 5 лет назад

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

@masterng56 3 года назад

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

@mrzadrot9120 4 года назад

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

@dareenglishteach 2 года назад

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

@ITDoctor 2 года назад

можно любые

@user-ys2ss8wj6m 3 года назад

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

@ITDoctor 3 года назад

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

@jekaterinastef7665 3 года назад

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); } в помощь. Добавь в код, пощелкай нужные вершины, потом сотри.