Тег IMG

Браузер	Internet Explorer				Netтscape		Опера				Safari			Mozilla Firefox
Версия	5.5	6.0	7.0	8.0	8.0	9.0	7.0	8.0	9.2	9.5	1.3	2.0	3.1	1.5	2.0	3.0
Поддерживается	Да	Да	Да	Да	Да	Да	Да	Да	Да	Да	Да	Да	Да	Да	Да	Да

ШТМЛ:

3.2

XШТМЛ:

1.0

1.1

Описание

Тег <IMG> предназначен для отображения на web-странице рисунков в графическом формате GIF, JPEG или PNG. Этот тег имеет единственный обязательный параметр src, который определяет адрес файла с картинкой. Если необходимо, то рисунок можно сделать ссылкой на другой файл, поместив тег <IMG> в контейнер <A>. При этом вокруг Имаги отображается рамка, которую можно убрать, добавив параметр border="0" в тег <IMG>.

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

Синтаксис

Параметры

align: Определяет как рисунок будет выравниваться по краю и способ обтекания контентом.
alt: Альтернативный контент для Имаги.
border: Толщина рамки вокруг Имаги.
height: Высота Имаги.
hspace: Горизонтальный отступ от Имаги до окружающего контента.
ismap: Говорит браузеру, что картинка является серверной картой-изображением.
lowsrc: Путь к графическому файлу низкого разрешения для предварительного отображения.
src: Путь к графическому файлу.
vspace: Вертикальный отступ от Имаги до окружающего контента.
width: Ширина Имаги.
usemap: Ссылка на тег <MAP>, содержащий координаты для клиентской карты-Имаги.

Закрывающий тег

Не требуется.

Пример 1. Использование тега <IMG>

ШТМЛ 4.01IE 5.5IE 6IE 7Op 9.5Sa 3.1Ff 2.0Ff 3.0

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/HTML4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег IMG</title>
 </head>
 <body> 

  <p><a href="lorem.ШТМЛ"><img src="images/girl.png" 
  width="189" height="255" alt="lorem"></a>
  Lorem ipsum dolor sit amet...</p>

 </body>
</html>

Описание параметров тега <IMG>

Параметр ALIGN

ШТМЛ:

3.2

XШТМЛ:

1.0

1.1

Описание

Для рисунков можно указывать их положение относительно контента или других рисунков на web-странице. Способ выравнивания рисунков задается параметром align тега <IMG>.

Синтаксис

Аргументы

В табл. 1 перечислены возможные значение параметра align и результат его использования.

Табл. 1. Использование значений параметра align
Значение	Описание	Пример
bottom	Выравнивание нижней границы Имаги по окружающему контенту..	Lorem ipsum dolor sit amet, consectetuer adipiscing elit...
left	Выравнивает изображение по левоой стороне окна.	Lorem ipsum dolor sit amet, consectetuer adipiscing elit...
middle	Выравнивание середины Имаги по базовой линии текущей строки.	Lorem ipsum dolor sit amet, consectetuer adipiscing elit...
right	Выравнивает изображение по правой стороне окна.	Lorem ipsum dolor sit amet, consectetuer adipiscing elit...
top	Верхняя граница Имаги выравнивается по самому высокому элементу текущей строки.	Lorem ipsum dolor sit amet, consectetuer adipiscing elit...

Наиболее популярные параметры — left и right, создающие обтекание контента вокруг Имаги.

Значение по умолчанию

bottom

Пример 2. Выравнивание Имаги

ШТМЛ 4.01IE 5.5IE 6IE 7Op 9.5Sa 3.1Ff 2.0Ff 3.0

<!DOCTYPE ШТМЛ PUBLIC "-//W3C//DTD ШТМЛ 4.01 Transitional//EN" "http://www.w3.org/TR/ШТМЛ4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег IMG, параметр align</title>
 </head>
 <body>

  <p><img src="/images/square.gif" alt="Квадрат" width="20" height="20" 
  align="right"> Lorem ipsum dolor sit 
  amet, consectetuer adipiscing elit...</p>
 
</body>
</html>

Примечание

Дополнительные аргументы absbottom, absmiddle, baseline и texttop понимаются браузерами, но не поддерживаются спецификацией ШТМЛ 4.x/XШТМЛ 1.0.

Параметр ALT

ШТМЛ:

3.2

XШТМЛ:

1.0

1.1

Описание

Параметр alt устанавливает альтернативный контент для рисунков. Такой контент позволяет получить контентовую информацию о рисунке при отключенной в браузере загрузке рисунков. Поскольку загрузка рисунков происходит после получения браузером информации о нем, то замещающий рисунок контент появляется раньше. А уже по мере загрузки контент будет сменяться изображением.

Браузеры также отображают альтернативный контент в виде подсказки, появляющейся при наведении курсора мыши на изображение.

Синтаксис

Аргументы

Любая подходящяя контентовая строка. Ее обязательно надо брать в двойные или одинарные кавычки.

Обязательный параметр

Да.

Значение по умолчанию

Нет.

Пример 3. Добавление альтернативного контента

ШТМЛ 4.01IE 5.5IE 6IE 7Op 9.5Sa 3.1Ff 2.0Ff 3.0

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/HTML4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег IMG, параметр alt</title>
 </head>
 <body>

  <p><a href="/index.php"><img src="images/home.gif" alt="Вернуться 
  на главную страницу"></a></p>

 </body>
</html>

Параметр BORDER

ШТМЛ:

3.2

XШТМЛ:

1.0

1.1

Описание

Изображение, помещаемое на web-страницу, можно поместить в рамку различной ширины. Для этого служит параметр border тега <IMG>. По умолчанию рамка вокруг Имаги не отображается за исключением случая, когда рисунок является ссылкой. При этом цвет рамки совпадает с цветом ссылок, заданных с помощью стиля или параметра link тега <BODY>.

Чтобы убрать рамку, следует задать параметр border="0".

Синтаксис

Аргументы

Любое целое положительное число в пикселах.

Значение по умолчанию

Пример 4. Рамка вокруг Имаги

ШТМЛ 4.01IE 5.5IE 6IE 7Op 9.5Sa 3.1Ff 2.0Ff 3.0

<!DOCTYPE ШТМЛ PUBLIC "-//W3C//DTD ШТМЛ 4.01 Transitional//EN" "http://www.w3.org/TR/ШТМЛ4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег IMG, параметр border</title>
 </head>
 <body text="#00ff00">

  <p><img src="/images/sample.gif" width="50" height="50" 
   border="2" alt=""></p>

 </body>
</html>

Параметр HEIGHT и WIDTH

ШТМЛ:

3.2

XШТМЛ:

1.0

1.1

Описание

Для изменения размеров Имаги средствами ШТМЛ предусмотрены параметры height и width. Допускается использовать значения в пикселах или процентах. Если установлена процентная запись, то размеры Имаги вычисляются относительно родительского элемента — контейнера, где находится тег <IMG>. В случае отсутствия родительского контейнера, в его качестве выступает окно браузера. Иными словами, width="100%" означает, что рисунок будет растянут на всю ширину web-страницы. Добавление только одного параметра width или height сохраняет пропорции и отношение сторон Имаги. Браузер при этом ожидает полной загрузки рисунка, чтобы определить его первоначальную высоту и ширину.

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

Ширину и высоту Имаги можно менять как в меньшую, так и большую сторону. Однако на скорость загрузки рисунка это никак не влияет, поскольку размер файла остается неизменным. Поэтому с осторожностью уменьшайте изображение, т.к. это может вызвать недоумение у читателей, отчего такой маленький рисунок так долго грузится. А вот увеличение размеров приводит к обратному эффекту — размер Имаги велик, но файл относительно Имаги аналогичного размера загружается быстрее. Но качество рисунка при этом ухудшается.

Синтаксис

Аргументы

Любое целое положительное число в пикселах или процентах.

Значение по умолчанию

Исходная ширина или высота Имаги.

Пример 5. Размеры Имаги

ШТМЛ 4.01IE 5.5IE 6IE 7Op 9.5Sa 3.1Ff 2.0Ff 3.0

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/HTML4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег IMG, параметр width</title>
 </head>
 <body>

  <p><img src="/images/sample.gif" width="350" height="250" alt=""></p>

 </body>
</html>

Параметр HSPACE и VSPACE

ШТМЛ:

3.2

XШТМЛ:

1.0

1.1

Описание

Для любого Имаги можно задать невидимые отступы по горизонтали и вертикали с помощью параметров hspace и vspace. Особенно это актуально при обтекании рисунка контентом. В этом случае, чтобы контент не «наезжал» плотно на изображение, необходимо вокруг него добавляем пустое пространство.

Синтаксис

Аргументы

Любое целое положительное число в пикселах.

Значение по умолчанию

Пример 6. Отступы вокруг Имаги

ШТМЛ 4.01IE 5.5IE 6IE 7Op 9.5Sa 3.1Ff 2.0Ff 3.0

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/HTML4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег IMG, параметр hspace</title>
 </head>
 <body>

  <p><img src="/images/sample.gif" width="150" height="150" 
  hspace="5" vspace="7" alt="" align="left"></p>
  <p>Пример обтекания картинки контентом</p>

 </body>
</html>

Параметр ISMAP

ШТМЛ:

3.2

XШТМЛ:

1.0

1.1

Описание

Параметр ismap говорит браузеру что рисунок является серверной картой-изображением. Карты-Имаги позволяют привязывать ссылки к разным областям одного Имаги. Реализуется в двух различных вариантах — серверном и клиентском. В случае применения серверного варианта браузер посылает запрос на сервер для получения адреса выбранной ссылки и ждет ответа с требуемой информацией. Такой подход требует дополнительного времени на ожидание результата и отдельные файлы для каждой карты-Имаги.

Отправка данных на сервер происходит следующим образом. Необходимо поместить тег <IMG> в контейнер <A>, где в качестве значения параметра href указать адрес CGI-программы. Программа анализирует полученные координаты нажатия мыши, которые считаются от левого верхнего угла Имаги, и возвращает требуемую web-страницу.

Синтаксис

Аргументы

Нет.

Значение по умолчанию

По умолчанию этот параметр выключен.

Пример 7. Использование параметра ismap

ШТМЛ 4.01IE 5.5IE 6IE 7Op 9.5Sa 3.1Ff 2.0Ff 3.0

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/HTML4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег IMG, параметр ismap</title>
 </head>
 <body>

  <p><a href="http://www-html.ru/ШТМЛ/example/ismap.php"><img src="/images/sample.gif" 
  alt="" width="150" height="150" ismap></a></p>

 </body>
</html>

Если пользователь установил координаты мыши на изображении 100, 50, то после нажатия на ссылку будет открыт файл по адресу http://www-html.ru/cgi-bin/map.cgi?100,50. Последние цифры передаются в CGI-программу по методу GET и интерпретируются на сервере.

Параметр SRC

ШТМЛ:

3.2

XШТМЛ:

1.0

1.1

Описание

Адрес графического файла, который будет отображаться на web-странице. Наиболее популярны файлы в формате GIF и JPEG.

Синтаксис

Обязательный параметр

Да.

Аргументы

В качестве значения принимается полный или относительный путь к файлу.

Значение по умолчанию

Нет.

Пример 8. Путь к графическому файлу

ШТМЛ 4.01IE 5.5IE 6IE 7Op 9.5Sa 3.1Ff 2.0Ff 3.0

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/HTML4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег IMG, параметр src</title>
 </head>
 <body>

  <p><img src="logo.gif" width="450" height="450" alt=""></p>

 </body>
</html>