Графические файлы включаются в HTML документы с помощью команды IMG. Допускается использование файлов в формате GIF или JPG/JPEG (для систем, работающих под MS Windows, допускаются файлы формата BMP).
Следующий пример демонстрирует, вставку в документ GIF файла:
<IMG SRC="icons/earth.gif" WIDTH=46 HEIGHT=46 ALT="Земля"> |
Атрибут SRC= определяет URL адрес (имя) графического файла. В приведенном примере файл будет размещен в квадрате шириной 46 и высотой 46 пикселей соответственно. Если размеры указанные атрибутами HEIGHT= (высота) и WIDTH= (ширина), не совпадают с размерами графического файла, то последний масштабируется. Масштабирование может привести к резкому ухудшению качества вывода на экран графического файла, поэтому рекомендуется задавать размеры соответствующие размерам изображения в пикселях.
Рекомендуется для больших графических файлов (более 10 Kb) всегда задавать их размеры, для убыстрения работы броузера. Если размеры не заданы, то встретив графический файл броузер прекращает вывод текста и ждет пока перекачается вся картинка, чтоб определить ее размеры.
Атрибут ALT= содержит надпись, которая появляется при наведении мышки на изображение. Этот же текст появится на месте рисунка, если в броузере включен режим "не показывать картинки" или вследствие медленной скорости перекачки вы не получили файл по сети.
Если вы вставляете команду IMG в документ, то броузер размещает следующий за ней текст внизу от картинки. Используя атрибут ALIGN= можно переместить, следующий перед и за картинкой текст.
Допустимые значения атрибута ALIGN=
"Плавающие" картинки
Используя атрибут ALIGN= со значениями LEFT или RIGHT можно создать "плавающую" картинку, которую будет обтекать текст. В конце "плавающего" объекта обязательно должна присутствовать команда BR с атрибутом CLEAR=, который прекращает обтекание картинки. После этой команды текст выводится ниже графического файла.
Рассмотрим следующий пример:
<IMG SRC="picture.gif" ALIGN=LEFT HSPACE=4> Здесь располагается текст, который следует поместить справа рядом с картинкой. Текст должен обтекать картинку <BR CLEAR=LEFT>Здесь располагается текст, который следует поместить ниже картинки. |
Что даст:
Здесь располагается текст, который следует поместить справа рядом с картинкой.
Текст должен обтекать картинку
Здесь располагается текст, который следует поместить ниже картинки.
Атрибут HSPACE= задает горизонтальный отступ между текстом и картинкой. Если данный атрибут не задан, то текст будет располагаться вплотную к картинке. (См. также атрибут VSPACE=).
Несколько советов:
Всегда использовать атрибуты задания размера картинки. В этом случае броузер, не дожидаясь пока перекачается вся картинка, будет подолжать показывать документ дальше.Использовать картинки в формате JPEG/JPG для фотографий; в формате GIF - для таблиц или графиков.
Если хотите чтобы пользователь с интересом читал ваши страницы, то не вставляйте в документ картинки объемом более 40 Kb. Для картинок большего размера следует использовать гиперссылку с обязательными указанием ее объема (наши каналы пока еще недостаточно быстры, чтоб перекачивать большой объем данных).
Для картинок высокой цветовой разрешимости желательно применять универсальную палитру цветов, «безопасных» при использовании в интернете.
Не злоупотребляте анимационными GIF'ам (такими как на этой странице), это сильно затрудняет просмотр web-страниц, особено для Netscape.
Картинка может быть средством задания и управления выбором гиперссылок в HTML документе. В этом случае на команду IMG должна указывать гиперссылка, определяемая командой A.
По умолчанию броузер рисует рамку вокруг картинки, которая отмечена как гиперссылка. Вы можете убрать отрисовку рамки, использовав атрибут BORDER= в команде IMG с значением ноль.
Кроме этого вы имеете возможность создать "активную" (с гиперссылками) картинку, в которой разные части картинки имеют разные ссылки, что является достаточно мощным аппаратом навигации в WWW.
Для задания информации о гиперссылках в рисунке, которая включается в HTML документ, используется атрибут USEMAP= в команде IMG. Сама информация о гиперссылках определяется командами MAP и AREA, как это показано ниже:
<MAP NAME="map1"> <AREA SHAPE="RECT" COORDS="0, 0, 16, 16" HREF="S1.html"> <AREA SHAPE="RECT" COORDS="16, 0, 16, 16" NOHREF> <AREA SHAPE="RECT" COORDS="0, 16, 16, 16" HREF="S2.html"> <AREA SHAPE="RECT" COORDS="16, 16, 16, 16" HREF="S3.html"> <AREA SHAPE=default HREF="other.html"> </MAP> <IMG BORDER=0 SRC="map1.gif" USEMAP="#map1"> |
Чтобы увидеть пример работы активной картинки нажми здесь.
В этом примере картика была размечена равными прямоугольниками (rectangular areas). Одна область является непомеченной, остальные три помечены документами S1.html, S2.html, S3.html соответсвенно.
Команда AREA позволяет также помечать области окружностями (CIRCLES) и многоугольниками (POLYGONS).
Атрибут COORDS задает список координат:
Если две или боле областей пересекаются, то броузер выбирает первую из тех, что описаны в команде MAP, непомеченные области никак не отвечают на вызов.
Замечание
MS Internet Exporer не обрабатывет команду "ответ по умолчанию"
несмотря на команду
<AREA SHAPE=default HREF="other.html">