Выбор элементов в jquery

Алан-э-Дейл       10.03.2024 г.

Синхронизация между атрибутами и свойствами

Когда стандартный атрибут изменяется, соответствующее свойство автоматически обновляется. Это работает и в обратную сторону (за некоторыми исключениями).

В примере ниже модифицируется как атрибут, и можно увидеть, что свойство также изменено. То же самое работает и в обратную сторону:

Но есть и исключения, например, синхронизируется только в одну сторону – атрибут → значение, но не в обратную:

В примере выше:

  • Изменение атрибута обновило свойство.
  • Но изменение свойства не повлияло на атрибут.

Иногда эта «особенность» может пригодиться, потому что действия пользователя могут приводить к изменениям , и если после этого мы захотим восстановить «оригинальное» значение из HTML, оно будет в атрибуте.

Собираем инструменты[править]

Текстовый редакторправить

Первым делом, нам понадобится текстовый редактор. Текстовый редактор есть на каждом компьютере

Важно заметить: нам нужна программа для редактирования текстовых файлов, а не документов (то есть ни в коем случае нельзя использовать текстовые препроцессоры по типу Microsoft Word). Обычно стандартного «Блокнота» Windows достаточно, но есть текстовые редакторы, которые лучше приспособлены к написанию HTML-страниц

Неплохие редакторы Notepad ++, Brackets, Atom, Sublime Text в которых хорошо писать не только HTML, CSS, но и ещё несколько десятков других языков программирования и разметки. У них есть несколько удобных функций,таких как подсветка синтаксиса, которая позволяет выявлять ошибки прямо во время их создания, автоматическое дополнение тегов, что позволит сэкономить время на написание кода и многое другое.

Браузерправить

О браузере также стоит сказать несколько слов. Все советуют держать у себя на компьютере набор браузеров: Firefox, Opera, Chrome, Safari и просматривать свои страницы во всех сразу. Правда, функции тегов в разных браузерах отличаются не сильно (а с введением HTML5 — различий в тегах нет). Поэтому учиться можно просматривая свои страницы в одном из них, а уже когда пишете что-то большее — посмотрите, не имеется ли слишком критических различий во всех других. Тем не менее, в современных и наиболее популярных браузерах Firefox и Chrome различия настолько незначительны и касаются в основном старых тегов.

Основные селекторы

Основные селекторы вам знакомы, если вы когда-нибудь создавали хотя бы один шаблон CSS. скорее всего, вы будете использовать данные селекторы на протяжении 90% всего времени работы с jQuery:

Селектор Описание Пример
Все Выбирает все элементы на странице, включая , и так далее.
Элемент Выбирает все элементы с заданным тегом.
Класс Выбирает все элементы с заданным именем класса.
ID Выбирает один элемент с заданным атрибутом .

Вы также можете комбинировать несколько селекторов в один с помощью запятой. jQuery выберет все элементы, которые соответствуют любому из селекторов. Например:

// Выбирает все div с классом .myClass, а также все параграфы
var selectedElements = $("div.myClass, p");

Селектор [attribute]

Устанавливает стиль для элементов, у которых присутствует указанный атрибут. Значение атрибута при этом не учитывается. В качестве селектора используются квадратные скобки, внутри которых пишется произвольный атрибут.

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

Чтобы сузить число элементов, перед квадратными скобками ставится имя элемента без пробелов.

В данном случае выбираются только элементы <a>, к которым добавлен атрибут target с произвольным значением.

В примере 1 показано изменение стиля элемента <textarea>, когда к нему добавляется атрибут readonly.

Пример 1. Вид элемента в зависимости от его атрибута

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Селекторы атрибутов</title>
<style>
textarea {
height: 100px; /* Высота поля */
}
textarea {
background: #f0f0f0; /* Цвет фона */
opacity: 0.8; /* Значение прозрачности */
}
</style>
</head>
<body>
<textarea>Это обычное текстовое поле, его можно редактировать.</textarea>
<textarea readonly>Это текстовое поле только для чтения, вы не можете его изменить.</textarea>
</body>
</html>

В данном примере селектор textarea устанавливает стиль для всех элементов <textarea>, а селектор textarea для элементов <textarea>, к которым добавлен атрибут readonly. Результат примера показан на рис. 1.

Рис. 1. Изменение стиля элемента в зависимости от наличия атрибута readonly

Учтите, что атрибут у элемента должен присутствовать явно. К примеру, для <input> атрибут type по умолчанию равен text, но селектор input будет работать для <input type=»text»> и не будет для <input>, хотя сами элементы отображаются одинаково.

Примеры

В следующих примерах мы рассмотрим некоторые из атрибутов тега form с несколькими элементами управления.

В нашем первом примере создается простая форма авторизации с тремя элементами: текстовое поле, поле для ввода пароля и кнопка отправки данных. Тег form action и method указывают местоположение скрипта, отвечающего за обработку данных формы, и метод, используемый для их отправки.

Атрибут target определяет вывод результатов в новом окне/вкладке. Страница, на которой будут выведены результаты обработки, специально предназначена для того, чтобы вы поняли механизм работы форм. Скрипт формы выполняется на сервере до вывода результатов.

<form action="../../form-result.php" method="post" target="_blank">
 <p>Username: <input type="text" name="user"></p>
 <p>Password: <input type="password" name="pass"></p>
 <p><input type="submit" value="Send data"></p>
</form>

Во втором примере мы добавим в тег form новые элементы управления (пару переключателей и три чекбокса). Мы также добавим кнопку reset, чтобы вы могли поэкспериментировать с элементами управления, изменяя их значения и снова сбрасывая с помощью кнопки.

Также мы будем использовать элемент label. С его помощью мы можем связать текст с элементом управления. Самый простой способ сделать это — заключить и текст, и элемент управления в открывающийся и закрывающийся тег.

<form action="../../form-result.php" method="post" target="_blank">
  <p><label>Full name: <input type="text" name="fullname"></label></p>
  <p>Gender:
    <label><input type="radio" name="gender" value="male"> Male</label>
    <label><input type="radio" name="gender" value="female"> Female</label>
  </p>
  <p><label>Address: <input type="text" name="address"></label></p>
  <p>Interests:
    <label><input type="checkbox" name="books"> Books</label>
    <label><input type="checkbox" name="movies"> Movies</label>
    <label><input type="checkbox" name="videogames"> Videogames</label>
  </p>
  <p><input type="submit" value="Send data"> <input type="reset" value="Reset form"></p>
</form>

В следующем примере мы немного изменим предыдущий HTML тег form форму, чтобы добавить некоторые из новых элементов управления HTML5: выбора даты, поле ввода номера телефона и выбор цвета. Кроме этого мы сгруппируем элементы управления с помощью fieldset.

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

Обратите внимание, что мы используем для атрибута method значение «GET» просто для разнообразия. Это позволит при открытии нового окна с результатами обработки данных формы увидеть в адресной строке браузера пару имя / значение

Что-то наподобие этого: «?fullname=john&birthdate=15/10/2002&…».

<form action="../../form-result.php" method="get" target="_blank">
  <fieldset>
    <legend>Basic information</legend>
    <p><label>Full name: <input type="text" name="fullname"></label></p>
    <p><label>Birth date: <input type="date" name="birthdate"></label></p>
    <p>Gender:
      <label><input type="radio" name="gender" value="male"> Male</label>
      <label><input type="radio" name="gender" value="female"> Female</label>
    </p>
    <p><label>Address: <input type="text" name="address"></label></p>
    <p><label>Phone number: <input type="tel" name="phone"></label></p>
  </fieldset>
  <fieldset>
    <legend>Extra information</legend>
    <p>Interests:
      <label><input type="checkbox" name="books"> Books</label>
      <label><input type="checkbox" name="movies"> Movies</label>
      <label><input type="checkbox" name="videogames"> Videogames</label>
    </p>
    <p><label>Favorite color: <input type="color" name="favoritecolor"></label></p>
  </fieldset>
  <p>
    <input type="submit" value="Send data">
    <input type="reset" value="Reset form">
  </p>
</form>

И, наконец, мы создадим тег form с возможностью загрузки файла

В этом примере нам нужно обратить внимание на пару атрибутов: method, который может принимать только значение «POST», так как это единственный метод, который может передавать двоичные данные. И enctype, который должен иметь значение «multipart/form-data»

Если данная настройка не соблюдается, загрузка файлов будет невозможна.

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

<form action="../../form-result.php" method="post" enctype="multipart/form-data" target="_blank">
  <p><label>File: <input type="file" name="ufile"></label> <input type="submit" value="Send data"></p>
</form>

Атрибут alt

Вы уже знаете, что изображения вставляются в Web-страницы с помощью одинарного тега <img>. Атрибут alt добавляется внутрь тera <img> и определяет для добавленноrо на WеЬ-страницу rpaфическоrо элемента альтернативный текст. Этот текст называется альтернативным, поскольку может отображаться на экране как альтернатива самому изображению.

В следующем примере вы увидите, как браузер работает с атрибутом alt, когда появляется «отсутствующее» изображение. Если рисунок не может быть найден или по какой-то причине не загружается, вместо него выводится значение атрибута alt. Поменяйте имя файла с изображением с orange.jpg на pencil.jpg. На самом деле такого файла не существует, поэтому вы получите «отсутствующее» изображение.

Добавление нового атрибута

При добавлении нового атрибута

  • основные – ввод основной информации об атрибуте;
  • визуал – выбор визуального представления атрибута;
  • версионность значений – определение зависимости значения атрибута от времени;
  • дополнительное – ввод иных (некритичных) характеристик атрибута.

типа «Строка»ввод его наименованиявнимательно указывать требуемые параметры атрибута

К основным параметрам атрибута относятся:

Параметр Значение
Наименование Название добавляемого атрибута
Наименование поля в таблице Название атрибута для отображения в таблице базы данных.
Тип Раскрывающийся список типов данных; содержит набор значений: строка, целое 32-битное, дата, логический, дочерний объект и т.д. Рассмотрено далее. После сохранения атрибута, изменение этого значения невозможно.
Объект Выбор типа объекта, экземпляры которого являются значением для текущего атрибута. Параметр доступен в случае настройки атрибута типа «Объект» или «Дочерний объект».
Множественный выбор Признак, определяющий множественный выбор объектных атрибутов. Параметр доступен в случае настройки атрибута типа «Объект» или «Дочерний объект». В случае выбора данного признака, можно указать какое именно поле (атрибут) выводить в раскрывающийся список объектных атрибутов. Наименование необходимого атрибута нужно выбрать в поле «Поле по которому будет выводиться экземпляр типа» на вкладке «Дополнительное» карточки атрибута Примечание: исключено использование атрибутов типа multiselect, дочерний объект, пользовательский.
Пересохранять родителя Признак, определяющий сохранение родительского объекта в случае сохранения дочернего (текущего). Параметр доступен в случае настройки атрибута типа «Дочерний объект».
Связь Выбор атрибута связи дочернего объекта с родительским. Выбор ограничен атрибутами указанного типа объекта в поле «Тип объекта». Параметр доступен в случае настройки атрибута типа «Дочерний объект».
Идентификатор Уникальное значение элемента системы. Может быть сформирован автоматически. Идентификатор должен начинаться с буквы латинского алфавита и состоять из них, цифр, знака подчеркивания.
Значение по умолчанию – текущая дата Признак, определяющий значение по умолчанию для атрибута как текущую дату. Параметр доступен в случае настройки атрибута типов «Дата» и «Дата и время.
Обязательность Определение обязательности ввода значения для атрибута. Возможные варианты:
Алгоритм обязательности Выбор\ ввод алгоритма, определяющего обязательность ввода значения атрибута. Поле доступно в случае выбора значения «Алгоритм» в предыдущем параметре.
Значение по умолчанию Ввод значения атрибута, которое будет указано автоматически, если атрибут еще не был заполнен.

следующие значения не подлежат корректировке:

  • наименование поля для таблицы;
  • тип;
  • идентификатор;
  • способ формирования атрибута: »стандартный или на основе источника».

СтандартноеНа основе источникаисточниковский атрибутисточником данных

типа атрибута Используемые типы значений атрибутов

  • целочисленный тип – целое число;
  • вещественный тип – число с плавающей запятой;
  • строковый тип – значение до 2000 символов. Представляет собой слово, короткий текст;
  • логический тип – данные, которые принимают значения: false (ложь) или true (истина);
  • текстовый тип – значение, представленное текстом. Используется для ввода какого либо описания;
  • дата – значение является датой формата DD.MM.YYYY;
  • объектный тип – значением является экземпляр определенного типа объекта;
  • и т.д.

могут быть выстроены иерархическидочерний тип объектаОбъекты системы»Последовательность отображенияПорядок дочерних и объектных атрибутах

визуалеалгоритмеОбъектный атрибут является цепочечным.не используется в алгоритмах стилизации, сортировки, группировки и фильтрации данных

настройки атрибута

Селектор [attribute*=»value»]

Позволяет выбрать элементы, у которых значение атрибута содержит указанный текст. При этом текст может быть в начале, в середине или в конце. К примеру, для выбора всех элементов, у которых класс содержит view, используется следующая запись.

При этом цвет изменится для элементов с классом view, view-block, viewer, overview или block-view.

В примере 4 показано изменение стиля ссылок, в атрибуте href которых встречается слово «github». Для таких ссылок мы добавляем иконку, показывающую принадлежность к GitHub.

Пример 4. Стиль для сайта GitHub

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Селекторы атрибутов</title>
<style>
a { /* Ссылка содержит github */
background: url(/example/image/if_GitHub.png) no-repeat 100% 50%; /* Добавляем фоновый рисунок */
padding-right: 24px; /* Смещаем текст влево */
}
</style>
</head>
<body>
<p><a href=»https://ya.ru»>Яндекс</a> |
<a href=»https://github.com»>GitHub</a></p>
</body>
</html>

Результат данного примера показан на рис. 4.

Рис. 4. Изменение стиля ссылки

Дополнительные элементы и атрибуты

  • Label for:
  • Для элементов управления radio и checkbox удобно использовать дополнительные элементы, которые, во-первых, делают привязку текста к самому элементу radio или checkbox, во-вторых, добавляют обводку при клике:
<input type="checkbox" id="book1">
<label for="book1">ASP<label>

В примере создана надпись (тег ) для элемента . Привязка осуществляется через атрибут , значение которого указано в атрибуте надписи.

Результат:

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

<input type="text" name="login" size="20" value="Логин" maxlength="25" disabled="disabled"><br>
<input type="checkbox" name="asp" value="yes">ASP<br>
<input type="checkbox" name="js" value="yes" checked="checked"  disabled="disabled">javascript<br>


 Результат:

Атрибут readonly:
Атрибут делает текстовые документы доступными только для чтения (вносить и изменять текст нельзя):

<input type="text" name="login" size="20" value="Логин" 
maxlength="25" readonly="readonly">


  Результат:

Элемент fieldset:
Для визуального оформления группы объектов можно использовать элемент :

<fieldset>
<legend>Книги<legend>
<input type="checkbox" value="html">HTML<br>
<input type="checkbox" value="asp">ASP<br>
<input type="checkbox" value="js">javaScript<br>
<fieldset>

Результат:

Атрибут tabindex:
Можно задать очередность передвижения по элементам клавишей :

<элемент tabindex="1">

Элемент будет первым в очереди переходов.

Задание: Необходимо создать анкету web-разработчика согласно изображению. Элементы располагать в табличном виде

Селектор [attribute$=»value»]

Устанавливает стиль для элемента, когда значение атрибута оканчивается указанным текстом. К примеру, для выбора всех элементов, у которых класс завершается view, используется следующая запись.

При этом цвет изменится для элементов с классом view, block-view, overview, но не view-block или viewer.

Таким способом можно автоматически разделять стиль для ссылок на сайты домена ru и для ссылок на сайты других доменов вроде com, как показано в примере 5.

Пример 5. Стиль для разных доменов

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Селекторы атрибутов</title>
<style>
a { /* Ссылка оканчивается на .ru */
background: url(/example/image/ru.png) no-repeat 0 50%; /* Добавляем фоновый рисунок */
padding-left: 18px; /* Смещаем текст вправо */
}
a { /* Ссылка оканчивается на .com */
background: url(/example/image/com.png) no-repeat 0 50%;
padding-left: 18px;
}
</style>
</head>
<body>
<p><a href=»//ya.ru»>Яндекс</a> |
<a href=»//google.com»>Google</a></p>
</body>
</html>

В данном примере содержатся две ссылки, ведущие на разные домены — com и ru. При этом к каждой такой ссылке с помощью стилей добавляется своя фоновая картинка (рис. 5). Стилевые свойства будут применяться только для тех ссылок, атрибут href которых оканчивается на «.ru» или «.com». Заметьте, что добавив к имени домена косую черту (//ya.ru/) или адрес страницы (//ya.ru/search), мы изменим тем самым окончание и стиль применяться уже не будет.

Рис. 5. Добавление картинки к ссылкам

Селекторы атрибутов допустимо комбинировать между собой, чтобы выбрать элементы, содержащие два и более атрибута. К примеру, для элемента <input>, у которого есть атрибут type со значением password и атрибут required, запись будет следующей.

Атрибут lang

Всегда подключайте атрибут внутри тега ,
чтобы объявить язык веб страницы. Это делается для того, чтобы помочь поисковым системам и браузерам.

В следующем примере в качестве языка указывается русский язык:

<!DOCTYPE html><html lang=»ru»><body>…</body></html>

Коды стран также могут быть добавлены к коду языка в разделе атрибута .
Таким образом, первые два символа определяют язык HTML страницы, а последние два символа определяют страну.

В следующем примере в качестве языка указан русский, а в качестве страны — РОССИЯ:

<!DOCTYPE html><html lang=»ru-RU»><body>…</body></html>

Вы можете увидеть все языковые коды в нашем приложении.
HTML Справочник код языка.

picture

Тег предоставляет возможность использования нескольких источников для изображения (нескольких изображений).

Этот тег позволяет использовать разные изображения в зависимости от ширины области просмотра (viewport width) вместо масштабирования одного изображения.

Элемент содержит два тега: один или более и один .

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

Путь к изображению указывается в атрибуте , а медиа-запрос — в атрибуте .

Выбор элементов по их положению

Иногда нужно выбрать элемент, про который известно, что он расположен в наборе ранее выбранных элементов. Например, нужно выделить первый параграф, который имеет класс . Для усложнения примера допустим, что нужно выбрать все пункты в списке, который имеет класс , а затем выбрать 5-й пункт из получившегося набора.

jQuery имеет семь селекторов, которые можно использовать для ограничения области поиска на основе позиции элемента:

Селектор Описание Примеры
Выбирает первый элемент в наборе отобранных элементов.
Выбирает последний элемент в наборе отобранных элементов.
Выбирает единственный элемент в наборе отобранных элементов. Выбор элемента осуществляется по последовательному номеру индекса ( = первый элемент, = второй и так далее).
Выбирает элементы в наборе отобранных элементов, которые расположены перед элементом с заданным индексом. Например, если задан индекс (то есть 3-й элемент), то будут выбраны первые 2 элемента (с индексами 0 и 1).
Выбираем элементы в наборе отобранных элементов, которые расположены после элемента с заданным индексом. Например, если задан индекс 2 (то есть 3-й элемент), то будут выбраны все элементы после третьего.
Выбирает все элементы с четными индексами в наборе отобранных элементов. Заметьте, что индексы начинаются с 0, таким образом в действительности отбираются 1-й, 3-й и так далее элементы.
Выбирает все элементы с нечетными индексами в наборе уже отобранных элементов. Заметьте, что индексы начинаются с 0, таким образом в действительности отбираются 2-й, 4-й и так далее элементы

Отметим, что данные селекторы не работают также как ,, и так далее. Например, выбирает только пункт списка с классом , который является первым пунктом в соответствующем списке. А находит все пункты списка на странице, которые имеют класс  , а затем выбирает первый пункт списка в наборе результата поиска.

В следующем примере выбираются все ячейки  в первых двух строках таблицы, которая имеет ID :

var selectedElements = $("table#myTable tr:lt(2) > td");

5 последних уроков рубрики «HTML5»

  • В этом уроке я покажу процесс создания собственных HTML тегов. Пользовательские теги решают множество задач: HTML документы становятся проще, а строк кода становится меньше.

  • Сегодня мы посмотрим, как можно организовать проверку доступности атрибута HTML5 с помощью JavaScript. Проверять будем работу элементов details и summary.

  • HTML5 — глоток свежего воздуха в современном вебе. Она повлиял не только на классический веб, каким мы знаем его сейчас. HTML5 предоставляет разработчикам ряд API для создания и улучшения сайтов с ориентацией на мобильные устройства. В этой статье мы рассмотрим API для работы с вибрацией.

  • Веб дизайнеры частенько сталкиваются с необходимостью создания форм. Данная задача не простая, и может вызвать головную боль (особенно если вы делаете что-то не стандартное, к примеру, много-страничную форму). Для упрощения жизни можно воспользоваться фрэймворком. В этой статье я покажу вам несколько практических приёмов для создания форм с помощью фрэймворка Webix.

  • Знакомство с фрэймворком Webix

    В этой статье мы бы хотели познакомить вас с фрэймворком Webix. Для демонстрации возможностей данного инструмента мы создадим интерфейс online аудио плеера. Не обольщайтесь — это всего лишь модель интерфейса. Исходный код доступен в демо и на странице GitHub.

Элементы оформления[править]

Подведём чертуправить

Иногда вы что-то пишете, пишете, и вдруг чувствуете что нужно подвести черту.

Делается это просто как новая строка: <hr /> (horisontal ruler). Вообще-то в этом теге есть атрибуты, которые настраивают внешний вид, но их использование в новых стандартах нежелательно. Разрешены только общие атрибуты, такие как id, class, style и атрибуты событий, но это темы следующего раздела.

Картинкиправить

До этого момента мы прочитали очень много текста о тексте. Конечно — текст важнейшая часть любой страницы (если конечно это не страница какой-либо галереи), но сплошной текст штука довольно скучная. Иллюстрированный текст выглядит намного лучше. Для вставки в текст изображения используют тег <img>. Его атрибут src задаёт источник (source) — файл, в котором содержится картинка. Этот тег одинарный, поэтому закрывающий тег не нужен.

Иногда картинки не отображаются. Это происходит по разным причинам. Тем не менее, нужно чтобы пользователь и в таких случаях знал, что вы хотели ему показать. Для этого картинки имеют атрибут alt. Он задает текст, который отображается на месте картинки в тех случаях, когда сама картинка недоступна.

Также мы можем изменить размер картинки. Например, если мы имеем маленькое изображение, мы можем его растянуть. Правда тогда оно будет отображаться несколько размыто. Также можно изменять размеры изображения вместе с изменением размеров окна браузера. Для этого размеры указывают в процентах. Размеры задаются атрибутами width и height. Пример:

<!DOCTYPE html>
<html>
   <head>
      <title>
         Картинки
      </title>
      <meta charset="utf-8" />
   </head>
   <body>
      <img src="image.jpg" alt="Маленькая картинка" title="Маленькая картинка" width="100" height="100">
      <br/>
      <img src="image.jpg" alt="Велика картинка" title="Велика картинка" width="400" height="400">
      <br />
      <img src="image.jpg" alt="Широка картинка" title="Широка картинка" width="100%" height="400">
      <br/>
   </body>
</html>

Картинки могут быть помещены между тегами <a> и </a>, тогда щелчок по ним будет аналогичным щелчку по обычным ссылкам. Вокруг картинки появится синяя рамка. Но есть ещё более интересный способ сделать из картинки гиперссылку. Это карты.

Картыправить

Изображение можно разделить на области различной формы, каждая из которых может ссылаться в другое место. Для этого с помощью тега <map> задают карту. Атрибут id идентифицирует карту и используется для связи с картинкой. Чтобы картинку назначить в качестве карты, используется атрибут usemap (в котором мы должны записать id карты). Внутри тега карты содержатся теги областей, которые задаются тегами <area>. Опять же, этот тег одинарный, и хочет чтобы его правильно закрывали. Атрибут href задаёт адрес ссылки, атрибут nohref, если назначить ему значение true, исключает зону с карты. Атрибут shape задает форму области: rect — прямоугольная, circle — круг, и poly — для многоугольника.

<!DOCTYPE html>
<html>
   <head>
      <title>
         Карта планет
      </title>
      <meta>
   </head>
   <body>
      <img src="planets.gif" width="145" height="126" usemap="#planetmap">
      <map id="planetmap" name="planetmap">
         <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm" />
         <area shape="circle" coords="90,58,3" alt="Mercury" href="mercury.htm" />
         <area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm" />
      </map>
   </body>
</html>
Гость форума
От: admin

Эта тема закрыта для публикации ответов.