Тег <IMG>
| Параметры |
align alt border src
GALLERYIMG height hspace ismap
lowsrc vspace width usemap
|
Закрывающий тег |
| Не требуется |
Тег <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 , задающих расстояние до текста в пикселах. В качестве зарезервированных имен используются следующие:
<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">
dreamweaver - содержание учебника