Что такое навигационная карта и как ее сделать?

Из этого видеоурока вы узнаете:

  • Что такое навигационная карта
  • Как прописать навигационную карту в страницу
  • Как узнать координаты краев нужных изображений на навигационной карте

Скачать материалы
Скачать 11 видеоурок по HTML Размер: 19.38 MB, скачали: 466 раз.
Скачать исходники к 11 видеоуроку по HTML Размер: 46.35 kB, скачали: 474 раз.
Как запустить видеоурок:

  1. Разархивировать скачанный файл.
  2. Открыть папку index.
  3. Запустить файл index.html в браузере.

Как делать ссылки с помощью HTML, вы уже знаете 🙂 В этом видеоуроке мы поговорим о навигационных картах.

Что такое навигационные карты и для чего они нужны?

Представьте, у вас на сайте есть изображение, и у вас появилась потребность сделать часть этого изображения ссылкой. Это может быть и прямоугольник, и круг, и многоугольник. В этом вам помогут навигационные карты. Ссылка может быть как на HTML-документ, так и на любой другой формат файла.

Как сделать навигационную карту?

Давайте разберем, как эти навигационные карты прописываются в коде. Это делается непросто.

 <img src="map1" usemap="#map1">
 <map name="map1">
 <area shape="rect" coords="x1, y1, x2, y2" href="about.html" alt="">
 <area shape="rect" coords="x1, y1, x2, y2"…>
 <area shape="circle" coords="x,y,R"…>
 <area shape="poly" coords="x1, y1, …,xN, yN"…>
 </map>
 

Сначала идет обычное изображение, добавляется атрибут usemap, потом идет символ «#» и далее – название нашей карты. Затем открывающий тег <map>, атрибут name, значение атрибута name – значение нашей карты. Далее следует тег <area>, который имеет атрибуты:

  • shape – это форма нашей фигуры. Может принимать значения такие, как rect (прямоугольник), circle (круг) и poly (многоугольник).
  • coords – координаты.
    • Для прямоугольника указывается четыре координаты: x1, y1, x2, y2. Рассмотрим их на примере: левый верхний угол – точка с координатами (x1,y1), правый нижний угол – (x2, y2). Вспоминаем школьную математику. Существуют координатные прямые: ось Х и ось У. В нашем случае ось Х направлена вправо, а ось У – вниз. Проведя перпендикуляры от вершин прямоугольника до осей, получим, что координаты идут в таком порядке: по оси Х – x1, x2; по оси Y – y1, y2. В итоге по двум точкам с координатами (x1,y1) и (x2,y2) и строится наш прямоугольник.
    • Координаты круга задаются иначе: задается x, y (центр круга) и радиус R.
    • Многоугольник строится совсем по-другому: задаются координаты первой точки, второй, третьей и т.д. Они записываются последовательно, и последовательно строится сам многоугольник.
  • href – ссылка на которую ведет наша форма в изображении. С этим атрибутом мы уже знакомы. Например, это документ about.html. Не важно, что является фигурой: прямоугольник, круг или многоугольник – атрибут href может применяться везде.
  • alt – всплывающая подсказка к формочке. Указывается в кавычках.

Последним тегом будет </map>, который закрывает нашу карту.

Давайте перейдем в код и поработаем над всеми формами изображений и картой. После этого вам будет дано домашнее задание. Оно будет аналогично тому, что мы проделаем в этом видеоуроке.

Итак, приступим. Для начала перенесем наше изображение map.png в папку img, проверяем, что оно скопировалось, и переходим в код индексного файла, где и  пропишем изображение. Давайте это сделаем прямо после закрывающегося тега <h1>. Сначала прописываем изображение и путь к нему, далее идет атрибут usemap, где мы указываем будущее имя карты, например map1. После этого прописываем тег карты <map>, тег <area> (в переводе означает «площадь», «участок»), атрибут shape со значением rect и координаты coords, которые мы узнаем либо, подставляя значения методом «тыка», либо используя программу Microsoft Office Picture Manager. Открываем ее на своем компьютере, выбираем Рисунок-> Обрезать и, с помощью простых действий, узнаем точку (x1, y1). Копируем полученные пиксели в наш код. Отступ по X x1=70, отступ по Y  y1=43. Теперь нам нужно указать вторую точку  — (x2, y2). Снова переходим в программу, делаем простые движения нашей мышью и узнаем вторую точку: отступ слева – 270, отступ сверху – 121. Далее идет атрибут href. Сделаем ссылку на about.html – страничку «О нас». Затем прописываем alt, например, «О нас». Тег <area> не требует закрывающего тега, поэтому мы заканчиваем нашей треугольной скобкой.

 <img src="img/map.png" usemap="#map1">
 <map name="map1">
 <area shape="rect" coords="70,43,270,121" href="about.html" alt="О нас">
 </map>
 

Сохраняем и проверяем в браузере наше творчество. Как видим, при наведении на наш прямоугольник, появляется рука, которая означает ссылку, и при нажатии на прямоугольник появляется страница. Кстати, существует еще атрибут target. Мы его уже проходили, и вы можете его тоже тут использовать.

Теперь давайте проделаем то же самое с оставшимися фигурами: кругом, многоугольником и еще одним прямоугольником. Перейдем обратно в код. Прописываем тег <area>. Атрибут shape у нас снова будет прямоугольником – rect, ссылка будет на тот же файл. Теперь давайте узнаем наши координаты. Переходим в программу. Узнаем значение x1 и y1. Это 476 и 37 пикселей. Узнаем значения x2, y2. Это 556 и 243 пикселя.

 <img src="img/map.png" usemap="#map1">
 <map name="map1">
 <area shape="rect" coords="70,43,270,121" href="about.html" alt="О нас">
 <area shape="rect" coords="476, 37, 556, 243" href="about.html" alt="О нас">
 </map>
 

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

Теперь давайте поработаем над кругом. Переходим снова в код. Пишем тег <area>, shape – circle, а координаты здесь задаются уже по-другому. Нам нужно найти центр круга и его радиус. Переходим в программу. Центр круга указать проблематично, поэтому в конце данного видео урока я вам предложу еще один вариант построения навигационных карт. Копируем значения 147 и 199. Теперь узнаем радиус. Для расчета радиуса нам нужно запомнить наше значение слева – 147. Потом переместить ползунок в другую сторону и запомнить новое значение слева – 208, отнять 147 от 208 – это будет 61, и подставить его вместо радиуса. Если будут сложные значения, вы можете использовать калькулятор. Ссылку поставим на тот же файл – about.html. Давайте пропишем значение target — _blank, а title не будем прописывать.

 <img src="img/map.png" usemap="#map1">
 <map name="map1">
 <area shape="rect" coords="70,43,270,121" href="about.html" alt="О нас">
 <area shape="rect" coords="476, 37, 556, 243" href="about.html" alt="О нас">
 <area shape="circle" coords="147, 199, 61" href="about.html" target="_blank">
 </map>
 

Сохраним наш документ и проверим в браузере. Как мы видим, наш круг стал ссылкой. При нажатии на него, страница открывается в новом окне.

У нас остался последний элемент – многоугольник. Перейдем снова в код. Прописываем тег <area> , shape – poly, координаты снова задаем, но в этот раз по всем точкам. Переходим в нашу программу и узнаем координаты первой точки: 270 от левого края и 160 от верхнего. Ставим запятую, узнаем координаты второй точки: 351, 174. Третьей точки: 434,160. Четвертой: 417, 203. Пятой: 433,248. Шестой: 351, 236. Седьмой: 270, 250. Восьмой: 287,204. Ссылку зададим ту же – about.html. Значение target — _blank, title – «О нас».

 <map name="map1">
 <area shape="rect" coords="70,43,270,121" href="about.html" alt="О нас">
 <area shape="rect" coords="476,37,556,243" href="about.html" alt="О нас">
 <area shape="circle" coords="147,199,61" href="about.html" target="_blank">
 <area shape="poly" coords="270,160,351,174,434,160,417,203, 433,248,351,236,270,250,287,204" href="about.html" target="_blank" title="О нас">
 </map>
 

Сохраняем, обновляем страничку. Как мы видим, наш многоугольник стал ссылкой. Она откроется тоже в новом окне. Кстати, при наведении появляется всплывающая подсказка «О нас». При переходе в новом окне открывается страничка «О нас».

На этом данный видеоурок мы с вами заканчиваем. Я обещал дать домашнее задание и рассказать еще один способ построения навигационных карт. Этот способ предполагает использование дополнительных программ, например, таких как Macromedia Dreamweaver или  каких-нибудь других. В этих программах вы сможете построить навигационные карты гораздо проще, и вам не придется для этого узнавать координаты точек.

Теперь перейдем к домашнему заданию. Вам предстоит построить четыре фигуры: два прямоугольника, один круг и стрелочку (многоугольник).

Спасибо за внимание и до встречи в следующем видеоуроке, в котором вы узнаете, как сделать таблицу или вложенные таблицы в HTML.

Подпишись на info-line:

Получать новые уроки на e-mail:

18 комментариев на “Что такое навигационная карта и как ее сделать?”

  1. Светлана 9 февраля 2012 в 13:41 #

    Спасибо за уроки, все понятно и интересно. Но столкнулась с проблеммой 10, 11 уроки виснут после 4, 25 минуты и 5, 43 минуты. Можно ли как то устранить проблемму?

    • Олег Зубцов 9 февраля 2012 в 13:58 #

      Странно, у меня такой проблемы нету. Если вы смотри в онлайне, возможно они подвисают из-за того, что не успели подгрузиться. Чтобы смотреть видео в самом лучшем качестве — скачайте видеоурок. Там и подвисать не должно 🙂

  2. Рахим 9 февраля 2012 в 14:30 #

    они все нормальные видеуроки я смотрел в лучшем качестве *THUMBS UP*

  3. Светлана 12 февраля 2012 в 15:43 #

    Извините, скачала и никаких проблем. =)

  4. Евгений 16 февраля 2012 в 20:28 #

    В первом примере в слове cords не хватает «о», блин, пол часа мудохался 🙂 не мог понять в чем проблема. Потом нашел это о и всё заработало 🙂 Спасибо за урок.

  5. Дмитрий 20 апреля 2012 в 11:02 #

    у меня не работает тег alt вместо него приходится использовать title =) открываю через google chrome

  6. Дмитрий 20 апреля 2012 в 11:04 #

    в опере тоже не работает

  7. Константин 10 декабря 2012 в 21:31 #

    Олег, а скажите еще, пожалуйста, где можно скачать Macromedia Dreamweaver?

    • Олег Зубцов 10 декабря 2012 в 22:56 #

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

  8. Сергей 2 июня 2013 в 11:33 #

    Олег, здравствуйте!

    Не могу разобраться откуда мне вытащить подготовленные Вами изображения с фигурами (прямоугольник, круг, многоугольник) в 11 уроке и эмблему Вашего сайта в 9 уроке. Помогите пжалуйста разобраться ине с этим вопросом!

    • Олег Зубцов 14 июня 2013 в 4:55 #

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

  9. Оксана 8 июля 2013 в 20:09 #

    А вот у меня вопрос.А если я не хочу геометрическую фигуру, если просто картина какая-нибудь. как мерить? спасибо Олег за видео мне реально интересно смотреть т пробовать. удачи вам !!!))) (мой вопрос остается в силе)

    • Олег Зубцов 9 июля 2013 в 12:53 #

      Использовать shape="poly". Если картинка очень сложная и точек очень много, воспользуйтесь визуальными редакторами, в которых выделять точки более удобно (пример: Adobe Dreamviewer).

      P.S. Возможно в интернете есть какая-нибудь программа или онлайн-сервис, выполняющий подобную функцию. Пользоваться ими мне не приходилось, поэтому онлайн-аналоги данной программы подсказать не могу.

      • Оксана 26 июля 2013 в 16:02 #

        спасибки))))))) обошлась office picture maneger. увлеклась не заметила потраченного времени ,прикольно.

  10. Оксана 26 июля 2013 в 15:59 #

    здравствуйте Олег. Скажите мне пожалуйста вот что. Я все сделала ,все замечательно с этими картами получилось. но потом решила изменить размер картинки на меньший ,прописала в img width и height , картинка изменилась ,координаты пропали. как поступать в таких случаях. логически понимаю что ерунду учудила. но мне нужно подтверждение.короче ,если не сложно объясните пожалуста . заранее благодарю

    • Олег Зубцов 3 августа 2013 в 12:59 #

      1. Можно убрать прописанную ширину и высоту.

      2. Можно прописать новые координаты.

  11. Anton 21 сентября 2013 в 17:21 #

    Огромное Спасибо !!! Очень пригодилось !

Оставить ответ