HTML <img> Тег
Пример
Изображение отмечается так:<img src="/images/w3html.png" alt="HTML" width="120" height="95" />
Определение и использование
Тег <img> вставляет картинку на страницу HTML.
Обратите внимание, что изображения технически не вставляются на страницу HTML, изображения ссылаются на страницы HTML. Тег <img>
создает ограниченное пространство для ссылающегося изображения.
Поддержка браузеров
тег
<img> поддерживается во всех ведущих браузерахРазличия между HTML и XHTML
В HTML тег <img> не имеет закрывающего тега.
В XHTML тег <img> должен быть соответственно закрыт.
Советы и примечания
Совет: Атрибут alt предназначен для использования как альтернативный текст на случай если изображение недоступно, не как всплывающий текст при наводе мышкой.
Для показа текста при наводе мышкой на изображение или карту изображения используйте атрибут title, как например:
<img src="/images/w3html.png" alt="HTML" title="HTML" />
Примечание: Когда веб-страница загружается, в этот момент браузер действительно берет изображение с веб-сервера и помещает его на страницу. Поэтому будте уверенны, что изображение находится в месте связанном с веб-страницей, иначе ваши посетители получат знак сломанной ссылки. Знак сломанной ссылки показывает, что браузер не может найти изображение.
Обязательные атрибуты
DTD указывает, в какой HTML 4.01/XHTML 1.0 DTD допускаются атрибуты. S=Strict (строгий), T=Transitional (переходный), и F=Frameset (набор фреймов).
| Атрибут | Значение | Описание | DTD |
|---|---|---|---|
| alt | text | Определяет альтернативный текст изображения | STF |
| src | URL | Определяет URL изображения | STF |
Дополнительные атрибуты
| Атрибут | Значение | Описание | DTD |
|---|---|---|---|
| align | top bottom middle left right | Не рекомендуется использовать. Используйте вместо этого стили. Определяет выравнивание изображения в соответствии с окружающими элементами | TF |
| border | pixels | Не рекомендуется использовать. Используйте вместо этого стили. Определяет ширину рамки изображения | TF |
| height | pixels % | Определяет высоту изображения | STF |
| hspace | pixels | Не рекомендуется использовать. Используйте вместо этого стили. Определяет поля слева и справа от изображения | TF |
| ismap | ismap | Определяет изображение как изображение-карту (сторона сервера). Редко используется. Смотри вместо этого usemap | STF |
| longdesc | URL | Определяет URL документа, который содержит подробное описание изображения | STF |
| title | text | Определяет заголовок изображения | STF |
| usemap | #mapname | Определяет изображение как изображение карту (строна пользователя) | STF |
| vspace | pixels | Не рекомендуется использовать. Используйте вместо этого стили. Определяет поля сверху и снизу изображения | TF |
| width | pixels % | Определяет ширину изображения | STF |
Стандартные атрибуты
Тег<img> поддерживает следующие стандартные атрибуты:| Атрибут | Значение | Описание | DTD |
|---|---|---|---|
| class | classname | Определяет имя класса для элемента | STF |
| dir | rtl ltr | Определяет направление текста для содержания в элементе | STF |
| id | id | Определяет уникальный id для элемента | STF |
| lang | language_code | Указывает код языка для содержания элемента | STF |
| style | style_definition | Определяет встроенный стиль для элемента | STF |
| title | text | Определяет дополнительную информацию об элементе | STF |
| xml:lang | language_code | Указывает код языка для содержимого элементов, в документах XHTML | STF |
Более подробная информация о Стандартных атрибутах.
Атрибуты событий
Тег<img> поддерживает следующие атрибуты событий:| Атрибут | Значение | Описание | DTD |
|---|---|---|---|
| onabort | script | Скрипт выполняется, когда загрузка изображения не удается | STF |
| onclick | script | Скрипт выполняется когда нажимается мышка | STF |
| ondblclick | script | Скрипт выполняется когда мышка нажимается дважды | STF |
| onmousedown | script | Скрипт выполняется когда клавиша мышки нажата | STF |
| onmousemove | script | Скрипт выполняется когда указатель мышки сдвинулся | STF |
| onmouseout | script | Скрипт выполняется когда указатель мышки вышел из границ элемента | STF |
| onmouseover | script | Скрипт выполняется когда указатель мышки проходит над элементом | STF |
| onmouseup | script | Скрипт выполняется когда клавиша мышки отпущена | STF |
| onkeydown | script | Скрипт выполняется когда клавиша клавиатуры нажата | STF |
| onkeypress | script | Скрипт выполняется когда клавиша клавиатуры нажата и отпущена | STF |
| onkeyup | script | Скрипт выполняется когда клавиша мышки отпущена | STF |
Более подробная информация о Атрибуты событий.
Пример 1
Как внести изображения с другой директории или сайта.<p>Внесение изображения с другой директории:</p> <img src="/images/w3html.png" alt="HTML" width="120" height="95" /> <p>Внесение изображения с сайта:</p> <img src="http://xhtml.co.il/images/logo/logo_jQuery_xhtml.gif" alt="jQuery" width="120" height="95" />
Пример 2
Как выравнивать изображение внутри текста:<p> Изображение <img src="/images/blue-green-axe.gif" alt="Axe" align="bottom" width="75" height="75" /> в тексте Изображение <img src="/images/blue-green-axe.gif" alt="Axe" align="middle" width="75" height="75" /> в тексте Изображение <img src="/images/blue-green-axe.gif" alt="Axe" align="top" width="75" height="75" /> в тексте </p>
Пример 3
Как выравнить изображение слева или справа от текста:<p> <img src="/images/blue-green-axe.gif" alt="Axe" align="left" width="75" height="75" /> Параграф с изображением. Атрибут align изображения установлен в "left". Изображение будет выравненно влево по отношению к тексту. </p> <p> <img src="/images/blue-green-axe.gif" alt="Axe" align="right" width="75" height="75" /> Параграф с изображением. Атрибут align изображения установлен в "right". Изображение будет выравненно вправо по отношению к тексту. </p>
Пример 4
Как добавить гиперссылку на изображение:Изображение как гиперссылка: <a href="http://Xhtml.co.il/ru/"> <img src="/images/w3html.png" alt="HTML" width="120" height="95" border="0" /> </a>
Пример 5
Изображение-карта, с интерактивными областями и атрибутом target:<p>Щелкните на одной из планет, чтобы посмотреть её ближе:</p> <img src="/images/353915main_image_1377_428-321.gif" alt="Planets" width="350" height="263" usemap="#planetmap"> <map id="planetmap" name="planetmap"> <area shape="rect" coords="203,104,343,241" alt="Sun" title="sun" href="http://xhtml.co.il/tryit/sun.html" target="_blank" > <area shape="circle" coords="92,98,56" alt="Mercury" title="Mercury" href="http://xhtml.co.il/tryit/mercury.html"> </map>
Была ли эта информация полезной?
