Как сделать карту в html
Тег служит контейнером для элементов , которые определяют активные области для карт-изображений. Такие области устанавливают невидимые зоны на изображении, являющиеся ссылками на HTML-документы. Цель использования тега — в связывании тега с клиентской картой-изображением. Эта связь определяется применением единого идентификатора как в теге
, задаваемого атрибутом usemap , так и в теге , устанавливаемого атрибутом name .
Синтаксис
Атрибуты
name Имя карты-изображения.
Закрывающий тег
HTML5 IE Cr Op Sa Fx
Статьи по теме
Как сделать карту в html
Финансовая грамотность от А до Я
Данный курс в кратчайшие сроки обучит Вас финансовой грамотности. Эти знания позволят Вам получить, как минимум, серьёзную финансовую стабильность, а, как максимум, финансовую независимость.
В рамках курса даётся большое количество практических заданий, благодаря которым Вы не просто посмотрите курс, а действительно выполните ряд важнейших шагов, о которых в нём говорится.
Помимо самого курса Вас ждёт ещё бесплатный ценный Бонус: «Ранний выход на пенсию». В рамках этого Бонуса Вы узнаете, какой должен быть капитал конкретно в Вашем случае, варианты его получения, а также какие есть стратегии вывода капитала на пенсии и где их можно протестировать.
Уроки и статьи
Подпишитесь на мой канал на YouTube, где я регулярно публикую новые видео.
Подписаться
Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.
Подписаться
Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.
Мой аккаунт Моя группа
Какая тема Вас интересует больше?
Создание карты изображений в HTML
Карта изображений (Image Map) позволяет привязывать ссылки к фрагментам изображения. Щелкая мышью на отдельных частях изображения, пользователь может переходить по той или иной ссылке на разные Web-страницы.
Карта изображения определяется парным тегом
. HTML-документ может содержать несколько карт изображения, поэтому каждой карте должно быть присвоено уникальное имя, которое определяется атрибутом name.
Карта изображения состоит из участков изображения и соответствующих им ссылок. Описывает участок изображения и ставит ему в соответствие ссылку одиночный тег .
Атрибуты тега
Координаты по умолчанию измеряются в пикселях.
Начало отсчета координат – это верхний левый угол экрана, т.е.
Примеры различных форм областей карты изображений
Если две описанных области накладываются друг на друга, то используется ссылка, принадлежащая первой из них. Эту особенность можно использовать в ситуации, когда пользователь щелкает мышью на точке, которая не принадлежит ни одной из областей карты, определив последнюю область карты как прямоугольник шириной и высотой во всю картинку.
Чтобы использовать изображение, как карту, в тег необходимо ввести дополнительный атрибут usemap, определяющий имя карты изображения. Перед этим именем ставится знак «#».
Пример использования Image Map
При кликах на различные области данного изображения меняется цвет соответствующего текста:
Область 1
Область 2
Область 3
Область 4
Применение технологии Image Map
Технология Image Map применяется в самых различных областях. Однако наиболее часто ее применение можно увидеть при создании графических меню, когда создается одно большое изображение с элементами меню, и каждому участку изображения предписывается определенное действие.
Карта изображения
Данная статья не будет связанной с Joomla, но будет достаточно интересной и полезной.
Сейчас мы с Вами научимся создавать карту изображения.
Карта изображения — это изображение, которое разделено на несколько секторов и при наводе курсора на определенный сектор происходит действие (ссылка, всплывающая надпись, выделение цветом и т.д).
Давайте на примере посмотрим, как сделать такое чудо:)
Возьмите какую-то картинку, у меня будет вот такая:
Теперь идем на один из онлайн-сервисов, я выбрал этот http://summerstyle.github.io/summer/.
Заходим на него, берем картинку, перетаскиваем в область вставки и нажимаем ОК.
После этого, картинка загрузится и мы попадем на страницу редактирования.
В меню будут доступны такие функции:
- Rectangle — Прямоугольник;
- Circle — Круг;
- Polygon — Многоугольник;
- Edit — Редактировать;
- To html — Показать html код;
- Preview — Предварительный просмотр;
- Clear — Очистить;
- New image — Новая картинка.
Давайте перейдем к созданию.
У нас есть картинка с двумя областями, чтобы их выделить, можно воспользоваться Rectangle — Прямоугольником.
Нажимаем на Rectangle и выделяем нужные области на картинке.
После выделения, нажимаем на Edit, наводим курсор на область №1 и заполняем нужные поля (href, title, alt), аналогично делаем и для области №2.
Нажимаем на to html и снизу появится код для вставки на сайт.
Далее копируем этот код и просто вставляем к себе на сайт.
Вот что должно получиться:
В коде должно быть все понятно, единственное, usemap=»#map» — это подключение карты изображения с названием map, а это имя карты — .
На этом все, в следующей статье мы посмотрим подключение Jquery к карте, и выделение секторов карты по наведению курсора.