HTML :: Тег <img>
В HTML тег <img> (от англ. image – изображение) используется для вставки изображений на веб-страницу. При этом стандартом HTML не определен список форматов изображений, которые должны поддерживаться в обязательном порядке. Тем не менее, форматы JPG, PNG, GIF и SVG поддерживаются всеми основными браузерами.
Если необходимо, чтобы изображение стало гиперссылкой, его следует поместить в элемент <a>. Также при помощи элементов <map> и <area> изображение может использоваться в качестве карты-изображения.
Синтаксис
<img src="Адрес" alt="Текст"> (закрывающий тег не требуется)
Атрибуты
- alt – устанавливает альтернативный текст изображения, который отображается на странице в случае невозможности отображения самого изображения.
- height – задает высоту изображения в пикселях или процентах.
- ismap – данный логический атрибут сообщает браузеру о том, что данное изображение является серверной картой-изображением. Если это так, то при клике по изображению точные координаты клика будут отправлены на сервер для дальнейшей обработки.
- sizes – задает размеры изображения в зависимости от макета страницы и типа устройства, на котором отображается данная страница.
- src – в качестве значения принимает полный или относительный путь (подробнее здесь) к вставляемому на страницу изображению.
- srcset – задает путь к изображению в зависимости от требуемого размера изображения и типа устройства, на котором отображается данная страница.
- width – задает ширину изображения в пикселях или процентах.
- usemap – сообщает браузеру о том, что данное изображение является клиентской картой-изображением. В качестве значения атрибут принимает знак решетки, за которым следует имя элемента <map>, содержащего координаты для данной карты-изображения (например, если <map name="clientMap">, то атрибут должен иметь вид usemap="#clientMap").
- Также для элемента доступны универсальные атрибуты и соответствующие атрибуты-события.
Ссылки
Официальный сайт W3C: https://html.spec.whatwg.org/multipage/embedded-content.html#the-img-element
Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/HTML/Element/img
Примеры
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Пример №1</title> </head> <body> <p> Робот Василий, показанный на рисунке ниже,<br> очень добрый и несколько своенравный.<br> <img src="images/robot.png" alt="Робот Вася" width="75px"> </p> </body> </html>
Пример №1
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Пример №2</title> </head> <body> <p> Это изображение – серверная карта-изображение. </p> <!-- Создаем серверную карту --> <a href="php/test.php"> <img src="images/fig.png" alt="Карта-изобр." ismap> </a> <p> Кликните по нужной фигуре, чтобы перейти <br> на страницу ее описания. </p> </body> </html>
Пример №2
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Пример №3</title> </head> <body> <p> Это изображение – клиентская карта-изображение. </p> <img src="example_4_7.png" alt="Прямоугольники" usemap="#map_1"> <map name="map_1"> <!-- Определяем область красного прямоугольника на изображении --> <area href="page_1.html" shape="rect" coords="0,0 200,143"> <!-- Определяем область синего прямоугольника на изображении --> <area href="page_2.html" shape="rect" coords="200,0 400,143"> </map> <p> Выберите прямоугольник. </p> </body> </html>
Пример №3