Главная - Справочник по HTML - Тег "IMG"

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

Параметры тега:

Тег <IMG> помещает на странице графическое изображение или GIF-анимацию. Содержит адрес файла и параметры его отображения. На данный момент поддерживаются форматы файлов GIF, JPG, JPEG, PNG.

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

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

Пример:

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

Параметры тега <IMG>

height

Служит для изменения размеров изображения по высоте. Допускается использовать значения в пикселах или процентах. Если установлена процентная запись, то размеры изображения вычисляются относительно родительского элемента — контейнера, где находится тег <IMG> . В случае отсутствия родительского контейнера, в его качестве выступает окно браузера. Добавление только одного параметра width или height сохраняет пропорции и отношение сторон изображения. Браузер при этом ожидает полной загрузки рисунка, чтобы определить его первоначальную высоту и ширину.

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

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

Пример:

<img src="URL" height="200" alt="текст">

width

Параметр служит для изменения размеров изображения по высоте. Подробности можно прочитать в описании параметра height (немного выше).

Пример:

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

align

Параметр используется для выравнивания изображения относительно текста или других изображений на веб-странице. Наиболее популярные параметры — left и right , создающие обтекание текста вокруг изображения. Чтобы текст не прилегал плотно к рисунку, рекомендуется в теге <IMG> добавить параметр hspace и vspace , задающих расстояние до текста в пикселах. В качестве зарезервированных имен используются следующие:

left
Выравнивает изображение по левому краю окна.

right
Выравнивает изображение по правому краю окна.

top
Верхняя граница изображения выравнивается по самому высокому элементу строки.

bottom
Выравнивание нижней границы изображения по окружающему тексту.

middle
Выравнивание середины изображения по базовой линии строки.

absmiddle
Выравнивание середины изображения по середине строки.

baseline
Выравнивание изображения по базовой линии строки.

texttop
Верхняя граница изображения выравнивается по самому высокому текстовому элементу текущей строки.

Пример:

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

alt

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

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

Пример:

<img src="URL" height="200" alt="текст">

galleryimg

Поддержка Панели управления изображениями. Данная панель появляется при нахождении указателя мыши на изображении и позволяет быстро сохранить картинку, распечатать, послать на e-mail, открыть папку Мои рисунки. По умолчанию данная панель появляется только при размерах более 130 пикселах. Но можно включить эту панель с помощью этого атрибута. Может принимать значениея yes (или true) и no (или false).

Пример:

<img src="URL" alt="текст" GALLERYIMG="yes">

border

Служит для указания ширины рамки вокруг изображения. По умолчанию рамка вокруг изображения не отображается за исключением случая, когда рисунок является ссылкой. При этом цвет рамки совпадает с цветом ссылок, заданных с помощью стиля или параметра link тега <BODY> .Чтобы убрать рамку, следует задать параметр border="0" .

Пример:

<img border="5">

hspace

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

Пример:

<img hspace="10">

vspace

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

Пример:

<img vspace="10">

ismap

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

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

Пример:

<a href="URL"><img src="URL" alt="" width="100" height="200" ismap >

usemap

Ссылка на тег <MAP>, содержащий координаты для клиентской карты-изображения.

Пример:

<img src="URL" alt="" width="500" height="500" usemap="MAP">
<map name="MAP">
<area shape="poly" coords="113,204,21,240,233,0,13,0" href="URL1" alt="Текст1">
<area shape="rect" coords="210,204,23,0,329,0,307,24" href="URL2" alt="Текст2">
<area shape="circle" coords="304,204,35,240,407,0,32,0" href="URL3" alt="Текст3">
</map>

src

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

Пример:

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

lowsrc

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

Пример:

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

по алфавиту  /  по категориям  / скачать "Справочник по HTML"