Html атрибуты тега img: Тег img | Справочник HTML CSS – : The Image Embed element — Web technology for developers

HTML тег img | назначение, синтаксис, атрибуты, примеры

Последнее обновление: 22.01.2011

Тег <img> (англ. image — изображение) добавляет на страницу изображение (картинку).
Строчный элемент.

HTML: 3.2 | 4 / XHTML: 1.0 | 1.1

Синтаксис

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

Атрибуты

Основные Вспомогательные События

align задает выравнивание рисунка и способ обтекания текстом
  • bottom — нижняя граница картинки выравнивается по окружающему тексту (по умолчанию)
  • left — по левому краю окна. Текст обтекает справа
  • middle — центр картинки по базовой линии текущей строки
  • right — по правому краю окна. Текст обтекает слева
  • top — верх картинки выравнивается по самому высокому элементу строки
Не проходит валидацию XHTML 1.0 Scrict, XHTML 1.1, HTML 4.01 Strict
alt альтернативный текст
border толщина рамки
Не проходит валидацию XHTML 1.0 Scrict, XHTML 1.1, HTML 4.01 Strict
class определяет имя используемого класса
controls флаг. Когда установлен, отображает кнопки для просмотра видеофайла
Отсутствует в спецификации HTML 4.01!
dir определяет направление символов:
  • ltr — слева направо
  • rtl — справа налево
dynsrc URL видеофайла для проигрываия
Отсутствует в спецификации HTML 4.01!
height задает высоту рисунка
hspace отступ по горизонтали (по умолчанию 0)
id уникальный идентификатор
ismap флаг, определяющий, что картинка является картой-изображением
lang определяет язык отображаемого документа
longdesc URL страницы с полным описанием изображения
loop сколько раз прокручивать видео. Значение по умолчанию -1, бесконечное воспроизведение
Отсутствует в спецификации HTML 4.01!
lowsrc URL графического файла с низким разрешением. Загрузиться и отобразится до загрузки основной картинки.
Отсутствует в спецификации HTML 4.01!
name уникальное имя изображения
onclick щелчок на элементе
ondblclick двойной щелчок на элементе
onkeydown нажатие клавиши, когда элемент имеет фокус
onkeypress нажатие и освобождении клавиши, когда элемент имеет фокус
onkeyup освобождение ранее нажатой клавиши, когда элемент имеет фокус
onmousedown нажатие кнопки мыши, когда элемент имеет фокус
onmousemove движение указателя мыши, когда элемент имеет фокус
onmouseout смещение указателя мыши с элемента
onmouseover помещение указателя мыши на элемент
onmouseup освобождение ранее нажатой кнопки мыши, когда элемент имеет фокус
src URL графического файла, отображаемого на странице
start когда начинать воспроизведение видео
  • fileopen — сразу после загрузки (по умолчанию)
  • mouseover — после наведения курсора мыши

Отсутствует в спецификации HTML 4.01!
style задает встроенную таблицу стилей
title всплывающая подсказка
usemap применяет к изображению карту <MAP>
vspace отступ по вертикали (по умолчанию 0)
width задает ширину картинки

Пример

Вставим картинку:

<img alt="hr" src="hr.png" border="2"/>

Тег <img> совместно с тегами <map> и <area> используются для создания карт-изображений:

<map name="myMap">
<area nohref="nohref" alt="тут ссылки нет" title="тут ссылки нет" shape="circle" coords="70,138,39"/>
<area href="#" alt="Серая зона" title="Серая зона" shape="rect" coords="20,10,118,188"/>
<area href="#" alt="Желтая зона" title="Желтая зона" shape="poly" coords="175,30,270,100,200,150"/>
</map>
<img src="map.png" alt="карта" usemap="#myMap"/>

Результат:

Рекомендации по использованию

  • должен быть закрыт слешем (<img.../>)
  • обязательные атрибуты: src, alt
  • задавайте атрибуты width и height, это позволяет браузеру заранее зарезервировать место в памяти и не будет сам расчитывать размеры картинки, что положительно сказывается на скорости загрузки страницы
  • не изменяйте размер картинки атрибутами width и height — это искажает изображение и не влияет на вес файла, используйте для таких целей специальные редакторы
  • для предсказуемого кроссбраузерного отображения картинок явно указывайте бордюры (свойство border)
  • содержание атрибута alt активно используется поисковыми системами и произносится голосовыми браузерами
  • разница между атрибутами alt и title — alt определяет текст, который пользователь увидит вместо картинки (в случае, если, например, картинки отключены в настройках браузера), а title - вместе с картинкой, в виде всплывающей подсказки
  • особенность IE6-7: при отсутствии атрибута title всплывает подсказка, текст которой берется у alt
  • атрибуты тега <img>, предназначенные для воспроизведения видео не входят в спецификацию HTML 4.01 и некорректно обрабатываются большинством браузеров, для воспроизведения видео используйте тег <object>
  • не рекомендуем использовать атрибуты align и border (не проходит валидацию XHTML 1.0, XHTML 1.1, HTML 4.01 Strict + засоряет код), вместо них применяйте таблицы стилей
  • используйте тег <img> только в контентной части документа, графику оформления страниц прячьте в CSS (background) — получится более чистый код

Твой код:
<html> <head> <title></title> <style type="text/css"> img { border: 2px solid #000; } </style> </head> <body> <div><img alt="Примеры использования hr" src="http://www.mpbox.ru/assets/images/html-tags/hr.png"/> </div> </body> </html> Сделай код и жми тут

Результат:
большой полигон

По теме

HTML тег img | назначение, синтаксис, атрибуты, примеры

Последнее обновление: 23.01.2011

Тег <img> (англ. image — изображение) добавляет на страницу изображение (картинку).
Строчный элемент.

HTML: 3.2 | 4 / XHTML: 1.0 | 1.1

Синтаксис

<img src=../../html/tags/"URL" alt="..."/>

Атрибуты

Основные Вспомогательные События

align задает выравнивание рисунка и способ обтекания текстом
  • bottom — нижняя граница картинки выравнивается по окружающему тексту (по умолчанию)
  • left — по левому краю окна. Текст обтекает справа
  • middle — центр картинки по базовой линии текущей строки
  • right — по правому краю окна. Текст обтекает слева
  • top — верх картинки выравнивается по самому высокому элементу строки
Не проходит валидацию XHTML 1.0 Scrict, XHTML 1.1, HTML 4.01 Strict
alt альтернативный текст
border толщина рамки
Не проходит валидацию XHTML 1.0 Scrict, XHTML 1.1, HTML 4.01 Strict
class определяет имя используемого класса
controls флаг. Когда установлен, отображает кнопки для просмотра видеофайла
Отсутствует в спецификации HTML 4.01!
dir определяет направление символов:
  • ltr — слева направо
  • rtl — справа налево
dynsrc URL видеофайла для проигрываия
Отсутствует в спецификации HTML 4.01!
height задает высоту рисунка
hspace отступ по горизонтали (по умолчанию 0)
id уникальный идентификатор
ismap флаг, определяющий, что картинка является картой-изображением
lang определяет язык отображаемого документа
longdesc URL страницы с полным описанием изображения
loop сколько раз прокручивать видео. Значение по умолчанию -1, бесконечное воспроизведение
Отсутствует в спецификации HTML 4.01!
lowsrc URL графического файла с низким разрешением. Загрузиться и отобразится до загрузки основной картинки.
Отсутствует в спецификации HTML 4.01!
name уникальное имя изображения
onclick щелчок на элементе
ondblclick двойной щелчок на элементе
onkeydown нажатие клавиши, когда элемент имеет фокус
onkeypress нажатие и освобождении клавиши, когда элемент имеет фокус
onkeyup освобождение ранее нажатой клавиши, когда элемент имеет фокус
onmousedown нажатие кнопки мыши, когда элемент имеет фокус
onmousemove движение указателя мыши, когда элемент имеет фокус
onmouseout смещение указателя мыши с элемента
onmouseover помещение указателя мыши на элемент
onmouseup освобождение ранее нажатой кнопки мыши, когда элемент имеет фокус
src URL графического файла, отображаемого на странице
start когда начинать воспроизведение видео
  • fileopen — сразу после загрузки (по умолчанию)
  • mouseover — после наведения курсора мыши

Отсутствует в спецификации HTML 4.01!
style задает встроенную таблицу стилей
title всплывающая подсказка
usemap применяет к изображению карту <MAP>
vspace отступ по вертикали (по умолчанию 0)
width задает ширину картинки

Пример

Вставим картинку:

<img alt="hr" src=../../html/tags/"hr.png" border="2"/>

Тег <img> совместно с тегами <map> и <area> используются для создания карт-изображений:

<map name="myMap">
<area nohref="nohref" alt="тут ссылки нет" title="тут ссылки нет" shape="circle" coords="70,138,39"/>
<area href=../../html/tags/"#" alt="Серая зона" title="Серая зона" shape="rect" coords="20,10,118,188"/>
<area href=../../html/tags/"#" alt="Желтая зона" title="Желтая зона" shape="poly" coords="175,30,270,100,200,150"/>
</map>
<img src=../../html/tags/"map.png" alt="карта" usemap="#myMap"/>

Результат:

Рекомендации по использованию

  • должен быть закрыт слешем (<img.../>)
  • обязательные атрибуты: src, alt
  • задавайте атрибуты width и height, это позволяет браузеру заранее зарезервировать место в памяти и не будет сам расчитывать размеры картинки, что положительно сказывается на скорости загрузки страницы
  • не изменяйте размер картинки атрибутами width и height — это искажает изображение и не влияет на вес файла, используйте для таких целей специальные редакторы
  • для предсказуемого кроссбраузерного отображения картинок явно указывайте бордюры (свойство border)
  • содержание атрибута alt активно используется поисковыми системами и произносится голосовыми браузерами
  • разница между атрибутами alt и title — alt определяет текст, который пользователь увидит вместо картинки (в случае, если, например, картинки отключены в настройках браузера), а title - вместе с картинкой, в виде всплывающей подсказки
  • особенность IE6-7: при отсутствии атрибута title всплывает подсказка, текст которой берется у alt
  • атрибуты тега <img>, предназначенные для воспроизведения видео не входят в спецификацию HTML 4.01 и некорректно обрабатываются большинством браузеров, для воспроизведения видео используйте тег <object>
  • не рекомендуем использовать атрибуты align и border (не проходит валидацию XHTML 1.0, XHTML 1.1, HTML 4.01 Strict + засоряет код), вместо них применяйте таблицы стилей
  • используйте тег <img> только в контентной части документа, графику оформления страниц прячьте в CSS (background) — получится более чистый код

Твой код:
<html> <head> <title></title> <style type="text/css"> img { border: 2px solid #000; } </style> </head> <body> <div><img alt="Примеры использования hr" src="http://www.HTML-CSS-PHP-JS.RU/assets/images/html-tags/hr.png"/> </div> </body> </html> Сделай код и жми тут

Результат:
большой полигон

По теме

Атрибут height тега | HTML справочник

HTML тег <img>

Значение и применение

Атрибут height (HTML тега <img>) определяет высоту изображения в пикселях.

Рекомендуется всегда указывать ширину и высоту изображения. Если ширина (атрибут width) и высота (атрибут height) не указаны, то браузер не резервирует место под изображение и при медленной загрузке страница будет «прыгать».

Обращаю Ваше внимание, что если вы с использованием атрибутов уменьшаете большое изображение на странице, то пользователь независимо от этого скачивает большое изображение (размер исходного файла не изменяется). Рекомендуется уменьшать размер изображения до необходимого Вам, прежде чем размещать его на странице.

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

Синтаксис:

<img height = "pixels"> 

Значения атрибута

ЗначениеОписание
pixelsОпределяет высоту изображения в пикселях. Единицы измерения при этом не указываются (только цифры).

Отличия HTML 4.01 от HTML 5

В HTML 4.01 высота может быть задана в пикселях или в процентах (от родительского элемента), в HTML5 значение должно быть указано в пикселях.

Пример использования

<!DOCTYPE html>
<html>
<head>
	<title>Пример использования атрибута height HTML тега <img></title>
</head>
<body>
	<img src = "moscow.jpg" alt = "Москва" height = "50">
	<img src = "moscow.jpg" alt = "Москва" height = "75">
	<img src = "moscow.jpg" alt = "Москва" height = "100">
	<img src = "moscow.jpg" alt = "Москва" height = "125">
</body>
</html>

В данном примере мы разместили четыре изображения, для которых мы установили различные значения высоты в пикселях (атрибут height). Обратите внимание, что ширина изображения подстраивается под высоту изображения автоматически, так как она не задана явно.

Результат нашего примера:

Пример использования атрибута height HTML тега <img> (высота изображения в пикселях).HTML тег <img>

Атрибут usemap тега | HTML справочник

HTML тег <img>

Значение и применение

Атрибут usemap (HTML тега <img>) ссылается на элемент <map> (обязательный атрибут name элемента), который содержит координаты для клиентской части карты-изображения.


Атрибут usemap нельзя использовать, если элемент <img> является потомком элементов <a>, или <button>.


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

Синтаксис:

<map name = "#mapname">

Значения атрибута

ЗначениеОписание
#mapnameСсылается на элемент <map> (обязательный атрибут name элемента), который содержит координаты для клиентской части карты-изображения.

Отличия HTML 4.01 от HTML 5

Нет.

Пример использования

<!DOCTYPE html>
<html>
	<head>
		<title>Пример использования атрибута usemap HTML тега <img></title>
	</head>
	<body>
		<img src =  "star.png"  usemap =  "#zvezda" alt = "Пятиконечная звезда"> <!-- размещаем изображение, которое мы в последствии будем использовать при составлении изображении-карты --> 
		<map name = "zvezda" >  <!-- задаём имя карте-изображению --> 
			<area shape =  "poly" coords =  "251,33, 273,101, 344,101, 286,143, 309,210, 251,170, 192,213, 215,143, 158,101, 229,101" href =  "#" alt =  "Пятиконечная звезда"> <!-- определяем необходимое количество точек на изображении (многоугольную интерактивную область) --> 
		</map>
	</body>
</html>

И так по порядку, что мы сделали в этом примере:

  • Разместили изображение (тег <img>), которое мы в последствии будем использовать при составлении изображении-карты. В атрибуте usemap необходимо обязательно указать имя изображения-карты, которое мы будем использовать в элементе <map> (необходимо обязательно перед именем указать решетку).
  • Размещаем изображение-карту (тег <map>) и задаем единственный и обязательный атрибут элемента name (имя карты). Обратите внимание, что в отличие от тега <img> мы задаем имя без решетки, в остальном они должны совпадать.
  • С использованием тега <area>, мы определяем многоугольную интерактивную область (атрибут shape со значением "poly") в изображении-карте.

Результат нашего примера:

Пример использования атрибута usemap HTML тега <img>.HTML тег <img>

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *