Логотип schoolsw3.com
Учебники Справочники Упражнения КАК? Меню
Создать
Редактор Поддержка Форум

×
Учебники
Справочники
Упражнения
Пожертвовать Обновление Реклама Видео Магазин

HTML Справочник

HTML Теги по алфавиту HTML Теги по категориям HTML Поддержка браузера HTML Атрибуты тегов HTML Глобальные атрибуты HTML События атрибутов HTML Название цвета HTML Canvas HTML Аудио/видео HTML Наборы символов HTML Типы документов HTML URL Кодировка HTML Код языка HTML Код страны HTTP Сообщения ошибок HTTP Методы GET/POST HTML Конвертер PX в EM HTML Комбинация клавиш

HTML Теги

Тег <!--Комментарий--> Тег <!DOCTYPE> Тег <a> Тег <abbr> Тег <acronym> Тег <address> Тег <applet> Тег <area> Тег <article> Тег <aside> Тег <audio> Тег <b> Тег <base> Тег <basefont> Тег <bdi> Тег <bdo> Тег <big> Тег <blockquote> Тег <body> Тег <br> Тег <button> Тег <canvas> Тег <caption> Тег <center> Тег <cite> Тег <code> Тег <col> Тег <colgroup> Тег <data> Тег <datalist> Тег <dd> Тег <del> Тег <details> Тег <dfn> Тег <dialog> Тег <dir> Тег <div> Тег <dl> Тег <dt> Тег <em> Тег <embed> Тег <fieldset> Тег <figcaption> Тег <figure> Тег <font> Тег <footer> Тег <form> Тег <frame> Тег <frameset> Тег <h1> - <h6> Тег <head> Тег <header> Тег <hr> Тег <html> Тег <i> Тег <iframe> Тег <img> Тег <input> Тег <ins> Тег <kbd> Тег <label> Тег <legend> Тег <li> Тег <link> Тег <main> Тег <map> Тег <mark> Тег <meta> Тег <meter> Тег <nav> Тег <noframes> Тег <noscript> Тег <object> Тег <ol> Тег <optgroup> Тег <option> Тег <output> Тег <p> Тег <param> Тег <picture> Тег <pre> Тег <progress> Тег <q> Тег <rp> Тег <rt> Тег <ruby> Тег <s> Тег <samp> Тег <script> Тег <section> Тег <select> Тег <small> Тег <source> Тег <span> Тег <strike> Тег <strong> Тег <style> Тег <sub> Тег <summary> Тег <sup> Тег <svg> Тег <table> Тег <tbody> Тег <td> Тег <template> Тег <textarea> Тег <tfoot> Тег <th> Тег <thead> Тег <time> Тег <title> Тег <tr> Тег <track> Тег <tt> Тег <u> Тег <ul> Тег <var> Тег <video> Тег <wbr>


HTML Тег <map>



Пример

Карта изображений с кликабельными областями:

<img src="workplace.jpg" alt="Рабочее место" usemap="#workmap" width="400" height="379">

<map name="workmap">
  <area shape="rect" coords="34,44,270,350" alt="Компьютер" href="computer.htm">
  <area shape="rect" coords="290,172,333,250" alt="Телефон" href="phone.htm">
  <area shape="circle" coords="337,300,44" alt="Чашка кофе" href="coffee.htm">
</map>
Попробуйте сами »


Определение и использование <map>

Тег в HTML <map> используется для определения карты изображений. Карта изображений - это изображение с кликабельными областями.

Атрибут name обязателен для элемента <map>, связан с атрибутом usemap и создает связь между <img> и картой.

Элемент <map> содержит ряд элементов, определяющих кликабельные области <area> на карте изображений.


Поддержка браузеров <map>

Элемент
<map> Да Да Да Да Да

Атрибуты <map>

Атрибут Значение Описание
name mapname Требуемый. Задает имя карты изображений

Глобальные атрибуты <map>

Тег <map> также поддерживает Глобальные атрибуты в HTML.


События атрибутов <map>

Тег <map> также поддерживает События атрибутов в HTML.


Еще примеры <map>

Пример

Еще одна карта изображений, с кликабельными областями:

<img src="planets.gif" width="145" height="126" alt="Планеты"
usemap="#planetmap">

<map name="planetmap">
 <area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Солнце">
 <area shape="circle" coords="90,58,3" href="mercur.htm" alt="Меркурий">
 <area shape="circle" coords="124,58,8" href="venus.htm" alt="Венера">
</map>
Попробуйте сами »

Связные страницы <map>

HTML DOM справочник: Объект map


Настройки CSS по умолчанию <map>

Большинство браузеров будут отображать элемент <map> со следующими значениями по умолчанию:

map {
  display: inline;
}