Тег <IMG> предназначен для отображения на веб-странице изображений в графическом формате GIF, JPEG или PNG. Этот тег имеет единственный обязательный параметр src, который определяет адрес файла с картинкой. Если необходимо, то рисунок можно сделать ссылкой на другой файл, поместив тег <IMG> в контейнер <A>. При этом вокруг изображения отображается рамка, которую можно убрать, добавив параметр border=«0» в тег <IMG>.
Рисунки также могут применяться в качестве карт-изображений, когда картинка содержит активные области, выступающие в качестве ссылки. Такая карта по внешнему виду ничем не отличается от обычного изображения, но при этом оно может быть разбито на невидимые зоны разной формы, где каждая из областей служит ссылкой.
<img src="URL" alt="">
align | Определяет как рисунок будет выравниваться по краю и способ обтекания текстом. |
alt | Альтернативный текст для изображения. |
border | Толщина рамки вокруг изображения. |
height | Высота (ширина) изображения. |
hspace | Горизонтальный отступ от изображения до окружающего контента. |
ismap | Говорит браузеру, что картинка является серверной картой-изображением. |
lowsrc | Путь к графическому файлу низкого разрешения для предварительного отображения. |
src | Путь к графическому файлу. |
vspace | Вертикальный отступ от изображения до окружающего контента. |
width | Ширина изображения. |
usemap | Ссылка на тег <MAP>, содержащий координаты для клиентской карты-изображения. |
Не требуется.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>Тег IMG</title> </head> <body> <p><a href="lorem.html"><img src="images/girl.png" width="189" height="255" alt="lorem"></a> Lorem ipsum dolor sit amet...</p> </body> </html>
Для изображений можно указывать их положение относительно текста или других изображений на веб-странице. Способ выравнивания изображений задается параметром align тега <IMG>.
<img align="bottom | left | middle | right | top">
В таблице перечислены возможные значение параметра align и результат его использования.
<HTML> <table width=«90%» border=«1» align=«center» cellpadding=«3» cellspacing=«0» class=«data»>
<caption> Таблица. Использование значений параметра align </caption>
<tr> <th>Значение</th> <th>Описание</th> <th>Пример</th> </tr> <tr align="left"> <td bgcolor="#f6f6f0">bottom</td> <td>Выравнивание нижней границы изображения по окружающему тексту..</td>
<td>Lorem ipsum dolor sit amet, consectetuer <img src="/lib/images/square.gif" width="20" height="20" align="bottom" alt=""> adipiscing elit...</td> </tr> <tr align="left"> <td bgcolor="#f6f6f0">left</td> <td>Выравнивает изображение по левому краю окна.</td> <td><img src="/lib/images/square.gif" width="20" height="20" align="left" alt=""> Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</td>
</tr> <tr align="left"> <td bgcolor="#f6f6f0">middle</td> <td>Выравнивание середины изображения по базовой линии текущей строки. </td> <td>Lorem ipsum dolor sit amet, <img src="/lib/images/square.gif" width="20" height="20" align="middle" alt=""> consectetuer adipiscing elit...</td> </tr> <tr align="left"> <td bgcolor="#f6f6f0">right</td>
<td>Выравнивает изображение по правому краю окна.</td> <td><img src="/lib/images/square.gif" width="20" height="20" align="right" alt=""> Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</td> </tr> <tr align="left"> <td bgcolor="#f6f6f0">top</td> <td>Верхняя граница изображения выравнивается по самому высокому элементу текущей строки.</td> <td>Lorem ipsum dolor sit amet, <img src="/lib/images/square.gif" width="20" height="20" align="top" alt=""> consectetuer adipiscing elit...</td>
</tr>
</table> </HTML>
Наиболее популярные параметры — left и right, создающие обтекание текста вокруг изображения.
bottom
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Тег IMG, параметр align</title> </head> <body> <p><img src="/images/square.gif" alt="Квадрат" width="20" height="20" align="right"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</p> </body> </html>
Дополнительные аргументы absbottom, absmiddle, baseline и texttop понимаются браузерами, но не поддерживаются спецификацией HTML 4.x/XHTML 1.0.
Параметр alt устанавливает альтернативный текст для изображений. Такой текст позволяет получить текстовую информацию о рисунке при отключенной в браузере загрузке изображений. Поскольку загрузка изображений происходит после получения браузером информации о нем, то замещающий рисунок текст появляется раньше. А уже по мере загрузки текст будет сменяться изображением.
Браузеры также отображают альтернативный текст в виде подсказки, появляющейся при наведении курсора мыши на изображение.
<img alt="текст">
Любая подходящяя текстовая строка. Ее обязательно надо брать в двойные или одинарные кавычки.
Да.
Нет.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Тег IMG, параметр alt</title> </head> <body> <p><a href="/index.php"><img src="images/home.gif" alt="Вернуться на главную страницу"></a></p> </body> </html>
Изображение, помещаемое на веб-страницу, можно поместить в рамку различной ширины. Для этого служит параметр border тега <IMG>. По умолчанию рамка вокруг изображения не отображается за исключением случая, когда рисунок является ссылкой. При этом цвет рамки совпадает с цветом ссылок, заданных с помощью стиля или параметра link тега <BODY>.
Чтобы убрать рамку, следует задать параметр border=«0».
<img border="толщина рамки">
Любое целое положительное число в пикселах.
0
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Тег IMG, параметр border</title> </head> <body text="#00ff00"> <p><img src="/images/sample.gif" width="50" height="50" border="2" alt=""></p> </body> </html>
Для изменения размеров изображения средствами HTML предусмотрены параметры height и width. Допускается использовать значения в пикселах или процентах. Если установлена процентная запись, то размеры изображения вычисляются относительно родительского элемента — контейнера, где находится тег <IMG>. В случае отсутствия родительского контейнера, в его качестве выступает окно браузера. Иными словами, width=«100%» означает, что рисунок будет растянут на всю ширину веб-страницы. Добавление только одного параметра width или height сохраняет пропорции и отношение сторон изображения. Браузер при этом ожидает полной загрузки рисунка, чтобы определить его первоначальную высоту и ширину.
Обязательно задавайте размеры всех изображений на веб-странице. Это несколько ускоряет загрузку страницы, поскольку браузеру нет нужды вычислять размер каждого рисунка после его получения. Это утверждение особенно важно для изображений, размещенных внутри таблицы.
Ширину и высоту изображения можно менять как в меньшую, так и большую сторону. Однако на скорость загрузки рисунка это никак не влияет, поскольку размер файла остается неизменным. Поэтому с осторожностью уменьшайте изображение, т.к. это может вызвать недоумение у читателей, отчего такой маленький рисунок так долго грузится. А вот увеличение размеров приводит к обратному эффекту — размер изображения велик, но файл относительно изображения аналогичного размера загружается быстрее. Но качество рисунка при этом ухудшается.
<img height="высота"> <img width="ширина">
Любое целое положительное число в пикселах или процентах.
Исходная ширина или высота изображения.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Тег IMG, параметр width</title> </head> <body> <p><img src="/images/sample.gif" width="350" height="250" alt=""></p> </body> </html>
Для любого изображения можно задать невидимые отступы по горизонтали и вертикали с помощью параметров hspace и vspace. Особенно это актуально при обтекании рисунка текстом. В этом случае, чтобы текст не «наезжал» плотно на изображение, необходимо вокруг него добавить пустое пространство.
<img hspace="отступ по горизонтали" vspace="отступ по вертикали">
Любое целое положительное число в пикселах.
0
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Тег IMG, параметр hspace</title> </head> <body> <p><img src="/images/sample.gif" width="150" height="150" hspace="5" vspace="7" alt="" align="left"></p> <p>Пример обтекания картинки текстом</p> </body> </html>
Параметр ismap говорит браузеру что рисунок является серверной картой-изображением. Карты-изображения позволяют привязывать ссылки к разным областям одного изображения. Реализуется в двух различных вариантах — серверном и клиентском. В случае применения серверного варианта браузер посылает запрос на сервер для получения адреса выбранной ссылки и ждет ответа с требуемой информацией. Такой подход требует дополнительного времени на ожидание результата и отдельные файлы для каждой карты-изображения.
Отправка данных на сервер происходит следующим образом. Необходимо поместить тег <IMG> в контейнер <A>, где в качестве значения параметра href указать адрес CGI-программы. Программа анализирует полученные координаты нажатия мыши, которые считаются от левого верхнего угла изображения, и возвращает требуемую веб-страницу.
<img ismap>
Нет.
По умолчанию этот параметр выключен.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Тег IMG, параметр ismap</title> </head> <body> <p><a href="http://www.htmlbook.ru/html/example/ismap.php"><img src="/images/sample.gif" alt="" width="150" height="150" ismap></a></p> </body> </html>
Если пользователь установил координаты мыши на изображении 100, 50, то после нажатия на ссылку будет открыт файл по адресу http://www.htmlbook.ru/cgi-bin/map.cgi?100,50. Последние цифры передаются в CGI-программу по методу GET и интерпретируются на сервере.
Адрес графического файла, который будет отображаться на веб-странице. Наиболее популярны файлы в формате GIF и JPEG.
<img src="URL">
Да.
В качестве значения принимается полный или относительный путь к файлу.
Нет.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Тег IMG, параметр src</title> </head> <body> <p><img src="http://htmlbook.ru/images/logo.gif" width="450" height="450" alt=""></p> </body> </html>