Главная страница   /   15.1. Вставка рисунка (Руководство по HTML5

Руководство по HTML5

Руководство по HTML5

Адам Фриман

15.1. Вставка рисунка

Элемент 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, чтобы явно создать гиперссылку.