www html, html уроки, html теги, css, верстка
статьи html уроки книги по css и html урокам вопросы и ответы Помощь сайту
Главная страница > Теги ШТМЛ > Тег IMG
Теги ШТМЛ
Все теги
!DOCTYPE
A
ABBR
ACRONYM
ADDRESS
AREA
B
BASE
BASEFONT
BDO
BGSOUND
BIG
BLOCKQUOTE
BODY
BR
BUTTON
CAPTION
CENTER
CITE
CODE
COL
COLGROUP
DD
DEL
DFN
DIV
DL
DT
EM
EMBED
FIELDSET
FONT
FORM
FRAME
FRAMESET
H1...H6
HEAD
HR
ШТМЛ
I
IFRAME
IMG
INPUT
INS
KBD
LABEL
LEGEND
LI
LINK
MAP
MARQUEE
META
NOBR
NOEMBED
NOFRAMES
NOSCRIPT
OBJECT
OL
OPTGROUP
OPTION
P
PARAM
PRE
Q
SAMP
SCRIPT
SELECT
SMALL
SPAN
STRIKE
STRONG
STYLE
SUB
SUP
TABLE
TBODY
TD
TEXTAREA
TFOOT
TH
THEAD
TITLE
TR
TT
UL
VAR
WBR
XMP
Теги по типам
файл
Звук
Имаги
Объекты
Скрипты
Списки
Ссылки
Таблица
контент
Форматирование
Формы
Фреймы

Тег IMG

Браузер Internet ExplorerInternet Explorer NetscapeNetтscape OperaОпера SafariSafari Файер фох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 4 XШТМЛ: 1.0 1.1

Описание

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

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

Синтаксис

<img src="URL" alt="">

Параметры

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=windows-1251">
  <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 4 XШТМЛ: 1.0 1.1

Описание

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

Синтаксис

<img align="bottom | left | middle | right | top">

Аргументы

В табл. 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=windows-1251">
  <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 4 XШТМЛ: 1.0 1.1

Описание

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

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

Синтаксис

<img 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=windows-1251">
  <title>Тег IMG, параметр alt</title>
 </head>
 <body>

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

 </body>
</html>

Параметр BORDER

ШТМЛ: 3.2 4 XШТМЛ: 1.0 1.1

Описание

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

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

Синтаксис

<img 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=windows-1251">
  <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 4 XШТМЛ: 1.0 1.1

Описание

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

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

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

Синтаксис

<img height="высота"> <img width="ширина">

Аргументы

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

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

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

Пример 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=windows-1251">
  <title>Тег IMG, параметр width</title>
 </head>
 <body>

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

 </body>
</html>

Параметр HSPACE и VSPACE

ШТМЛ: 3.2 4 XШТМЛ: 1.0 1.1

Описание

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

Синтаксис

<img hspace="отступ по горизонтали" vspace="отступ по вертикали">

Аргументы

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

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

0

Пример 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=windows-1251">
  <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 4 XШТМЛ: 1.0 1.1

Описание

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

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

Синтаксис

<img ismap>

Аргументы

Нет.

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

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

Пример 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=windows-1251">
  <title>Тег IMG, параметр ismap</title>
 </head>
 <body>

  <p><a href="http://www.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.www-html.ru/cgi-bin/map.cgi?100,50. Последние цифры передаются в CGI-программу по методу GET и интерпретируются на сервере.

Параметр SRC

ШТМЛ: 3.2 4 XШТМЛ: 1.0 1.1

Описание

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

Синтаксис

<img src="URL">

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

Да.

Аргументы

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

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

Нет.

Пример 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=windows-1251">
  <title>Тег IMG, параметр src</title>
 </head>
 <body>

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

 </body>
</html>

Copyright 2009 Все права засчищены, по всем вопросам пишите по адресу admin@www-html.ru

О нашем Internet проекте | Наши планы | Контент нашего сайта | Есть ошибки... | Технологии | Поддержать проект