HTML HTML5 XHTML ПРИМЕРЫ СПРАВОЧНИК РЕКЛАМА ГОСТЕВАЯ

HTML Тег <img> - Изображение


Пример

Изображение вставляется следующим образом:

<img src="angry.gif" alt="Злое лицо" />

Попробуйте сами »
(еще примеры внизу этой страницы)

Определение и Использование

Тег <img> встраивает изображение в HTML страницу.

Заметьте, что изображения не "вживляются" в HTML страницу, изображения встраиваются в HTML страницы посредством ссылок на них. Тег <img> создается контейнер для изображения, на которое ссылается.

Тег <img> имеет два обязательных атрибута: src и alt.


Поддержка Браузерами

Internet Explorer Firefox Opera Google Chrome Safari

The <img> поддерживается всеми основными браузерами.


Различия Между HTML и XHTML

В HTML тег <img> не имеет конечного тега.

В XHTML тег <img> должен быть корректно закрыт.


Советы и Замечания

Совет: Атрибут alt - от слова alternative - используется для указания альтернативного текста, если изображение не доступно, а не для описания всплывающего текста при наведении мыши. Чтобы показать текст при наведении мыши на изображение или на карту изображения, используйте атрибут title, например так: <img src="angry.gif" alt="Злое лицо" title="Злое лицо" />

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


Обязательные Атрибуты

Столбец DTD указывает, в каком типе документа HTML 4.01/XHTML 1.0 DTD атрибут разрешен. S=Strict, T=Transitional и F=Frameset.

Атрибут Значение Описание DTD
alt текст Указывает альтернативный текст для изображения STF
src адрес URL Указывает URL адрес изображения STF

Необязательные Атрибуты

Атрибут Значение Описание DTD
align top
bottom
middle
left
right
Не рекомендуется. Используйте вместо него стили.
Указывает выравнивание изображения по отношению к окружающим элементам
TF
border пикселы Не рекомендуется. Используйте вместо него стили.
Указывает толщину границы вокруг изображения
TF
height пикселы
%
Указывает высоту изображения STF
hspace пикселы Не рекомендуется. Используйте вместо него стили.
Указывает пустое пространство слева и справа от изображения
TF
ismap ismap Указывает, что изображение является изображением-картой на стороне сервера STF
longdesc адрес URL Указывает URL адрес документа, содержащего длинное описание изображения STF
usemap #имя_карты Указывает имя карты изображения на стороне клиента STF
vspace пикселы Не рекомендуется. Используйте вместо него стили.
Указывает пустое пространство сверху и снизу от изображения
TF
width пикселы
%
Указывает ширину изображения STF


Стандартные Атрибуты

Тег <img> поддерживает следующие стандартные атрибуты:

Атрибут Значение Описание DTD
class имя_класса Указывает имя класса для элемента STF
dir rtl
ltr
Указывает направление текста для содержимого в элементе STF
id идентификатор Указывает уникальный идентификатор для элемента STF
lang код_языка Указывает код языка для содержимого элемента STF
style определение_стиля Указывает встроенный стиль для элемента STF
title текст Указывает дополнительную информацию об элементе STF
xml:lang код_языка Определяет код языка для содержимого элемента в XHTML документах STF

Дополнительная информация о Стандартных Атрибутах.


Атрибуты Событий

Тег <img> поддерживает следующие атрибуты событий:

Атрибут Значение Описание DTD
onabort скрипт Скрипт, запускаемый, когда загрузка изображения прерывается STF
onclick скрипт Скрипт, запускаемый при клике мышью STF
ondblclick скрипт Скрипт, запускаемый при двойном щелчке мышью STF
onmousedown скрипт Скрипт, запускаемый при нажатии кнопки мыши STF
onmousemove скрипт Скрипт, запускаемый при перемещении указателя мыши STF
onmouseout скрипт Скрипт, запускаемый, когда указатель мыши уходит за пределы элемента STF
onmouseover скрипт Скрипт, запускаемый, когда указатель мыши перемещается над элементом STF
onmouseup скрипт Скрипт, запускаемый при отпускании кнопки мыши STF
onkeydown скрипт Скрипт, запускаемый при нажатии клавиши STF
onkeypress скрипт Скрипт, запускаемый, когда клавиша нажата, а затем отпущена STF
onkeyup скрипт Скрипт, запускаемый, когда клавиша отпущена STF

Дополнительная информация об Атрибутах Событий.


Примеры

Попробуйте сами - Примеры

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

Выравнивание изображений
Как выравнивать изображения внутри текста.

Плавающие изображения
Как позволить изображению плавать слева или справа от текста.

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

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



© 2011-2017 Уроки HTML
Рейтинг@Mail.ru