Загрузка

RUS | ANG | |

StepkinBlog.ru

Пока я творю, я живу!
Блог посвящен: HTML, CSS, PHP, Wordpress, Bootstrap

Главная » Основы HTML » Как сделать карту изображения в HTML(навигационная карта). Основы HTML для начинающих. Урок №15

01.12.2015


11:09


12019


19


Как сделать карту изображения в HTML(навигационная карта). Основы HTML для начинающих. Урок №15

Как сделать карту изображения в HTML(навигационная карта). Основы HTML для начинающих. Урок №15

Всем привет!
Продолжаем изучать основы HTML. . Карту изображений еще называют навигационной картой, но это не так уж и важно.
Давайте выясним, что такое карта изображения (навигационная карта) и где ее можно использовать на практике.

Карта изображения (навигационная карта) – это картинка, на которой размещается одна или несколько указанных областей для ссылок.

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

[посмотреть пример]

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

Как сделать карту изображения в HTML(навигационная карта). Основы HTML для начинающих.

Вот сейчас научимся создавать что-то подобное.

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

Как сделать карту изображения в HTML

Чтобы создать карту изображения в HTML, вставьте вот такой каркас:

<map>
<area>
<area>
<area>
</map>

○ тег map

Тег <map></map> - это  главный контейнер для создания карты изображения, внутри которого содержатся другие теги, такие как <area> .
Закрывающий тег обязательный.

* атрибуты тега map

название карты
Обязательно карте нужно дать имя и для этого используют атрибут  «name»:

<map name="имя_карты">

○ тег area

Тег <area> - этот тег предназначен для указания геометрической области со ссылкой.

* атрибуты тега area

как определить форму области

Чтобы определить форму области (прямоугольник, круг, многоугольник) используют для тега <area> атрибут  «shape» с такими значениями:

  • rect - Прямоугольник. Пример: shape="rect";
  • circle - Круг. Пример: shape="circle";
  • poly - Многоугольник. Пример: shape="poly"

Пример:

<area shape="rect">

как указать расположение геометрической формы

Чтобы указать расположение геометрической формы (прямоугольником, кругом, многоугольником) используют для тега <area> атрибут  «coords».

В атрибуте  «coords» и задаются все параметры  размещения геометрической фигуры по такой схеме:

Прямоугольная область

coords="x1,y1,x2,y2"

Прямоугольная область

Обратите внимание на вертикальную ось «y» и горизонтальную ось  «x». Вот по этим осям и задаются параметры.

Круглая область

coords="x,y,R"

Круглая область

Многоугольная область

coords="x1,y1,x2,y2,x3,y3,x4,y4,x5,y5"

Многоугольная область

Создаем карту изображения в HTML

Прямоугольник

К примеру, у меня есть вот такая картинка прямоугольников:

Создаем карту изображения в HTML

Вставим картинку в html документ:

<img src="kartinka.gif">

Теперь создаем блок для карты изображения и даем ему любое название через атрибут «name», к примеру «karta1»

<img src="kartinka.gif">
<map name="karta1">
</map>

Далее связываем картинку с картой. Для этого и нужно было дать название к карте. Чтобы связать карту, пропишите к картинке атрибут «usemap»:

<img src="kartinka.gif" usemap="#имя_карты">

Имя карты обязательно должно быть через решетку «#»:

<img src="kartinka.gif" usemap="#karta1">
<map name="karta1">
</map>

Теперь в теге <area> указываем координаты, геометрическую форму и ссылку для перехода.

Вот координаты первого прямоугольника:

x1=25, y1=36, x2=114, y2=98

а вот такие будут ко второму:

x1=153, y1=11, x2=219, y2=127

Прямоугольная область

Вот готовый код:

<img src="kartinka.gif" usemap="#karta1">
<map name="karta1">
<area href="http://stepkinblog.ru/html/" shape="rect" coords="25,36,114,98">
<area href="http://stepkinblog.ru/avtor/" shape="rect" coords="153,11,219,127">
</map>

Просмотрите готовый код. Вам все понятно, если нет, просмотрите с самого начала теги для создания навигационной карты. Если это не помогло, пишите в комментариях.

А мы смотрим на результат, что же у меня вышло. Попробуйте навести на прямоугольник №1, а потом на №2 (можно нажать, они кликабельны):

[посмотреть пример]

Круг

К примеру, у меня есть вот такая картинка круга:

Создаем карту изображения в HTML

Вот координаты первого круга:

x=46, y=48; а длина радиуса - R=35

а вот такие будут для второго круга:

x=158, y=75, R=53

Круглая область

Прежде, чем посмотреть готовый код, попробуйте сами написать HTML код и сверить его с моим.

Готовый код будет вот таким:

<img src="kartinka-2.gif" usemap="#karta2">
<map name="karta2">
<area href="http://stepkinblog.ru/html/" shape="circle" coords="46,48,35">
<area href="http://stepkinblog.ru/css/" shape="circle" coords="158,75,53">
</map>

Еще раз повторюсь в разъяснениях, что я делал в коде:

Строка №1
Вставил картинку в HTML файл и привязал изображение к карте с помощью атрибута «usemap»:

<img src="kartinka-2.gif" usemap="#karta2">

Строка №2
Создал блок для карты изображения и дал карте название для привязки к картинке с помощью атрибута «name»:

<map name="karta2">

Обратите внимание, название карты (name="имя") должно совпадать с привязкой картинки (usemap="#имя"). Это важно, так как карта изображений работать не будет.

Строка №3 и №4
Указал фигуру и ее координаты, а также привязал к фигуре ссылку

<area href="http://stepkinblog.ru/html/" shape="circle" coords="46,48,35">
<area href="http://stepkinblog.ru/css/" shape="circle" coords="158,75,53">

Итак, если вы все правильно сделали, результат будет таким:

[посмотреть пример]

Попробуйте навести на круг №1, а потом на №2 (можно нажать, они кликабельны)!!!

Многоугольник

К примеру, у меня есть вот такая картинка фигуры с несколькими углами:

Создаем карту изображения в HTML

Вот координаты первого многоугольника:

x1=168, y1=9, x2=232, y2=29, x3=200, y3=97, x4=223, y4=129, x5=153, y5=119

а вот такие будут для второго многоугольника:

x1=54, y1=20, x2=109, y2=20, x3=147, y3=58, x4=109, y4=96, x5=54, y5=96, x6=16, y6=58

Многоугольная область

Готовый код будет вот таким:

<img src="kartinka-3.gif" usemap="#karta3">
<map name="karta3">
<area href="http://stepkinblog.ru/php/" shape="poly" coords="168,9,232,29,200,97,223,129,153,119">
<area href="http://stepkinblog.ru/bootstrap/" shape="poly" coords="54,20,109,20,147,58,109,96,54,96,16,58">
</map>

Результат будет вот таким:

[посмотреть пример]

Хочу дополнить, что углов может быть столько, сколько вы хотите и сколько вы укажите:

<area shape="poly" coords="x1,y1,x2,y2,...,xN,yN">

Разъяснение:

x1, y1 координаты первого угла;
x2, y2 координаты второго угла;
xN, yN координаты последнего угла

ДОПОЛНЕНИЕ:

Комбинированная карта изображений

Карту изображений можно комбинировать сразу с разными фигурами. Что я имею в виду? На одной картинке, могут быть указаны различные области разных фигур.
Вот, к примеру, так:

<img src="kartinka-4.gif" usemap="#karta4">
<map name="karta4">
<area href="http://stepkinblog.ru/wordpress/" shape="circle" coords="46,48,35,">
<area href="http://stepkinblog.ru/avtor/" shape="rect" coords="153,11,219,127">
</map>

В примере я указал область для круга и для прямоугольника.

Подсказка для ссылки в карте изображений

Для каждой выбранной области можно прописать подсказки, которые будут появляться, если навести курсор мышки. Для подсказки используют атрибут «title» к тегу «area»:

<img src="kartinka-4.gif" usemap="#karta4">
<map name="karta4">
<area href="http://stepkinblog.ru/wordpress/" shape="circle" coords="46,48,35," title="wordpress">
<area href="http://stepkinblog.ru/avtor/" shape="rect" coords="153,11,219,127" title="Автор блога">
</map>

Вот результат:

[посмотреть пример]

Наведите курсор мыши на круг, а потом на прямоугольник. Вы увидите, как появятся подсказки, на кружке – «wordpress», а на прямоугольнике - «Автор блога».

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

Жду вас в следующем уроке. Подписывайтесь на обновления моего блога.



Случайные записи:

  1. Альтернативный синтаксис управляющих структур. Основы PHP с нуля. Урок №15
  2. Изображение. Основы bootstrap 3 для начинающих. Урок №15
  3. Комментировать код в HTML. Что это и зачем нужно…
  4. Знакомство с CSS. Основы CSS для начинающих. Урок №1
  5. Сетка. Основы bootstrap 3 для начинающих. Урок №4

Последние записи рубрики:

  1. Бесплатный курс по основам HTML
  2. Шпаргалка по HTML на русском языке
  3. Создание простого мини сайта. Практика по пройдённому материалу
  4. Тесты HTML онлайн. Основы HTML для начинающих
  5. Как прописать мета теги. Основы HTML для начинающих. Урок №21

19 ответа(ов) на статью: “Как сделать карту изображения в HTML(навигационная карта). Основы HTML для начинающих. Урок №15”

  1. Михаил says:
    <img src="IMG/panel.jpg" usemap="#map1">

    Что не так?

    <map name="map1">
    <area href="Список уроков.html" shape="rect" coords="0,0,262,262">
    <area href="Уроки/Урок1.html" shape="rect" coords="262,262,525,525">
    <area href="Уроки/Урок2.html" shape="rect" coords="787,787,1050,1050">
    <area href="Про мой курс.html" shape="rect" coords="525,525,787,787">
    </map>
    

    Ответить

    Степка
    Степка ответил(а) на комментарий:

    Не совсем понял Вас, Михаил!
    Расскажите о проблеме, чтобы я знал как Вам помочь.

    Ответить

    Степка
    Степка ответил(а) на комментарий:

    Михаил, HTML документ не может писаться русскими буками и с пробелами:

    href="Про мой курс.html"

    Попробуйте заменить вот так:

    href="pro-my-kyrs.html"

    Ответить

  2. Zhenya says:

    чому в кінці виходить гаперпосилання на цей сайт?

    Ответить

    Степка
    Степка ответил(а) на комментарий:

    Расскажите подробней о ситуации.
    Если вы про сам код, то нужно заменить ссылку на вашу:

    <img src="kartinka-4.gif" usemap="#karta4">
    <map name="karta4">
    <area href="http://stepkinblog.ru/wordpress/" shape="circle" coords="46,48,35,">
    

    Обратите внимание на последнюю строку. Замените (http://stepkinblog.ru/wordpress/).
    Рекомендую прочитать статью про ссылки
    Если я Вас не так понял, прошу подробней рассказать о проблеме. Спасибо за комментарий!

    Ответить

    Михаил ответил(а) на комментарий:

    Когда я навожу мышью на карту, как ссылка воспринимается только первая область(). При попадании на другие области, курсор мыши не изменяется.

    <area href="Список уроков.html" shape="rect"
    Степка
    Степка ответил(а) на комментарий:

    Михаил, дайте мне весь код от начала до конца. Я же не могу увидеть так вашу ошибку.
    Вы даже это кусок кода обрезали.
    Жду вашего комментария.

  3. Петя says:

    Скажите, а можно ли это использовать для верстки e-mail рассылок?

    Ответить

    Степка
    Степка ответил(а) на комментарий:

    Не пробовал, но думаю, что возможно!

    Ответить

  4. Сергей says:

    ;-) Отличные уроки, но все это запомнить и закрепить придется только на практике, а ваш сайт использовать как справочник.Спасибо большое.

    Ответить

    Степка
    Степка ответил(а) на комментарий:

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

    Ответить

  5. Кон тантин says:

    Доброго времени! Я не понял где вы взяли эти координаты:
    "Вот координаты первого прямоугольника:

    x1=25, y1=36, x2=114, y2=98

    а вот такие будут ко второму:

    x1=153, y1=11, x2=219, y2=127"
    И почему указывается 2 прямоугольника/многоугольника/круга? Благодарю.

    Ответить

    Степка
    Степка ответил(а) на комментарий:

    Здравствуйте, Константин!
    Константин, два прямоугольника указывается, потому что я использовал картинку с двумя прямоугольниками.
    Соответственно, координаты указывал к двум прямоугольникам. Эти же действия можно применять к одному прямоугольнику/многоугольнику/кругу

    Ответить

  6. Денис says:

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

    Ответить

    Степка
    Степка ответил(а) на комментарий:

    Здравствуйте, Денис!
    Какую фигуру Вы создаете?

    Ответить

  7. Александр says:

    Здравствуйте! Сделал области, как написано у Вас. Все работает. Но на другом мониторе навигационные области сместились относительно элементов рисунка. Как привязать координатные области на карте изображения к элементам для любого монитора.

    Ответить

    Степка
    Степка ответил(а) на комментарий:

    Мой пример или Ваш не отображается на другом мониторе?

    Ответить

  8. Дмитрий says:

    У меня вопрос, как вы рассчитываете x,y? Через калькулятор измеритель какой.

    Допустим у меня ест прямоугольник, как мне измерить расстояние от края до края, как у Вас, и сделать это быстро.

    А то я указал одни параметры, у меня картинка в одном месте, а ссылка в другом месте :D

    Ответить

    Степка
    Степка ответил(а) на комментарий:

    В начале, я ориентировочно ставлю, потом уже подгоняю.

    Ответить

Добавить комментарий

;-) :| :x :twisted: :smokes: :smile: :shock: :sad: :rose: :roll: :razz: :pop-corne: :oops: :o :mrgreen: :lol: :idea: :grin: :gazeta: :evil: :cry: :cool: :coffe: :arrow: :???: :?: :!:

Подписаться на обновления:

Подпишись на обновления моего блога через e-m@il:

@

Реклама на блоге:

Мои цели на
2017 год:

Довести количество статей до 150

Доделать этот блог

Закончить тему «Основы CSS»

Закончить тему «Основы PHP»

Начать тему «Основы JavaScript»

Добиться посещаемости 500 чел/сутки

Статистика:

Записей: 104
Страниц: 3
Рубрик: 9
Меток: 11
Комментариев: 245