Руководство по HTML5
Адам Фриман
Вставка рисунка
Элемент img
позволяет вставить в HTML документ рисунок. В таблице 15-2 представлен этот элемент, который является одним из наиболее широко используемых в HTML.
Таблица 15-2: Элемент img
Элемент | img |
Тип элемента | Фразовый |
Разрешенные родительские элементы | Любой элемент, который может содержать фразовый контент |
Локальные атрибуты | src , alt , height , width , usemap , ismap |
Содержание | Нет |
Стиль тегов | Тег пустого элемента |
Новый в HTML5 | Нет |
Изменения в HTML5 | В HTML5 устарели атрибуты border , longdesc , name , align , hspace и vspace |
Соглашение по стилям | Нет |
Чтобы вставить рисунок, нужно использовать атрибуты src
и alt
, как показано в листинге 15-1.
Листинг 15-1: Вставка рисунка
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<meta name="author" content="Adam Freeman" />
<meta name="description" content="A simple example" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
</head>
<body>
Here is a common form for representing the three activities in a triathlon.
<p>
<img src="triathlon.png" alt="Triathlon Image" width="200" height="67" />
</p>
The first icon represents swimming, the second represents cycling and the third
represents running.
</body>
</html>
Атрибут src
определяет URL для изображения, которое вы хотите вставить. В данном случае я указал относительный URL для файла с рисунокм triathlon.png. Атрибут alt
определяет резервный контент для элемента img
. Этот контент будет показан, если рисунок не может быть отображен (либо потому что изображение не может быть найдено, поскольку формат изображения не поддерживается браузером, либо потому что браузер или устройство пользователя не может отобразить рисунок). Это изображение представлено на рисунке 15-1.
Рисунок 15-1: Вставка рисунка при помощи элемента img
Вы можете использовать атрибуты width
и height
, чтобы указать размер (в пикселях) изображения, представленного элементом img
. Изображения не загружаются, пока не будет обработана HTML разметка. Это обозначает, что если опустить атрибуты width
и height
, браузер не будет знать, как много места нужно выделить для изображения на экране. Как следствие, браузер должен сам определить размер по файлу рисунка, а затем переставить содержимое на экране, чтобы разместить этот рисунок. Для пользователей, которые, возможно, уже начали читать текст, содержащийся непосредственно в HTML, это может быть немного неприятным моментом. Указание атрибутов width
и height
дает браузеру возможность правильно разместить элементы на странице, даже если изображение еще не загружено.
Внимание
Атрибуты
width
иheight
говорят браузеру, каков размер изображения, а не то, каким бы вы хотели его видеть. Вы не должны использовать эти атрибуты для изображений, которые динамически меняют размер.
Вставка рисунка в гиперссылку
Довольно распространенным использованием элемента img
является создание гиперссылки на основе рисунка в сочетании с элементом a
(который я описал в главе 8). Это аналог кнопки для отправки формы, создаваемой при помощи изображения (см. главу 12). В листинге 15-2 показано, как можно вместе использовать элементы img
и a
.
Листинг 15-2: Использование элементовimg
иa
для создания серверной карты-изображения
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<meta name="author" content="Adam Freeman" />
<meta name="description" content="A simple example" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
</head>
<body>
Here is a common form for representing the three activities in a triathlon.
<p>
<a href="otherpage.html">
<img src="triathlon.png" ismap alt="Triathlon Image"
width="200" height="67" />
</a>
</p>
The first icon represents swimming, the second represents cycling and the third
represents running.
</body>
</html>
Как вы видите по рисунку 15-2, браузер представляет это изображение обычным образом. Поэтому важно дать пользователю визуальный сигнал, что изображение представляет особый гиперссылку. Это можно сделать при помощи CSS или, что предпочтительно, при помощи содержания изображения.
Рисунок 15-2: Вставка рисунка в гиперссылку
Если вы кликнете на изображение, браузер перейдет по адресу, указанному в атрибуте href
родительского элемента a
. Если вы примените к элементу img
атрибут ismap
, вы создадите серверную карту-изображение, то есть область изображения, на которую мы нажимаем, относится к определенному URL. Например, если вы нажмете 4 пикселя сверху и 10 пикселей слева от края изображения, браузер перейдет к следующему:
http://titan/listings/otherpage.html?10,4
(Очевидно, что этот URL используется потому, что я загрузил оригинальный HTML документ с моего сервера разработки, titan
, и атрибут href
элемента a
является относительным URL). В листинге 15-3 показано содержание страницы otherpage.html
, которая содержит простой скрипт для отображения координат клика.
Листинг 15-3: Содержание otherpage.html
<!DOCTYPE HTML>
<html>
<head>
<title>Other Page</title>
</head>
<body>
<p>The X-coordinate is <b><span id="xco">??</span></b></p>
<p>The Y-coordinate is <b><span id="yco">??</span></b></p>
<script>
var coords = window.location.href.split('?')[1].split(',');
document.getElementById('xco').innerHTML = coords[0];
document.getElementById('yco').innerHTML = coords[1];
</script>
</body>
</html>
Результат клика мышки можно увидеть на рисунке 15-3.
Рисунок 15-3: Отображение координат клика мышки по рисунку, встроенному в ссылку
Предположение с серверной картой-изображением заключается в том, что сервер действует по-разному, когда пользователь щелкает мышкой по различным областям изображения, и возможно, возвращает разные ответы. Если у элемента img
опустить атрибут ismap
, координаты мыши не будут включены в запрашиваемый URL.
Создание клиентской карты-изображения
Вы можете создать клиентскую карту-изображение, когда нажатие на разные области изображения приводит к тому, что браузер переходит по различным URL. Это делается без необходимости запрашивать направление от сервера, что обозначает, что вы должны определить области изображения и действия, к которым они приводят. Ключевым элементом клиентской карты-изображения является map
, который представлен в таблице 15-3.
Таблица 15-3: Элемент map
Элемент | map |
Тип элемента | Элемент map считается фразовым элементом, если он содержит фразовый контент, и потоковым элементом, если он содержит потоковый контент |
Разрешенные родительские элементы | Любой элемент, который содержит фразовый или потоковый контент |
Локальные атрибуты | name |
Содержание | Один или несколько элементов area |
Стиль тегов | Открывающий и закрывающий теги |
Новый в HTML5 | Нет |
Изменения в HTML5 | Если используется атрибут id , он должен иметь то же значение, что и атрибут name |
Соглашение по стилям | Нет |
Элемент map
содержит один или несколько элементов area
, каждый из которых обозначает место на рисунке, куда можно кликнуть. В таблице 15-4 представлен элемент area
.
Таблица 15-4: Элемент area
Элемент | area |
Тип элемента | Фразовый |
Разрешенные родительские элементы | Элемент map |
Локальные атрибуты | alt , href , target , rel , media , hreflang , type , shape , coords |
Содержание | Нет |
Стиль тегов | Тег пустого элемента (void) |
Новый в HTML5 | Нет |
Изменения в HTML5 | В HTML5 появились атрибуты rel , media и hreflang . Устарел атрибут nohref |
Соглашение по стилям | area { display: none; } |
Атрибуты для элемента area
можно разбить на две категории: одни атрибуты имеют дело с URL, к которому будет переходить браузер, если пользователь нажмет на область изображения, которую представляет этот элемент area
. Данные атрибуты описаны в таблице 15-5, и они похожи на соответствующие атрибуты, которые вы видели у других элементов.
Таблица 15-5: Атрибуты элемента area
, которые относятся к целевому документу
Атрибут | Описание |
href |
URL, который должен отобразить браузер, если пользователь кликнул на эту область изображения. |
alt |
Альтернативный контент. См. соответствующий атрибут элемента img . |
target |
Браузерный контент, в котором должен отобразиться URL. См. соответствующий атрибут элемента base в главе 7. |
rel |
Описывает отношения между текущим и целевым документами. См. соответствующий атрибут элемента link в главе 7. |
media |
Носители и устройства, для которых действительна эта область изображения. См. соответствующий атрибут элемента style в главе 7. |
hreflang |
Язык целевого документа. |
type |
MIME-тип целевого документа |
href |
URL, который должен отобразить браузер, если пользователь кликнул на эту область изображения |
Более интересные атрибуты образуют вторую категорию: атрибуты shape
и coords
. Они используются для обозначения областей изображения, на которые может кликнуть пользователь. Атрибуты shape
и coords
используются вместе. Значение атрибута coords
зависит от значения атрибута shape
, как описано в таблице 15-6.
Таблица 15-6: Значения атрибутовshape
иcoords
Значение shape |
Природа и смысл значения coords |
rect |
Эта величина представляет собой прямоугольную область. Атрибут coords должен состоять из четырех разделенных запятыми целых чисел, представляющих следующие расстояния:
|
circle |
Эта величина представляет собой область круга. Атрибут coords должен состоять из трех разделенных запятыми целых чисел, представляющих следующее:
|
poly |
Эта величина представляет собой многоугольник. Атрибут coords должен состоять не менее чем из шести разделенных запятыми чисел, каждая пара которых представляет собой точку на многоугольнике.
|
default |
Это значение является областью по умолчанию, которая охватывает все изображение. Если для атрибута shape используется это значение, то значение coords не требуется.
|
Теперь, когда я описал элементы, мы можем перейти к примеру. Одна из трудностей показа примеров для карт-изображений заключается в том, что элементы area
не видны на экране браузера. Поэтому на рисунке 15-4 представлены две области изображения triathlon.png
из предыдущего раздела, с которыми мы будем работать. Для простоты я делаю обе области прямоугольной формы.
Рисунок 15-4: Определение областей для карты-изображения
По этому рисунку мы можем создать элементы map
и area
, как показано в листинге 15-4.
Листинг 15-4: Создание карты-изображения
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<meta name="author" content="Adam Freeman" />
<meta name="description" content="A simple example" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
</head>
<body>
Here is a common form for representing the three activities in a triathlon.
<p>
<img src="triathlon.png" usemap="#mymap" alt="Triathlon Image" />
</p>
The first icon represents swimming, the second represents cycling and the third
represents running.
<map name="mymap">
<area href="swimpage.html" shape="rect" coords="3,5,68,62" alt="Swimming" />
<area href="cyclepage.html" shape="rect" coords="70,5,130,62" alt="Running" />
<area href="otherpage.html" shape="default" alt="default" />
</map>
</body>
</html>
Обратите внимание на добавление атрибута usemap
элементу img
. Значение этого атрибута должно быть хэш-ссылкой, которая обозначает строку, начинающуюся с символа #
, за которым следует значение атрибута name
карты, которую вы хотите использовать: в данном случае это #mymap
. Таким способом вы связываете элемент map
с изображением.
Если пользователь нажмет на часть изображения, где показано плавание, браузер перейдет на swimpage.html
. Если пользователь нажмет на часть изображения, где показана езда на велосипеде, браузер перейдет на cyclepage.html
. Нажатие на другую область изображения приведет к тому, что браузер перейдет на otherpage.html
.
Совет
Обратите внимание, что при работе с клиентскими картами-изображениями вам не нужно использовать элемент
a
, чтобы явно создать гиперссылку.