HTML / 5. Линейки, изображения и мультимедийные элементы

Изображения в документе

Одной из наиболее подкупающих черт HTML и XHTML является предоставляемая ими возможность включать в текстовый документ изображения либо в виде встроенных компонентов (внедренных изображений), либо отдельных документов, которые могут быть загружены с помощью соответствующей гиперссылки, либо в виде фона документа. Изображения – статические и анимированные пиктограммы, картинки, иллюстрации, рисунки – могут при умеренном их употреблении сделать документ более привлекательным, зазывающим и профессиональным, так же как и более информативным и легким для изучения. Помимо этого существуют способы включения изображения. Четкое выделение шапки и подвала документа при помощи горизонтальных линеекв качестве карты гиперссылок. Однако чрезмерное количество изображений загромождает документ, делает его запутанным и труднодоступным, а заодно увеличивает время, которое необходимо пользователю для загрузки и просмотра ваших страниц.

Форматы изображений
Ни HTML, ни XHTML не дают официальных предписаний для формата изображений. Однако популярные броузеры особенно хорошо приспособлены для работы с определенными форматами, в частности GIF, PNG и JPEG (объяснения в следующих разделах). Большинство других мультимедийных форматов требуют, чтобы пользователь приобрел, установил на своем компьютере и научился успешно применять специальные вспомогательные программы. Поэтому неудивительно, что GIF, PNG и JPEG de facto являются стандартами для изображений в сети.

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

Формат GIF
Формат обмена графикой (Graphics Interchange Format, GIF) был изначально разработан для передачи изображений между пользователями онлайновой службы CompuServe. У этого формата обнаружилось несколько черт, сделавших его популярным при употреблении в HTML- и XHTML-документах. Его кодировка является платформно-независимой, так что, используя подходящую программу-декодер (встроенную в большинство броузеров), вы можете, например, без особых хлопот загрузить и просматривать на персональном компьютере с Windows изображение, созданное и превращенное в GIF-файл на Macintosh.
Вторая главная черта GIF – это применяемая при создании файла особая технология сжатия, которая существенно сокращает его размер, что позволяет передавать изображение по сети быстрее.

Сжатие в GIF производится «без потерь» – никакие данные исходного образца не удаляются и не изменяются, так что в распакованном виде изображение точно совпадет с оригиналом. Кроме того, GIF-изображения легко анимировать. Хотя все файлы с GIF-изображениями неизменно обозначаются именами с расширением .gif (или .GIF), существует две версии GIF – оригинальная GIF87 и расширенная GIF89a, которая поддерживает несколько новых возможностей, распространенных у сетевых авторов, включая прозрачный фон, чересстрочное хранение и анимацию. Популярные броузеры в настоящее время поддерживают обеверсии GIF, использующие одинаковую схему кодировки, которая представляет собой карту значений цвета пиксела. Сами коды берутся
из встроенной в файл восьмибитной таблицы (палитры), что дает не более 256 различных цветов в изображении. В большинстве случаев употребляется меньше цветов: для этого применяются специальные средства, упрощающие слишком богатую палитру графики. При упрощении GIF-изображений создается палитра меньшего размера и увеличивается избыточность данных в попиксельном представлении, что влечет за собой лучшее сжатие файла и, следовательно, более быструю его загрузку.

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

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

Всплывание, прозрачность, анимация
Изображения в формате GIF можно использовать для достижения трех особых эффектов: всплывания (другое название этого явления – чересстрочность), прозрачности и анимации. Всплывающее изображение на глазах материализуется на экране дисплея, тогда как обычное растекается по нему сверху вниз. Обычное изображение в GIF-кодировке представляет собой последовательность пикселов, хранящихся строка за строкой сверху вниз. Тогда как обычное GIF-изображение выводится на экран, словно опускающийся занавес, его всплывающая разновидность открывается, как жалюзи. Дело в том, что при всплывании воспроизводятся не все подряд, а только каждая четвертая строки (сначала первые, кратные четырем, строки, на втором этапе – третьи, и т. д.) оригинального GIF-изображения. Читатель просматривает образ целиком – сверху донизу, хотя и в нечетком виде – за четверть времени, необходимого для того, чтобы загрузить и вывести на экран весь объект. Полученное изображение, прорисованное на четверть, обычно достаточно ясно, чтобы пользователь с медленным сетевым соединением мог определиться, стоит ли ему ждать, пока загрузится остаток файла.

Не все графические броузеры, даже если они умеют отображать чересстрочные GIF-изображения, способны достигать при этом эффекта постепенной материализации картинки. На тех броузерах, которые этопроизводят, эффект детализации может быть подавлен пользователем, указавшим в настройках броузера, что следует ждать, пока изображение полностью загрузится и будет расшифровано, и только тогда выводить его на экран. С другой стороны, старые броузеры всегда загружают и декодируют изображение перед тем, как начать его воспроизводить, и, следовательно, не поддерживают средств чересстрочного вывода.

Другой популярный эффект, достижимый с помощью GIF-изображений (точнее, изображений в формате GIF89а), – это возможность сделать некоторую их часть прозрачной, так что подкладка, находящаяся внизу (обычно фон окна броузера), будет сквозь нее проступать. Прозрачное GIF-изображение выделяет один из цветов в своей палитре, назначая его для окраски фона. Броузер просто игнорирует всякий пиксел, употребляющий этот цвет, позволяя таким образом фону окна проступать сквозь рисунок. Тщательно подрезав края изображения и выбрав сплошной монотонный фон, можно достичь впечатления, что картинка вписывается в страницу без скачков и видимых швов или плывет над ней.

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

Недостатком прозрачных изображений может быть их ужасный вид, когда они окружены прямоугольной рамкой, как, например, бывает при включении их в якорь гиперссылки (тег a), если рамка не удалена явным предписанием. Поток текста также будет «обтекать» прямоугольные границы рисунка, а не его видимые очертания. Результат может выглядеть как «очень одинокое изображение», висящее в пустоте.

Третья замечательная «примочка», реализуемая с помощью изображений в формате GIF89а, – это простая мультипликация. Используя специальную утилиту для GIF-анимации, можно приготовить отдельный GIF89а-файл, содержащий последовательность картинок. Броузер отображает картинки, хранящиеся в файле, одну за другой, создавая эффект, подобный возникающему при быстром перелистывании анимационного буклета, какой у нас был или который мы даже рисовали сами в детстве. Специальные управляющие сегменты между отдельными картинками в GIF-файле позволяют устанавливать число прокруток всей последовательности, продолжительность паузы перед появлением очередного образа, указывать, нужно ли стирать предыдущую картинку (обнажая фон) перед появлением следующей, и тому подобное. Комбинируя эти средства управления с теми, что применяются к обычным GIF-изображениям, включая индивидуальные палит-ры, прозрачность и эффект всплывания, можно создавать очень привлекательные и сложные мультики.

Сила простой GIF-анимации состоит в том, что для достижения требуемого эффекта не нужно специально программировать HTML-документ. Есть, впрочем, одно важное обстоятельство, ограничивающее использование этого средства, делающее его пригодным только для маленьких, размером с пиктограмму, форматов или для узких полосок в окне броузера. Размер файлов GIF-анимации очень быстро растет, даже если вы тщательно избегаете повторения статического содержимого картинок в последовательных кадрах. И если в документе присутствует несколько анимашек, затраты времени для их загрузки могут – и обычно будут – раздражать пользователя. Если в чем и нужно соблюдать умеренность, так это в употреблении GIF-анимации. Никакой из GIF-эффектов – ни всплывание, ни прозрачность, ни анимация – не возникнет сам собой. Вам понадобится специальное программное обеспечение для изготовления GIF-файла.

В наши дни многие программы, работающие с изображениями, сохраняют последние в формате GIF, и большинство из них позволяют получить прозрачные и чересстрочные файлы. Существует также уйма бесплатных программ, специализирующихся на этих задачах, так же как и на создании анимационных файлов. Загляните в ваши любимые архивы программ в Интернете, и вы найдете там средства для создания и преобразования GIF-графики. В главе 17 есть раздел, посвященный созданию прозрачных изображений.

Формат JPEG
Joint Photographic Experts Group (JPEG) – это организация по стандартизации, разработавшая то, что теперь называется JPEG-форматом кодировки изображений. Подобно GIF-форматам, JPEG-изображения являются платформно-независимыми и специально сжатыми для скоростной передачи посредством цифровых коммуникационных технологий. В отличие от GIF, формат JPEG поддерживает десятки тысяч цветов для отображения более детальных, фотореалистических изображений. При этом JPEG использует специальные алгоритмы, обеспечивающие значительно больший коэффициент сжатия. Нередко удается, например, 200-килобайтное GIF-изображение сократить до
30 Кбайт, применяя JPEG. Достигая такого впечатляющего сжатия, JPEG теряет часть содержащихся в изображении данных. Впрочем, можно управлять уровнем потерь при сжатии, применяя специальные JPEG-средства, так что, хотя восстановленное изображение, скореевсего, и не совпадает с оригиналом в точности, оно будет настолько на
него похоже, что большинство людей не заметит разницы.

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

Формат JPEG, обычно обозначаемый расширением .jpg (или .JPG), распознается почти всеми современными графическими броузерами. Изредка встречаются старые броузеры, которые не могут сами воспроизводить JPEG-изображения.

Формат PNG
Технология PNG (Portable Network Graphics, переносимая сетевая графика) была создана в качестве замены GIF, но не из-за того, что GIF плохо справлялся со своими обязанностями. В действительности GIF был и остается самым востребованным форматом в Интернете. Многие пользователи были возмущены, когда в 1993 году, после того как GIF приобрел популярность и широкое распространение, компания Unisys решила зарегистрировать свои авторские права и собирать дань за использование технологии сжатия GIF. Эта акция противоречила философии свободного обмена информацией, которой придерживалось тогдашнее сообщество пользователей Интернета, состоявшее, в основном, из научных работников. Она подтолкнула неформальную группу, возглавляемую Томасом Бутеллом (Thomas Boutell), к разработке альтернативы, а именно PNG.

Преимущества технологии PNG над GIF и JPEG (помимо того, что она предоставляет формат, пользователи которого не рискуют оказаться ответчиками в суде) заключаются в более широком выборе цветовых форматов (24-битовый RGB, шкала оттенков серого и 8-битовая GIF-подобная палитра) и в меньших потерях при сжатии. Уникальными и весьма привлекательными чертами технологии PNG являются альфа-каналы, позволяющие указывать огромное количество слоев прозрачности (более 65 тыс. против одного слоя в GIF) и способные симулировать трехмерные изображения; гамма-коррекция, управляющая
яркостью при переносе с одной платформы на другую и обеспечивающая более четкую графику; а также двухмерное чередование строк, обеспечивающее более точное постепенное проявление картинки.

PNG не поддерживает анимацию. Возможно, этот факт заставит кого-то усомниться в целесообразности перехода на PNG, но мы все-таки советуем вам попробовать эту технологию, особенно ради многоцветных и высококачественных изображений.5.2.2.

Когда следует использовать изображения
Одна картинка может стоить тысячи слов, но не забывайте, что никто не слушает болтунов. Во-первых, и это главное, смотрите на изображения в вашем документе как на средства представления визуальной информации, а не как на приманку для неопытных веб-серферов. Изображения должны помогать тексту легче доходить до читателей, а читателям – легче ориентироваться в документе. Используйте изображения, чтобы пояснить, проиллюстрировать материал и обеспечить его примерами. Сопровождающие текст фотографии, графики, диаграммы, карты и рисунки – это естественные и приемлемые кандидаты. Фотографии товаров – это неотъемлемая часть каталогов и путеводителей по
товарам в интернет-магазинах. Пиктограммы в якорях гиперссылок, снабженные анимацией, могут служить эффективным навигационным инструментом, облегчающим пользователю доступ к внутренним и внешним ресурсам. Если изображение не выполняет ни одной из этих достойных функций, выбросьте его вон из своего документа!

Одно из важнейших обстоятельств, которые необходимо учитывать при добавлении изображений в документ, – это привносимая ими добавочная задержка при получении документа из сети, особенно при модемном соединении. Тогда как обычный текстовый документ может иметь объем не более 10–15 Кбайт, любому изображению понадобятся
сотни килобайт. Кроме того, общее время получения документа состоит не только из суммы времени, потраченного на каждую из его частей, но включает в себя все дополнительные задержки, происходящие при передаче данных по сетям.

В зависимости от скорости соединения (обычно измеряемой в битах или байтах в секунду), а также от уровня загрузки (перегрузки) сети, влияющего на задержки при передаче данных, один документ, содержащий 100-килобайтное изображение, может потребовать менее секунды при кабельном соединении в ранние утренние часы, когда все спят, до более чем десяти минут при подключении через сотовый телефон в полдень. Получили картинку?

Разумеется, можно сказать, что рисунки и прочие мультимедийные «излишества» подталкивают интернет-провайдеров стремиться ко все более быстрому, лучшему, надежному обеспечению доставки сетевых материалов. В ближайшем будущем модемные соединения последуют за почтовыми каретами, уступив место кабельным модемам и ADSL.1
Но цены падают, число потребителей растет – вот и источник задержек. И не будем забывать о броузерах в сотовых телефонах, а также о том, что в странах третьего мира связь ненадежная и медленная. Кроме то-го, когда вы пытаетесь получить доступ к перегруженному серверу, не имеет значения, с какой скоростью могли бы передаваться данные.

Когда следует использовать текст
Текст еще не вышел из моды. Для некоторых пользователей это единственная составляющая вашего документа, которая им доступна. Мы настаиваем, что в большинстве случаев документы должны быть пригодны для употребления теми пользователями, которые не могут просматривать изображения или отключили их автоматическую загрузку, чтобы ускорить воспроизведение страниц. Хотя велико искушение вставлять изображения всюду, где только возможно, случается, что чисто текстовый документ бывает гораздо полезней.

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

Следует создавать чисто текстовые документы, когда скорость доступа критически важна. Если известно, что ваши страницы будут нужны сразу множеству пользователей, то следует позаботиться о них, избегая размещения изображений в документах. В особых, самых критических случаях вы можете создать главную (начальную) страницу, которая позволит читателям выбирать между двумя исполнениями вашего собрания документов, одно из которых содержит рисунки, тогда как другое от них освобождено. (Популярные броузеры обладают специальными пиктограммами, отмечающими место, где могли бы находиться (или вот-вот появятся) загружаемые изображения, которые могут замусорить и испортить макет документа, превратив его в кашу.)

Текст – даже с изображениями, но без всяких пустых украшений или бессмысленной графики – подходит лучше всего, если вы хотите, чтобы документ было удобно обрабатывать поисковым службам, во множестве работающим в сети. Изображения почти всегда игнорируются этими поисковыми средствами. Если главное содержимое страниц составляют рисунки, очень мало информации об этих документах попадет в онлайновые рубрикаторы (сборники ссылок на разнообразные ресурсы сети, отсортированные по темам).

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

Будьте проще
Полноэкранная 24-битовая цветная графика, даже уменьшенная в размере с применением сжатия, осуществляемого при преобразовании в один из стандартных форматов (GIF, PNG или JPEG), все же остается пожирателем сетевых ресурсов. Приобретайте и используйте разнообразные средства управления изображениями, позволяющие оптимизировать изображение под конкретное применение, особенно если вы планируете специальные эффекты вроде анимации GIF или трехмерного эффекта PNG.

Упрощайте свои рисунки.
Не используйте панорамных снимков. Избегайте картинок с обширным и пустым фоном так же, как вычурных рамочек и других занимающих много места элементов. Избегайте также сглаживания (смешивания двух цветов соседних пикселов для получения третьего цвета). Эта техника препятствует сжимаемости ваших изображений. Предпочитайте большие области, покрытые одним цветом, которые легко поддаются сжатию.

Используйте изображения повторно
Это особенно справедливо для пиктограмм и GIF-анимации. Большинство броузеров кэширует компоненты поступающих к ним документов, сохраняя их локальные копии именно для того, чтобы быстро, не обращаясь к сети, восстанавливать данные. Для уменьшения размеров файлов GIF-анимации попробуйте подготовить ее так, чтобы каждое последующее изображение обновляло только ту часть картинки, которая должна измениться, а не весь кадр (это ускорит и смену кадров).

Разделяйте на части большие документы
Это общее правило касается и изображений. Множество небольших сегментов, связанных между собой гиперссылками (конечно же!), снабженное оглавлением, воспринимается пользователями лучше, чем небольшое число документов большего размера. Как правило,
люди скорее предпочтут «перелистывать» страницы, чем сидеть и ждать, пока загрузится большой документ. (Это сродни синдрому перескакивания с одного телевизионного канала на другой.) Есть хорошее правило: не создавайте документы размером больше 50 Кбайт, тогда даже самое медленное соединение не будет травмировать ваших читателей.

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

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

JPEG, PNG или GIF?
Вы можете выбрать только один формат изображения для своих HTML- документов, если ваш источник изображений или программное обеспечение подталкивают к этому. Все три формата практически универсально поддерживаются современными броузерами, так что со стороны пользователей это не создаст проблем.

Тем не менее мы рекомендуем приобрести средства для создания и преобразования изображений во всех трех форматах, чтобы использовать преимущества каждого из них. Например, применяйте способность GIF и PNG создавать прозрачные объекты при изготовлении пиктограмм.

Напротив, используйте глубокое сжатие JPEG, пусть и за счет целостности, для быстрой загрузки больших полноцветных изображений.

Тег <img>
Тег <img> позволяет вставить в текстовый поток документа графическое изображение, на которое он ссылается. Ни до, ни после тега <img> не требуется обязательного присутствия конца абзаца или перехода на новую строку, так что изображение может быть помещено буквально «в линию» с текстом и другим содержимым документа.

Сам формат изображения стандартами HTML и XHTML не определяется, хотя популярные графические броузеры поддерживают GIF-, PNG- и JPEG-расширения. Стандарты также не задают и не ограничивают их размеры. Изображения могут быть сколь угодно многоцветными, но то, как эти цвета будут воспроизводиться, сильно зависит от броузера.В целом, представление изображений во многом определяется броузером. Неграфические броузеры их могут просто игнорировать. Броузеры, работающие в окружении, налагающем некоторые ограничения, способны, в свою очередь, изменять размеры или уровень сложности изображений. И пользователи, особенно те из них, кто располагает медленным соединением с сетью, могут отключать их загрузку. Соответственно вам следует убедиться, что документы сохраняют свой смысл и остаются полезными, даже если изображения полностью из них удалены.

В языке HTML у тега <img> нет закрывающего тега. В XHTML-документе требуется либо косая, закрывающая тег перед знаком ">" (например, <img src="kumquat.gif" />), либо закрывающий тег </img> сразу после открывающего и его атрибутов.

Атрибут src
Атрибут src обязателен для тега <img>. Значением этого атрибута является URL содержащего изображение файла, абсолютный или указанный относительно ссылающегося на него документа. Чтобы не загромождать хранилище документов, авторы, как правило, собирают такие файлы в отдельной папке, именуемой часто «pics» или «images».

К примеру, следующий HTML-фрагмент помещает изображение знаменитой фабрики по расфасовыванию кумкватов в повествовательный текст:

Here we are, on day 17 of the tour, in
the kumquat packing plant:
<p>
<img src="pics/packing_plant.gif">
<p>
What an exciting moment, to see the boxes of fruit piled high to

В этом примере теги абзаца (<p>), окружающие тег <img>, заставляют броузер вывести изображение отдельно, на некотором расстоянии от предшествующего и последующего текста. Текст способен также обтекать изображение.

Атрибут lowsrc
Заботясь о пользователях, особенно о тех, кто располагает медленным подключением к сети, ранние версии Netscape поддерживали атрибут lowsrc, сотоварища src для тега <img>, в качестве средства для ускорения вывода документа. Значение атрибута lowsrc, как и src, – это URL файла изображения, которое броузер Netscape старой версии загружает и воспроизводит, когда впервые встречает тег <img>. Когда этот документ уже полностью загружен и доступен для чтения, Netscape получает изображение, определяемое в атрибуте src.

Ни один броузер, кроме Netscape версии 4 и более ранних, не поддерживает атрибут lowsrc. Начиная с версии 6, Netscape просто использует размеры изображения, указанного в атрибуте lowsrc, для временного выделения места на экране под картинку, пока выводится документ. В старых версиях Netscape размеры lowsrc были нужны для масштабирования окончательного изображения, и эту особенность можно было эксплуатировать для достижения специальных эффектов. Но это уже в прошлом. Мы рекомендуем вам не применять это расширение Netscape и определять пространство на экране явно, с помощью атрибутов height и width, описанных далее в данной главе.

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

Кроме того, Internet Explorer выводит текст, помещенный в атрибуте alt, в виде всплывающей подсказки, когда на него попадает курсор мыши. Поэтому можно вставить короткое замечание, которое будет всплывать, как только пользователь укажет курсором на маленькуювстроенную в текст пиктограмму.

Значение атрибута alt – это строка текста длиной до 1024 символов, с учетом пробелов и знаков пунктуации. Строка должна быть заключена в кавычки. Альтернативный текст может содержать коды специальных символов, но не должен содержать никакой разметки, в частности, никаких тегов стиля.

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

Неграфические, чисто текстовые броузеры, такие как Lynx, например, помещают альтернативное сообщение прямо в содержимое потока, подобно любому другому текстовому элементу. Так что, используемый эффективно, alt может иногда быть заменой отсутствующих изображений. (Пользователи чисто текстовых броузеров будут благодарны за то, что им хотя бы здесь не напоминают, что они второсортные граждане сети.) Например, рассмотрите употребление звездочки в качестве альтернативы графическому маркеру:

<h3><img src="pics/fancy_bullet.gif alt"="*">Предисловие</h3>

Графический броузер отобразит пиктограмму маркера, тогда как неграфический поставит на ее место звездочку. Подобным образом используйте альтернативный текст для замещения графических маркеров элементов списка. К примеру, следующий код:

<ul>
<li> Рецепты блюд из кумкватов <img src="pics/new.gif"
alt="(New!)">
<li> Сроки сбора урожая
</ul>
выводит изображение new.gif в графических броузерах и сообщение
«(New!)» – в текстовых.

Атрибут alt может содержать даже более сложный текст:

Here we are, on day 17 of the tour, in the kumquatpacking plant:
<p>
<img src="pics/packing_plant.gif"
alt="[Image of our tour group outside the main packing
plant]">
<p>
What an exciting moment, to see the boxes of fruit moving

Согласно спецификации HTML 4.01, атрибут alt необходим во всех тегах <img>. Чтобы ваши документы строго соответствовали стандарту, сопровождайте все изображения пустыми атрибутами alt (т. е. пишите alt="").

Атрибут longdesc подобен атрибуту alt, но позволяет более длинные описания. Значение longdesc – это URL документа, содержащего описание изображения. Если оно длиннее 1024 символов, используйте longdesc для ссылки на него. Ни HTML, ни XHTML не определяют, из
чего должно состоять описание, не знает этого и любой броузер, поддерживающий в настоящее время longdesc. Ничто не поможет, когда придется решать, как составлять длинное описание.

Атрибут align
Для изображений стандарты не определяют принятого по умолчанию выравнивания по отношению к тексту и другим изображениям в той же строке – не всегда можно предсказать, как эти компоненты будут выглядеть. В HTML-документах изображения обычно расположены «в линию» только с одной строкой текста. Как принято в печатных
средствах массовой информации текст их «обтекает», так что с изображением могут соседствовать несколько строк, а вовсе не одна.К счастью, создатели документов способны отчасти управлять выравниванием изображений по отношению к окружающему тексту с помощью атрибута align тега <img>. Стандарты HTML и XHTML определяют пять значений для атрибута align: left, right, top, middle, bottom. Значения left и right заставляют текст обтекать изображение, смещенное к соответствующему краю. Оставшиеся три выравнивают изображение в вертикальном направлении по отношению к окружающему тексту.

Все популярные броузеры, включая Opera, Firefox, Netscape и Internet Explorer, соглашаются с тем, что атрибут align=bottom является умолчанием вертикального выравнивания, и одинаково располагают картинки выше самого верхнего символа в строке текста.

В то же время броузеры расходятся во мнении, как располагать относительно текста изображения с атрибутом align=middle. Netscape и Opera помещают изображение, ориентируясь на среднюю линию текста. Что касается броузеров Internet Explorerи Firefox, они располагают изображение по средней линии самого высокого элемента, который не обязательно является текстовым.

Кроме того, броузеры в той или иной степени поддерживают пять дополнительных признаков вертикального выравнивания изображений:

texttop, center, absmiddle, baseline и absbottom (кто не догадался об их
смысле, поднимите руку):
texttop

Выражение align=texttop приказывает броузеру выровнять верхний край изображения с верхним краем самого высокого элемента текста в текущей строке. Иначе действует значение top, которое выравнивает верхний край изображения с верхним краем самого высокого элемента, текстового компонента или изображения в текущей строке. Если строка не содержит других изображений, выступающих над текстом, texttop и top имеют одинаковый эффект. Opera не поддерживает texttop, но другие популярные броузеры интерпретируют его строго в соответствии с этим описанием.

center

Впервые появившись в броузере Internet Explorer и Netscape, значение center интерпретируется в броузерах Internet Explorer, Netscape и Firefox точно так же, как и значение middle. Только не будем забывать, что значение middle каждый из них понимает по-своему.

Opera игнорирует выражение align=center.
absmiddle

Если вы присвоите атрибуту align тега <img> значение absmiddle, броузер выставит абсолютную середину изображения против абсолютной середины текущей строки. Не так действуют значения middle и center, которые выравнивают середину изображения с базовой линией текущей строки текста. В то время как Netscape и Opera не проводят разницы между absmiddle и middle, Firefox и Internet Explorer используют эти значения для избирательного выравнивания изображений по средним линиям. Иными словами, Firefox и Internet Explorer воспринимают признак absmiddle так же, как Netscape воспринимает middle.bottom и baseline (принимаются по умолчанию)

Значения bottom и baseline имеют тот же эффект, как если бы вы не включили атрибут выравнивания совсем. Броузер выравнивает нижний край изображения с базовой линией текста. Не следует путать это с действием значения absbottom, которое учитывает и те части букв, что спускаются ниже базовой линии. (Если вы все еще держите руку поднятой, можете ее опустить.)

absbottom

Выражение align=absbottom предлагает броузеру выровнять нижний край изображения с истинным нижним краем текста в текущей строке. Истинный нижний край – это самая нижняя точка текста с учетом всех нижних выносных элементов (например, нижняя
часть символа «y»), даже если таковых в строке нет. Базовая линия проходит по нижнему краю «v» в символе «y». Opera, носитель стандарта, игнорирует значение absbottom, а другие популярные броузеры обращаются с ним согласно описанию.Используйте top и middle для совмещения пиктограмм, маркеров списков и других специальных изображений с близлежащим текстом.

В других случаях align=bottom (выбирается по умолчанию) достигает лучшего внешнего вида. Выравнивая одно или несколько изображений в строке, выбирайте то значение атрибута, которое позволит добиться наилучшего внешнего вида вашего документа.

Обтекание изображений текстом
Значения left и right атрибута alignment предлагают броузеру поместить изображение соответственно у левого или правого края текстового потока. Затем броузер выводит оставшееся содержимое документа в свободное пространство, смежное с изображением. В результате содержимое документа, следующее за изображением, обтекает его.

<img src="pics/kumquat.gif" align=left>
The kumquat is the smallest of the citrus fruits, similar in appearance to a
tiny orange. The similarity ends with its appearance, however. While oranges
are generally sweet, kumquats are extremely bitter. Theirs is an acquired
taste, to be sure.

Можно поместить изображения одновременно по обоим краям текста, и он будет выводиться между ними сверху вниз:

<img src="pics/kumquat.gif" align=left>
<img src="pics/tree.gif" align=right>
The kumquat is the smallest of the citrus fruits, similar in appearance to a
tiny orange. The similarity ends with its appearance, however. While oranges
are generally sweet, kumquats are extremely bitter. Theirs is an acquired
taste, to be sure.

Когда текст обтекает изображение, левый (или правый) край страницы временно переопределяется и становится краем изображения, противоположным тому, которым оно примыкает к краю страницы. Последующие изображения с тем же выравниванием позиционируютсяотносительно предыдущего. Следующий исходный текст достигает этого потрясающего эффекта:

<img src="pics/marcia.gif" align=left>
Marcia!


<img src="pics/jan.gif" align=left>
Jan!


<img src="pics/cindy.gif" align=left>
Cindy!

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

Центрирование изображений
Заметили ли вы, что невозможно горизонтально центрировать изображение в окне броузера с помощью атрибута align? Значения middle и absmiddle вертикально центрируют его по отношению к текущей строке, но положение изображения по горизонтали определяется предшествующим содержимым текстового потока и размером окна броузера.
Центрировать изображение по горизонтали можно, только изолировав его от окружающего содержимого с помощью тегов абзаца, раздела или новой строки. Затем следует использовать либо тег <center>, либо атрибут align=center для тегов абзаца или раздела. К примеру:

Kumquats are tasty treats


<center>
<img src="pics/kumquat.gif">
</center>
that everyone should strive to eat!

Используйте тег абзаца с атрибутом align=center, если хотите, чтобы над изображением и под ним оставалось свободное место.

Kumquats are tasty treats
<p align=center>
<img src="pics/kumquat.gif">
</p>
that everyone should strive to eat!

Атрибут align и тег <center> нежелательны
В HTML 4 и XHTML атрибут align признан нежелательным для всех тегов, включая <img>. Предпочтительнее использовать таблицы стилей. Тег <center> тоже объявлен нежелательным. Тем не менее атрибут align и тег <center> очень популярны среди HTML-авторов и хорошо поддерживаются известными броузерами. Так что, хотя мы и ожидаем, что когда-нибудь align и <center> исчезнут, это случится не скоро. Только потом не говорите, что вас не предупреждали.

Что делать, если вы решили не использовать align и <center>? Некоторые авторы и многие WYSIWYG-редакторы выравнивают содержимое с помощью таблиц HTML/XHTML. Это первый путь, правда, тернистый. Консорциум W3C хочет, чтобы вы пользовались стилями. Например, применяйте стиль margin-left для смещения изображения от левого края экрана.

Атрибут border
Броузеры обычно заключают изображения, которые в то же время являются гиперссылками (расположены в теге a), в цветную рамку толщиной в два пиксела, давая этим читателю знать, что такое изображение можно выбрать и посетить ассоциированный с ним документ.

Используйте атрибут border и его значение, определяющее толщину рамки в пикселах, чтобы убрать ее (border=0) или сделать толще. Учтите, что этот атрибут также нежелателен в HTML и XHTML (подобный эффект достигается с помощью таблиц стилей), но по-прежнему поддерживается популярными броузерами.

(a href="test.html")
<img src="pics/kumquat.gif" border="1" />
(/a)
(a href="test.html")
<img src="pics/kumquat.gif" border="2" />
(/a)
(a href="test.html")
<img src="pics/kumquat.gif" border="4" />
(/a)
(a href="test.html")
<img src="pics/kumquat.gif" border="8" />
(/a)

Удаление рамки вокруг изображения
Можно полностью удалить рамку вокруг изображения, служащего гиперссылкой, указав в теге <img> атрибут border=0. Отсутствие рамки, особенно у карт, часто улучшает внешний вид страницы. Изображения, суть которых служить кнопками для перехода на другие страницы, тоже выглядят приятнее без рамок.

Будьте, однако, осторожны – удалив рамку, вы можете ухудшить качество страницы. Убирая рамку, вы удаляете главный визуальный признак гиперссылки, затрудняя читателю ее поиск на странице. Броузер изменит курсор мыши, когда он попадет на гиперссылку, но нельзя заранее предполагать, что его туда поставят, так же как нельзя заставить пользователя проверить на наличие гиперссылок все необрамленные картинки страницы.

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

Атрибуты height и width
Видели ли вы когда-нибудь, как содержимое документа при загрузке начинает неожиданно сдвигаться, занимая новое положение? Это происходит из-за того, что броузер каждый раз перестраивает макет страницы, чтобы принять и расположить на нем любое новое изображение.

Броузер определяет величину объекта и необходимый для его размещения на странице прямоугольный участок, когда получает файл изображения и извлекает из него спецификацию его размеров. Затем броузер подправляет макет воспроизводимой страницы так, чтобы в нем можно было разместить новое изображение. Это не самый эффектив-
ный способ вывода, поскольку броузеру приходится последовательно проверять все файлы изображений и вычислять необходимое пространство на экране, прежде чем воспроизводить соседнее и последующее содержимое документа. Все это может значительно увеличить время на вывод документа и помешать пользователю при чтении.
Более эффективный способ определения размеров изображения состоит в использовании авторами атрибутов height и width тега <img>.

В этом случае броузер может зарезервировать место до начала фактической загрузки объекта, что ускоряет вывод документа и устраняет сдвиги содержимого. Оба атрибута принимают целые значения, обозначающие размеры изображения в пикселах. Порядок, в котором они появляются в теге <img>, значения не имеет.

Изменение размера изображений и «заливка»
Скрытые возможности, содержащиеся в атрибутах height и width, связаны с тем, что никто не обязан указывать реальные размеры изображения. Значения атрибутов могут быть и больше и меньше действительных размеров объекта. Броузер автоматически масштабирует изображение, чтобы поместить его в выделенное пространство. Это дает вам грубый и неприличный способ создания крошечных версий больших изображений и увеличения очень маленьких картинок. Будьте, однако, осторожны – броузеру все равно придется загрузить файл целиком, независимо от того, каким будет размер, отведенный на экране, и вы исказите изображение, если не соблюдете пропорции между его изначальной высотой и шириной.

Другой прием с атрибутами height и width позволяет легко «заливать» области на странице и увеличивает скорость исполнения документа. Допустим, вы хотите вставить в макет цветную полосу. Чем создавать изображение полного размера, сделайте лучше картинку высотой и шириной в один пиксел и нужного цвета. Затем используйте атрибуты height и width, чтобы растянуть ее до требуемой величины:

<img src="pics/one-pixel.gif" width=640 height=20>

Изображения меньшего размера загружаются быстрее, чем полномасштабные, а атрибуты width и height (в окне броузера Firefox, например) создают из крошечной точки, полученной броузером, цветную полосу, о которой вы мечтали.

Еще одна последняя хитрость с атрибутом width состоит в присвоении ему значения в процентах, а не в абсолютном числе пикселов. Это заставляет броузер масштабировать изображение в процентном отношении к ширине окна документа. Так, чтобы создать цветную полосу высотой в 20 пикселов и шириной во все окно, можно написать:

<img src="pics/one-pixel.gif" width="100%" height=20>

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

Проблемы с width и height
Хотя атрибуты height и width для тега <img> могут улучшить процесс исполнения документа и позволяют совершать с их помощью ловкие проделки, у их применения есть и обратная сторона.Броузер выделяет на экране прямоугольник, размеры которого описаны в теге <img>, даже если пользователь отключил автоматическую загрузку изображений. Ну и с чем тогда остается читатель, как не со страницей, заполненной полупустыми рамками, содержащими бессмысленные пиктограммы. Такая страница выглядит недоделанной и практически бесполезна. Если же размеры не указаны, броузер просто вставляет замещающие изображения пиктограммы в окружающий текст, так что на экране что-то можно хотя бы прочитать.

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

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

Атрибуты hspace и vspace могут обеспечить ваши картинки жизненным пространством. С помощью hspace вы указываете число пикселов дополнительного расстояния, которое нужно оставить справа и слева от изображения. Значение vspace – это число пикселов сверху и снизу:

<img src="pics/kumquat.gif" align=left>
The kumquat is the smallest of the citrus fruits, similar
in appearance to a tiny orange. The similarity ends with its
appearance, however. While oranges are generally sweet,
kumquats are extremely bitter. Theirs is an acquired taste,
to be sure. Most folks, at first taste, wonder how you could
ever eat another, let alone enjoy it!
<p>
<img src="pics/kumquat.gif" align=left hspace=10 vspace=10>
The kumquat is the smallest of the citrus fruits, similar
in appearance to a tiny orange. The similarity ends with its
appearance, however. While oranges are generally sweet,
kumquats are extremely bitter. Theirs is an acquired taste,
to be sure. Most folks, at first taste, wonder how you could
ever eat another, let alone enjoy it!

Нет сомнений, что вы согласитесь: дополнительное пространство вокруг изображения облегчает чтение текста и делает страницу в целом более привлекательной.

Атрибуты ismap и usemap
Атрибуты ismap и usemap для тега <img> сообщают броузеру, что изображение представляет собой «навигационную карту», содержащую одну или несколько гиперссылок, которые пользователь может выбирать мышью. Атрибут ismap указывает на серверную навигационную карту и может определяться только в гиперссылочном теге (a).

Например (обратите внимание на избыточный атрибут и его значение, а также на завершающую косую в теге <img>; это недвусмысленные признаки XHTML):

(a href="/cgi-bin/images/map2")
<img src="pics/map2.gif" ismap="ismap" />
(/a)

Броузер автоматически посылает серверу координаты мыши относительно левого верхнего угла изображения, когда пользователь щелкает где-то на изображении ismap. Специальная программа на сервере (/cgi-bin/images/map2 в нашем примере) может затем употребить эти
координаты при создании ответа.

Атрибут ismap – это деталь серверного механизма, поскольку он предполагает обработку пользовательского ввода на сервере. Атрибут usemap обеспечивает механизм клиентской навигационной карты, который эффективно избегает обработки координат мыши со стороны сер-вера и сопряженных проблем и задержек, связанных с передачей данных по сети. Используя специальные теги <map> и , HTML-авторы указывают на карте области (которые по сути являются гиперссылками) и присваивают соответствующие этим областям URL. Значением атрибута usemap служит URL, указывающий на специальный <map>-раздел. Броузер на компьютере пользователя преобразует координаты щелчка на изображении в некоторое действие, например, загрузку и отображение другого документа.
К примеру, следующий исходный текст выделяет на карте map2.gif размером 100×100 пикселов четыре области, щелчок мышью на каждой из которых вызывает свой документ. Отметьте, что мы законно включили в тег <img> атрибут ismap, который дает пользователям с броузерами, не поддерживающими usemap-механизм, возможность применять альтернативную схему обработки карты с помощью программы на сервере:

(a href="/cgi-bin/images/map2")
<img src="pics/map2.gif" ismap usemap="#map2">
(/a)
...
<map name="map2">




</map>

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

Преимущество обработки карты со стороны клиента по схеме usemap состоит в том, что она не требует сервера или серверного программного обеспечения, и таким образом, в отличие от механизма ismap, может использоваться в отрыве от сети с применением только локальных файлов или CD-ROM.

Атрибуты class, dir, event, id, lang, style и title
Несколько почти универсальных атрибутов дают общий способ пометить (id) или назвать (title) содержимое тега для дальнейших ссылокили автоматической обработки, изменить характеристики отображения содержимого тега (class, style), указать используемый язык (lang) и связанное с ним направление отображения текста (dir). И, конечно, на все совершаемые пользователем действия, которые связаны с содержимым тега, броузер может соответствующим образом отреагировать с помощью on-атрибутов.

Среди множества этих HTML 4- и XHTML-атрибутов id важнее всех. Он позволяет пометить изображение для доступа к нему в будущем со стороны программы или операций броузера.

Остальные атрибуты спорны в контексте тега <img>. Естественно, существует возможность влиять на вывод изображения при помощи таблиц стилей, не вредно включить в тег и атрибут title (хотя атрибут alt лучше). И трудно себе вообразить, какое действие на изображение могли бы оказывать атрибуты языка (lang) и направления вывода (dir).

Атрибуты name, onAbort, onError, onLoad и другие атрибуты событий
В настоящее время все популярные броузеры последовали примеру Netscape и поддерживают четыре атрибута для <img>, позволяющих использовать JavaScript для манипулирования изображениями. Первый – это атрибут name. Ставший избыточным с появлением стандартного атрибута id1, атрибут name позволяет поименовать изображение, чтобы иметь возможность ссылаться на него из JavaScript-программы. К примеру:

<img src="pics/kumquat.gif" name="kumquat"> позволит вам упомянуть изображение кумквата в функции JavaScript как «kumquat», чтобы его изменить или удалить. Вы не сможете воздействовать на конкретное изображение с помощью JavaScript, если ему не присвоено имя или с ним не связано определенное значение id.

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

Популярные броузеры вызывают обработчик события onAbort, если читатель останавливает загрузку изображения, нажав, как это обычно бывает, на кнопку «Stop». Вы можете, например, применять onAbort сообщение, предупреждающее пользователя, когда он останавливает загрузку существенного изображения, такого как, скажем, карты со
ссылками:

<img src="pics/kumquat.gif" usemap="#map1"
onAbort="window.alert('Caution: This image contains important hyperlinks.
Please load the entire image.')">

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

Современные броузеры исполняют код JavaScript, связанный с атрибутом onLoad тега <img> сразу после того, как броузер успешно загрузили вывел изображение.

Комбинирование атрибутов в теге <img>
Можно комбинировать стандартные и относящиеся к расширениям атрибуты в любых случаях, когда это имеет смысл. Порядок, в котором перечисляются атрибуты, не важен. Остерегайтесь только избыточных атрибутов, так как иначе вы не сможете предвидеть результат.

Видеорасширения
Internet Explorer поддерживает специальные видеорасширения атрибута тега <img>, которые позволяют вам встраивать видеоролики в HTML-документы. Это controls, dynsrc, loop, и start. Они не являются частью HTML 4 и вряд ли станут стандартными в XHTML. Пользователям приходится явно включать эту функциональность броузера Internet Explorer флажком «Воспроизводить видео на веб-страницах» на вкладке «Дополнительно».

Эквивалентное поведение других популярных броузеров достигается за счет программных расширений, известных как плагины (plug-ins). Плагины доставляют читателям лишние хлопоты: каждый пользователь должен раздобыть и установить подходящую программу, прежде чем сможет просматривать встроенное в страницу видео. Расширения тега <img>, которые принял Internet Explorer, напротив, делают видео собственной частью броузера.

Атрибут dynsrc
Используйте атрибут dynsrc, расширяющий тег <img>, для воспроизведения видеоролика в одном из популярных форматов (AVI, MPG или MPEG, MOV, WMV и др.) в окне Internet Explorer. Обязательное значение этого атрибута представляет собой заключенный в кавычки URL файла с видео. Следующий пример представляет тег и его атрибут для воспроизведения AVI-видео, содержащегося в файле intro.avi:

<img dynsrc="movies/intro.avi">

Internet Explorer выделяет прямоугольную область в окне документа и показывает в нем видео в сопровождении аудио, если оно входит в клип и если ваш компьютер может его воспроизводить. Internet Explorer обращается с видео, на которое ссылается dynsrс, как с обычными изображениями, – помещает в строку с текущим содержимым документа в соответствии с размерами рамки видео. И подобно обычным изображениям, видео, на которое ссылается dynsrс, запускается сразу же после того, как оно загружено с сервера. Вы можете изменить это поведение так же, как и управлять некоторыми другими характеристиками воспроизведения видео с помощью других атрибутов, описанных ниже.
Поскольку другие броузеры в настоящее время не поддерживают специальных атрибутов для управления видео, которые ввел Internet Explorer, они могут быть приведены в замешательство тегом <img>, который не содержит обязательного в других случаях атрибута src и URL изображения. Мы рекомендуем включать атрибут src и значимый URL во всякий тег <img>, включая и те, что предназначены для ссылок на видео для пользователей Internet Explorer. Другие броузеры на месте видео отобразят картинку, Internet Explorer поступит наоборот, покажет видео, но не покажет картинку. Заметьте, что порядок атрибутов значения не имеет. В следующем примере:

<img dynsrc="movies/intro.avi" src="pics/mvstill.gif">

Internet Explorer загрузит и воспроизведет AVI-клип intro.avi, а другие графические броузеры загрузят и покажут изображение mvstill.gif.

Атрибут controls
Обычно Internet Explorer проигрывает видео в окне только один раз, не предоставляя пользователю никаких видимых средств управления.

В старых версиях броузера Internet Explorer пользователь мог перезапустить, остановить и продолжить клип, щелкая мышью на области вывода, но эти возможности уже не поддерживаются, начиная с версии 5. Кроме того, если видеоклип содержал звуковую дорожку, Internet Explorer старых версий добавлял регулятор громкости. Пример:

<img dynsrc="movies/intro.avi" controls src="pics/mvstill.gif">5.2.7.3.

Атрибут loop
Internet Explorer проигрывает клип от начала и до конца один раз сразу после загрузки. Aтрибут loop для тега <img> позволяет заставить клип исполняться повторно целое число раз, равное значению атрибута, или бесконечно, если установлено значение infinite. Пользователь может разорвать цикл воспроизведения, нажав кнопку «Стоп» (если имеются элементы управления) или перейдя на другой документ.

Клип intro.avi, запущенный в следующем примере, будет исполнен с начала и до конца, затем снова начнется с начала и будет проигран до конца еще девять раз:

<img dynsrc="movies/intro.avi" loop=10 src="pics/mvstill.gif">

Тогда как следующий HTML-код заставит клип воспроизводиться без конца:

<img dynsrc="movies/intro.avi" loop=infinite src="pics/mvstill.gif">

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

Атрибут start
Обычно Internet Explorer начинает исполнение клипа сразу после его загрузки. Такое положение дел можно изменить при помощи атрибута start в теге <img>. Присвоив ему значение mouseover, можно отложить воспроизведение до того момента, как мышь пользователя попадет в область вывода клипа. Другое допустимое значение атрибута fileopen соответствует принятому по умолчанию исполнению сразу после загрузки. Это свойство упоминается здесь, потому что оба значения могут быть присвоены атрибуту совместно, чтобы клип был исполнен один раз при загрузке, а затем проигрывался всякий раз, когда пользователь попадает мышью в поле вывода. При комбинировании значений атрибута start они разделяются запятой без пробелов между ними и заключаются в кавычки.

Например, уже надоевшее видео intro.avi будет исполнено первый раз сразу после того, как пользователь Internet Explorer загрузит HTML-документ, содержащий ссылку на него, а затем будет проигрываться всякий раз, когда мышь попадет в область вывода:

<img dynsrc="movies/intro.avi" start="fileopen,mouseover"
src="pics/mvstill.gif">

Комбинирование атрибутов <img>, относящихся к видео
Обращайтесь со встроенным видео для Internet Explorer так же, как с изображениями, комбинируя и подбирая различные атрибуты, относящиеся не только к видео, но и к стандартным или принадлежащим расширениям тега <img>. К примеру, можно выровнять видео (или заменяющее его изображение, если документ воспроизводится другим броузером) по правому краю окна броузера:

<img dynsrc="movies/intro.avi" src="pics/mvstill.gif" align=right>

Комбинировать атрибуты для достижения спецэффектов – это верное дело. Мы также рекомендуем комбинировать атрибуты, чтобы предоставить пользователю возможность управления.

Не трудно, манипулируя атрибутами, отключить воспроизведение видео до появления мыши в области вывода. Видео волшебным образом оживает и крутится без конца:

<img dynsrc="movies/magic.avi" start=mouseover
loop=infinite src="pics/magic.gif">

Статьи по HTML на эту тему:

Анимация текста
Другое мультимедийное содержимое
Звуковой фон
Цвета документа и фоновые изображения