Вставка img. Добавляем изображения на WEB-страницу, а еще видео и аудио
Изображения на web-страницах могут использоваться двумя способами: в качестве фона и в качестве самостоятельного изображения. Рекомендуется использование трех форматов графики: JPEG, GIF и PNG. Именно их поддерживают все браузеры, для остальных форматов могут потребоваться специальные средства.
Как правило, все изображения для сайта хранятся в отдельной папке, например, images. А пути к изображениям прописываются также, как в ссылках. Если забыли посмотрите .
Во всех последующих примерах пути к изображениям будут прописаны, исходя из того, что картинки находятся в папке images, а страницы в папке site, находящейся на том же уровне.
Фоновые изображения
Фоновое ихображение заполняет собой все пространство элемента для которого оно задано. Так, указав в теге атрибут background="fon.gif" , рисунком fon.gif будет залито все окно браузера.
Пример кода: Результат
Задавая фоновый рисунок документа, не забывайте указывать также параметр bgcolor . Это связано с тем, что у пользователя может быть отключена загрузка изображений и вашего красивого фона он не увидит. Тогда браузер и будет использовать параметр bgcolor .
Встраивание изображений
Для размещения на странице изображений используется тег , имеющий единственный обязательный параметр src , определяющий URL-адрес изображения.
Пример кода:
Тег img Остальное содержимое документа
Результат:
Остальное содержимое документа
Согласитесь, текст рядом с картинкой выглядит не очень красиво.
Для того, чтобы наши изображения выглядели так, как нам хочется их надо выровнять. И поможет нам в этом параметр align .
У этого параметра есть несколько значений. Рассмотрим их все на примерах.
Пример кода с параметром align="left"
Тег img с параметром align="left" Картинка слева, а текст обтекает ее справа и этот текст может занимать несколько строчек.
Результат:
Картинка слева, а текст обтекает ее справа и этот текст может занимать несколько строчек.
Пример кода с параметром align="right"
Тег img с параметром align="right" Картинка справа, а текст обтекает ее слева и этот текст может занимать несколько строчек.
Результат:
Картинка справа, а текст обтекает ее слева и этот текст может занимать несколько строчек.
Пример кода с параметром align="top"
Тег img с параметром align="top" Верхняя граница изображения выравнивается по самому высокому элементу текущей строки. Изображение как бы встраивается в строчку. Если изображение большое, то и строка раздвигается на эту высоту.
Результат:
Верхняя граница изображения выравнивается по самому высокому элементу текущей строки. Изображение как бы встраивается в строчку. Если изображение большое, то и строка раздвигается на эту высоту.
Пример кода с параметром align="texttop"
Тег img с параметром align="texttop" Верхняя граница изображения выравнивается по самому высокому текстовому элементу текущей строки (заглавная буква строки).
Результат:
Верхняя граница изображения выравнивается по самому высокому текстовому элементу текущей строки (заглавная буква строки).
Пример кода с параметром align="middle"
Тег img с параметром align="middle" Выравнивание середины изображения по базовой линии текущей строки.
Результат:
Выравнивание середины изображения по базовой линии текущей строки. * крупный шрифт сделан для наглядности разницы между middle absmiddle
Пример кода с параметром align="absmiddle"
Тег img с параметром align="absmiddle" Выравнивание середины изображения посередине текущей строки.
Результат:
Выравнивание середины изображения посередине текущей строки.
Пример кода с параметром align="bottom"
Тег img с параметром align="bottom" Выравнивание нижней границы изображения по базовой линии текущей строки.
Результат:
Выравнивание нижней границы изображения по базовой линии текущей строки.
Пример кода с параметром align="absbottom"
Тег img с параметром align="absbottom" Выравнивание нижней границы изображения по нижней границе текущей строки.
Результат:
Выравнивание нижней границы изображения по нижней границе текущей строки.
Если же мы хотим, чтобы текст располагался под картинкой, то необходимо использовать тег
с
параметром clear
, который запрещает обтекание. Обтекание можно запретить с правой стороны (right),
с левой стороны (left) и с обеих сторон (all).
Пример кода:
Запрет обтекания картинки
Остальные элементы документа
Результат:
Остальные элементы документа
Размеры изображений
Любое изображение имеет размер, заданный в пикселах. При встраивании изображения на страницу, возможно вам понадобиться уменьшить размер исходной картинки.
Для этого у тега существуют параметры width - ширина и height - высота. Они задаются в пикселах или в процентах (процент от ширины экрана)
При загрузке изображения браузер будет автоматически масштабировать вашу картинку к заданным параметрам ширины и высоты. Только имейте в виду, что неаккуратное задание параметров, может привести к изменению пропорций рисунка, а следовательно, к его искажению.
Пример кода:
Результат:
Отделение изображения от текста
Вы, наверно, обратили внимание, что текст очень близко прилипает к картинкам. Это не всегда красиво. Для решения этой проблемы имеются параметры hspace - горизонтальный отступ и vspace - вертикальный отступ. Отступы задаются в пикселах.
Пример кода:
Тег img с отступами Остальное содержимое документа теперь не прилипает к изображению.
Результат:
Альтернативный текст
Если у пользователя отключен режим загрузки изображений, то вместо картинки он увидит красный крестик (в Internet Explorer) или другую иконку (в других браузерах). Неплохо было бы дать ему подсказку, что изображено на рисунке. Для этого используется параметр alt . Текст из этого параметра будет отображаться вместо картинки (если отключен режим загрузки изображений). В случае же, если картинка отображается, этот параметр дает подсказку при наведении курсора мыши, правда, не во всех браузерах.
Вставляем картинку :
Описание и использование
Тег вставляет изображение в документ HTML.
Заметьте, что изображения технически не вставляются в страницу. На самом деле, изображения ссылаются на HTML страницы. Тег создает контейнер для изображения.
У тега два обязательных атрибута: src и alt.
Разница между HTML и XHTML
В HTML тег не имеет закрывающего тега.
В XHTML тег должен быть правильно закрыт.
Атрибуты "align", "border", "hspace", и "vspace" элемента img устарели и не поддерживаются в XHTML 1.0 Strict.
Совет: Атрибут alt используется как альтернативный текст в случае отсутствия изображения, а не как текст при наведении мышки. Для показа текста при наведении мышки на изображение используйте атрибут title. Вот так: .
Обязательные атрибуты
Необязательные атрибуты
Атрибут | Значение | Описание |
---|---|---|
align | left right top middle bottom | Устарел. Используйте CSS |
border | пиксели | Устарел. Используйте CSS |
height | пиксели % | Определяет высоту изображения |
hspace | пиксели | Устарел. Используйте CSS |
ismap | ismap | Определяет изображение как карту изображение на стороне сервера. Очень редко используется. |
longdesc | URL | Определяет путь к документу, который содержит длинное описание изображения |
usemap | #название_карты | Определяет изображение как карту изображение на стороне сервера. |
vspace | пиксели | Устарел. Используйте CSS |
width | пиксели % | Определяет ширину изображения |
Стандартные атрибуты
Атрибут | Значение | Описание |
---|---|---|
class | имя_класса | Определяет имя класса для элемента |
dir | rtl ltr | Определяет направление текста для контента в элементе |
id | id | Определяет уникальный id для элемента |
lang | код_языка | Определяет код языка для контента в элементе |
style | определение_стиля | Определяет инлайновый стиль для элемента |
title | текст | Определяет дополнительную информацию об элементе |
xml:lang | код_языка | Определяет код языка для контента в элементе, в XHTML документах |
Событийные атрибуты
Атрибут | Значение | Описание |
---|---|---|
onabort | скрипт | Скрипт будет выполнен при проблеме с загрузкой изображения |
onclick | скрипт | Скрипт будет выполнен при клике |
ondblclick | скрипт | Скрипт будет выполнен при двойном клике |
onmousedown | скрипт | Скрипт будет выполнен при нажатии кнопки мышки |
onmousemove | скрипт | Скрипт будет выполнен при движении курсора мышки |
onmouseout | скрипт | Скрипт будет выполнен, когда курсор мышки покинет пределы элемента |
onmouseover | скрипт | Скрипт будет выполнен, когда курсор мышки находится над элементом |
onmouseup | скрипт | Скрипт будет выполнен, когда кнопка мышки будет отпушена |
onkeydown | скрипт | Скрипт будет выполнен при нажатии клавиши |
onkeypress | скрипт | Скрипт будет выполнен при нажатии клавиши и последующего разжатия |
onkeyup | скрипт | Скрипт будет выполнен при разжатии клавиши |
Об этом человеке известно только то,
что он не сидел в тюрьме, но почему не сидел - неизвестно.
Марк Твен.
Э то урок о том, как вставить картинку в HTML , как её оформить, как сделать обтекание картинки текстом и т.д. Ведь известно, что изображения делают сайт более привлекательным и отличным от других ресурсов, поэтому умение использовать тег и его атрибуты весьма пригодится в современном Интернете. Но главное тут - чувство меры!
П ереизбыток графики вызовет утяжеление html-страницы и, соответственно, увеличит время её загрузки. Кроме того, наличие большого числа изображений будет отвлекать посетителей от главного содержимого сайта (если, конечно, графика не является главным содержимым сайта). Так что, соблюдай меру и используй только там, где это нужно. И будет тебе счастье!
В уроке про я уже рассказывал о том, как можно использовать картинки в качестве фона html-документа. Сейчас же поговорим о том, как графика используется в «верхнем слое» html-страницы.
§ 1. Как вставить картинку
Д ля вставки картинок в HTML используется тег IMG с обязательным атрибутом SRC . Этот атрибут указывает браузеру путь к файлу изображения. Т.е. для вставки картинки с названием logo.jpg в определенное место страницы (при условии, что и страница, и картинка расположены в одной папке (каталоге)) нужно в этом месте вставить следующий html-код:
src="logo.jpg">
Е сли картинка и страница расположены в разных каталогах (папках), то нужно указать путь к изображению относительно страницы. Например, если html-страница лежит в каталоге (папке) site, в этом же каталоге (папке) расположен подкаталог (папка) images, в котором и находится наша картинка logo.jpg, то для её вставки нужно написать так:
images/logo.jpg">
А можно не мучиться и указать полный адрес картинки . Например, так:
http://www..png">
В последнем случае браузер отобразит код так:
Примечание. Если картинка расположена на вашем компьютере , а вставить вы её хотите на страницу в Интернете , то ничего не выйдет. Для этого картинку нужно сначала переместить в какое-нибудь место в Интернете (например, ). И указать в коде страницы полный адрес до этого места с картинкой .
П омимо обязательного атрибута SRC у тега IMG есть ещё несколько необязательных атрибутов. Рассмотрим их подробнее.
§ 2. Указание размеров картинки
Н ачнём с атрибутов, которые позволяют задать размеры картинки (точнее, застолбить место под эти размеры на страницы). Вот они:
- width - ширина картинки в пикселах или процентах;
- height - высота картинки в пикселах или процентах.
Е сли используются эти атрибуты, то сначала выделит место под графику, подготовит макет документа, отобразит текст и только затем загрузит изображение. При этом он поместит картинку в прямоугольник выделенного размера, даже если реальные ширина и высота картинки больше (сожмёт) или меньше (растянет). В случае, когда эти атрибуты не используются, браузер будет грузить картинку сразу, а вывод идущих за ней текста и остальных элементов задержится.
Ш ирину и высоту изображений можно указывать как в пикселах (при этом размер картинки будет постоянным вне зависимости от разрешения экрана), так и в процентах (размер картинки будет зависить от разрешения экрана пользователя). Например:
width="50" height="20">
width="10%" height="5%">
§ 3. Альтернативный текст
В случае, если пользователь в настройках браузера отключил показ изображений, то можно вместо картинки вывести альтернативный текст, который бы объяснил, что за графика здесь должна быть. Достигается это путём применения атрибута ALT :
В этом случае браузер зарезервирует место на странице под изображение, но вместо самой картинки покажет текст, который ты напишешь в значении атрибута ALT :
П овторю, это произойдёт, если пользователь отключил показ графики. Если же нет, то картинка скроет собой альтернативный текст.
§ 4. Выравнивание картинки
С помощью уже знакомого тебе атрибута align можно управлять выравниванием картинок относительно других элементов html-страницы. У атрибута align есть несколько значений, но нас больше всего на данный момент интересуют два:
- left - изображение располагается у левого края страницы, а текст обтекает картинку справа;
- right - изображение располагается у правого края страницы, а текст и другие элементы обтекают картинку слева.
Н апример, HTML-код
браузер покажет так
А этот HTML-код:
будет выглядеть вот так:
Д ля прекращения обтекания картинки текстом можно использовать тег BR (знакомый нам из прошлого раздела про ). У тега BR есть атрибут clear , который может принимать три значения:
- left - прекращение обтекания текстом картинок, выровненных по левому краю;
- right - прекращение обтекания текстом картинок, выровненных по правому краю;
- all - прекращение обтекание текстом картинок, выровненных и по левому, и по правому краю.
Описание
Для вставки графических изображений в HTML-документ используется HTML тег (img сокращение от англ. слова image - изображение). Изображения не вставляются напрямую на веб-страницу, тег содержит лишь ссылку на изображение и создает требуемого размера пространство, в котором отображается картинка в графическом формате GIF, JPEG или PNG:
- JPG - наиболее распространенный формат для фотографий. Изображения с расширением.jpg отображают миллионы цветов, что особенно важно для точного отображения различных оттенков и градиентов в фотографиях. Однако, такие изображения не могут содержать прозрачные области.
- GIF используется для простой графики, например, такой как логотипы. Изображения в формате GIF не используются для фотографий, потому что они не могут содержать столько цветовой информации как JPG-изображения. Однако GIF-изображения могут иметь прозрачные области и могут быть сжаты в файлы очень маленьких размеров. Также формат GIF поддерживает анимацию.
- PNG - формат изображений, позволяющий, также как и JPG, отображать миллионы цветов и содержать прозрачные области. Однако, как правило, изображения с расширением.png имеют несколько больший размер, чем JPG или GIF.
HTML тег имеет два обязательных атрибута: src и alt .
Атрибут src выполняет важную роль в отображении графики на странице - задает путь (относительный или абсолютный) к изображению, которое технически не вставляется на страницу: браузер отображает изображение на которое ведет ссылка.
Атрибут alt задает альтернативный текст для изображения, который будет отображен только в том случае, когда изображение не может быть отображено (указан не правильный путь или картинка была удалена).
При необходимости изображение можно сделать ссылкой, для этого нужно всего лишь поместить тег внутрь элемента . При этом вокруг изображения появится рамка, которая легко убирается с помощью CSS :
Изображения также могут быть использованы в качестве карт-изображений - это когда одно изображение содержит несколько активных областей разной формы, каждая из которых является отдельной ссылкой. Такая карта по внешнему виду ничем не отличается от обычного изображения.
Примечание: для добавления изображений на веб-страницу вы также можете воспользоваться CSS свойством background-image , которое позволяет обычный задний фон элемента заменить на картинку.
Атрибуты
src: Указывает браузеру расположение (URL-адрес) нужного изображения. Пример » alt: Предоставляет текстовое описание картинки, выводимое на экран только в случае, если картинка по каким-либо причинам не может быть отображена.Примечание: для создания всплывающей подсказки, при наведении курсора мыши на картинку, нужно использовать глобальный атрибут title. В качестве значения атрибута выступает произвольная строка, в которой можно сообщить дополнительную информацию о картинке.
Пример » Если картинка используется в качестве украшения веб-страницы и не несет в себе никакой смысловой нагрузки, то вместо описания картинки в качестве значения можно оставить пустую строку (alt=""). height: Указывает высоту изображения в пикселях. ismap: Атрибут ismap является атрибутом булева типа. Его присутствие указывает браузеру, что картинка является частью карты-изображения расположенной на сервере (карта-изображение - изображение с интерактивными областями). Допустимые значения логического атрибута ismap: При нажатиии на интерактивную область карты-изображения, координаты клика отправляются на сервер в строке запроса URL-адреса.Примечание: атрибут ismap используется только если элемент является дочерним элементом тега , содержащего атрибут href.
Usemap: Определяет изображение в качестве карты-изображения. Значение (обязательно должно начинаться с символа "# "), указанное в данном атрибуте, ассоциируется со значением атрибута name или id тега
Примечание: атрибут usemap нельзя использовать, если элемент является потомком элемента или
Width: Указывает ширину изображения в пикселях.
Примечание: всегда указывайте атрибуты width и height для изображения. В этом случае пространство требуемое для изображения будет заранее резервироваться браузером при загрузке страницы. Поскольку браузер сам не может заранее вычислить размер изображения, без этих атрибутов разметка страницы во время загрузки может отображаться некорректно, до тех пор пока изображение не будет загружено. Это будет особенно ощутимо для тех пользователей, у которых медленный интернет.
Тег IMG предназначен для отображения на веб-странице изображений в графическом формате GIF, JPEG или PNG. Этот тег имеет единственный обязательный параметр src , который определяет адрес файла с картинкой. Если необходимо, то рисунок можно сделать ссылкой на другой файл, поместив тег IMG в контейнер A . При этом вокруг изображения отображается рамка, которую можно убрать, добавив параметр border=0 в тег IMG .
Рисунки также могут применяться в качестве карт-изображений, когда картинка содержит активные области, выступающие в качестве ссылки. Такая карта по внешнему виду ничем не отличается от обычного изображения, но при этом оно может быть разбито на невидимые зоны разной формы, где каждая из областей служит ссылкой.
Синтаксис
Закрывающий тег
Не требуется.
Параметры
align
- определяет как рисунок будет выравниваться по краю и способ обтекания текстом.
alt
- альтернативный текст для изображения.
border
- толщина рамки вокруг изображения.
height
- высота изображения.
hspace
- горизонтальный отступ от изображения до окружающего контента.
ismap
- говорит браузеру, что картинка является серверной картой-изображением.
lowsrc
- путь к графическому файлу низкого разрешения для предварительного отображения.
src
- путь к графическому файлу.
vspace
- вертикальный отступ от изображения до окружающего контента.
width
- ширина изображения.
usemap
- ссылка на тег MAP
, содержащий координаты для клиентской карты-изображения.
Пример 1. Использование тега IMG
Описание параметров тега IMG
Параметр ALIGN
Описание
Для изображений можно указывать их положение относительно текста или других изображений на веб-странице. Способ выравнивания изображений задается параметром align
тега IMG
.
Синтаксис
Аргументы
В таблице 1 перечислены возможные значение параметра align
и результат его использования.
Значение align | Описание | Пример |
---|---|---|
absbottom | Нижняя граница изображения выравнивается по самому нижнему краю текущей строки. | |
absmiddle | Середина изображения выравнивается по средней линии текста. | Lorem ipsum dolor sit amet, consectetuer adipiscing elit... |
bottom или baseline | Нижняя граница изображения выравнивается по базовой линии текстовой строки. Это значение установлено по умолчанию. | Lorem ipsum dolor sit amet, consectetuer adipiscing elit... |
left | Изображение располагается по левому краю родительского элемента. | Lorem ipsum dolor sit amet, consectetuer adipiscing elit... |
middle | Середина изображения выравнивается по базовой линии текущей строки текста. | Lorem ipsum dolor sit amet, consectetuer adipiscing elit... |
right | Изображение выравнивается по правому краю родительского элемента. | Lorem ipsum dolor sit amet, consectetuer adipiscing elit... |
texttop | Верхняя граница изображения выравнивается по самому высокому текстовому элементу текущей строки. | Lorem ipsum dolor sit amet, consectetuer adipiscing elit... |
top | Верхняя граница изображения выравнивается по самому высокому элементу текущей строки. | Lorem ipsum dolor sit amet, consectetuer adipiscing elit... |
Наиболее популярные параметры - left и right , создающие обтекание текста вокруг изображения. Чтобы текст не прилегал плотно к рисунку, рекомендуется в теге IMG добавить параметры hspace и vspace , задающие расстояние до текста в пикселах.
Хотя все значения параметра align поддерживаются браузерами, аргументы absbottom , absmiddle , baseline и texttop не описаны в спецификации HTML 4.
Значение по умолчанию
bottom
Пример 2. Выравнивание рисунка
Lorem ipsum dolor sit amet, consectetuer adipiscing elit...
Примечание
Хотя все значения параметра align поддерживаются браузерами, аргументы absbottom , absmiddle , baseline и texttop не поддерживаются спецификацией HTML 4.
Параметр ALT
Описание
Параметр alt
устанавливает альтернативный текст для изображений. Такой текст позволяет получить текстовую информацию о рисунке при отключенной в браузере загрузке изображений. Поскольку загрузка изображений происходит после получения браузером информации о нем, то замещающий рисунок текст появляется раньше. А уже по мере загрузки текст будет сменяться изображением.
Браузеры также отображают альтернативный текст в виде подсказки, появляющейся при наведении курсора мыши на изображение.
Синтаксис
Аргументы
Любая подходящяя текстовая строка. Ее обязательно надо брать в двойные или одинарные кавычки.
Значение по умолчанию
Нет.
Пример 3. Добавление альтернативного текста
alt="Вернуться на главную страницу" >
Параметр BORDER
Описание
Изображение, помещаемое на веб-страницу, можно поместить в рамку различной ширины. Для этого служит параметр border
тега IMG
. По умолчанию рамка вокруг изображения не отображается за исключением случая, когда рисунок является ссылкой. Цвет рамки в этом случае совпадает с цветом текста, заданным с помощью стиля или параметра text
тега BODY
.
Синтаксис
Аргументы
Значение по умолчанию
0
Пример 3. Рамка вокруг рисунка
рамка зеленого цвета толщиной 2 пиксела
Параметр HEIGHT и WIDTH
Описание
Для изменения размеров изображения средствами HTML предусмотрены параметры width
и height
. Допускается использовать значения в пикселах или процентах. Если установлена процентная запись, то размеры изображения вычисляются относительно родительского элемента - контейнера, где находится тег IMG
. В случае отсутствия родительского контейнера, в его качестве выступает окно браузера. Иными словами, width=100%
означает, что рисунок будет растянут на всю ширину веб-страницы. Добавление только одного параметра width
или height
сохраняет пропорции и отношение сторон изображения. Браузер при этом ожидает полной загрузки рисунка, чтобы определить его первоначальную высоту и ширину.
Обязательно задавайте размеры всех изображений на веб-странице. Это несколько ускоряет загрузку страницы, поскольку браузеру нет нужды вычислять размер каждого рисунка после его получения. Это утверждение особенно важно для изображений, размещенных внутри таблицы.
Ширину и высоту изображения можно менять как в меньшую, так и большую сторону. Однако на скорость загрузки рисунка это никак не влияет, поскольку размер файла остается неизменным. Поэтому с осторожностью уменьшайте изображение, т.к. это может вызвать недоумение у читателей, отчего такой маленький рисунок так долго грузится. А вот увеличение размеров приводит к обратному эффекту - размер изображения велик, но файл относительно изображения аналогичного размера загружается быстрее. Но качество рисунка при этом ухудшается.
Синтаксис
Аргументы
Любое целое положительное число в пикселах или процентах.
Значение по умолчанию
Исходная ширина или высота изображения.
Пример 4. Размеры изображения
Параметр HSPACE и VSPACE
Описание
Для любого изображения можно задать невидимые отступы по горизонтали и вертикали с помощью параметров hspace
и vspace
. Особенно это актуально при обтекании рисунка текстом. В этом случае, чтобы текст не «наезжал» плотно на изображение, необходимо вокруг него добавить пустое пространство.
Синтаксис
Аргументы
Любое целое положительное число в пикселах.
Значение по умолчанию
0
Пример 5. Отступы от рисунка
Параметр ISMAP
Описание
Параметр ismap
говорит браузеру что рисунок является серверной картой-изображением. Карты-изображения позволяют привязывать ссылки к разным областям одного изображения. Реализуется в двух различных вариантах - серверном и клиентском. В случае применения серверного варианта браузер посылает запрос на сервер для получения адреса выбранной ссылки и ждет ответа с требуемой информацией. Такой подход требует дополнительного времени на ожидание результата и отдельные файлы для каждой карты-изображения.
Отправка данных на сервер происходит следующим образом. Необходимо поместить тег IMG в контейнер A , где в качестве значения параметра href указать адрес CGI-программы. Программа анализирует полученные координаты нажатия мыши, которые считаются от левого верхнего угла изображения, и возвращает требуемую веб-страницу.
Синтаксис
Аргументы
Нет.
Значение по умолчанию
По умолчанию этот параметр выключен.
Пример 6. Рисунок как карта-изображение
Если пользователь установил координаты мыши на изображении 100, 50, то после нажатия на ссылку будет открыт файл по адресу http://www.htmlbook.ru/cgi-bin/map.cgi?100,50. Последние цифры передаются в CGI-программу по методу GET и интерпретируются на сервере.
Параметр LOWSRC
Описание
Параметр lowsrc
используется для отображения рисунка низкого качества перед полной загрузкой конечного изображения. Такой подход предназначен для снижения времени ожидания пользователя. Предварительно ему показывается изображение в низком разрешении или черно-белый рисунок, который быстро загружается из-за небольшого исходного объема файла. Пока пользователь рассматривает его, происходит загрузка изображения хорошего качества, которое постепенно сменяет первоначальное. Размеры этих изображений обязательно должны совпадать.
Синтаксис
Аргументы
Значение по умолчанию
Нет.
Пример 7. Путь к рисунку низкого качества
Параметр SRC
Описание
Адрес графического файла, который будет отображаться на веб-странице. Наиболее популярны файлы в формате GIF и JPEG.
Синтаксис
Аргументы
В качестве значения принимается полный или относительный путь к файлу.
Значение по умолчанию
Нет.
Пример 8. Путь к графическому файлу