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

HTML

Глава 6. Изображения

Восприятие Web-страницы резко меняется, как только на ней появляются мультимедийные объекты: изображения, музыка, анимация или видео. Все они хранятся в отдельных файлах специальных форматов. Для отображения такой информации применяется два подхода. При первом информация воспроизводится самим браузером (чаще всего используется для графики). При втором обработка производится дополнительными программами, которым передается управление. Такие программы могут быть как независимыми (например, Microsoft Word), так и расширяющими возможности браузеров — так называемые плагины (plug-ins), которые обычно необходимо дополнительно скачать и установить на ваш компьютер.

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

Содержимое файла естественным образом определяется по его расширению, например, графические форматы, используемые в Интернете, имеют расширения: JPG, GIF, PNG. Другой способ заключается в указании атрибута content в служебном элементе <meta>. Значением атрибута является строка, указывающая МIМЕ-тип файла, которая может принимать, например, значения image/gif. Подробный список этих MIME-типов можно найти в Приложении 4.

Изначально браузеры распознают и отображают три формата растровой графики:

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

Для отображения других форматов необходимо устанавливать плагины или запускать Java-апплеты.

Векторная графика представлена технологиями Shockwave и Flash от компании Macromedia, но требует установки дополнительных модулей.

Осознание этого факта привело к тому, что современные Web-порталы не злоупотребляют графикой, а делают упор на полезности информации. Тем не менее представить современный сайт без графики невозможно. Поэтому девиз при использовании мультимедиа и изображений должен быть таким: «Чувство меры!». Размер файла более 50 Кб следует считать скорее исключением, чем нормой. Эмпирическое правило не рекомендует использовать графические файлы размером более 35 Кб.

Элемент <img>

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

Синтаксис: одиночный тег с двумя обязательными атрибутами 

<img src="URL" alt="альтернативный текст">
  • src — значение определяет URL (адрес) загружаемого графического файла. Может быть как абсолютным, так и относительным.

При отображении Web-страницы прежде всего загружается текстовая часть, а затем — более ёмкие графические файлы. В окне браузера вместо этих файлов сначала появляются прямоугольные области, зарезервированные под рисунки. <img> является элементом уровня текста. По умолчанию рисунок будет выводиться в общем потоке как одна большая буква в том месте, где встретится тег <img>. Как правило, первоначальные изображения представляются в виде небольшой пиктограммы (рис. ). Уже на этом этапе можно дать знать пользователю, загрузку какого рисунка он ожидает. Это очень полезно для пользователей текстовых браузеров или для тех, у кого отключено воспроизведение графики.

Для отображения такого поясняющего рисунок текста служит атрибут

  • alt — значением атрибута является строка, которая выводится в качестве поясняющего текста. Современные браузеры также отображают альтернативный текст в качестве подсказки при наведении указателя мыши на рисунок.

Все остальные атрибуты являются необязательными:

  • align — задает расположение рисунка относительно текущей строки. Может принимать следующие значения:
    • bottom — низ изображения выравнивается вертикально по базовой линии (по умолчанию);
    • middle — центр изображения выравнивается вертикально по базовой линии;
    • top — верх изображения выравнивается вертикально по базовой линии;
    • left — изображение прижимается к левому краю окна, текст обтекает его справа;
    • right — изображение прижимается к правому краю окна, текст обтекает его слева;
  • hspace — в пикселях задает размер пустого поля, отделяющего рисунок справа и слева по горизонтали.
  • vspace — действует аналогично по вертикали.
  • border — задает толщину рамки вокруг рисунка в пикселях.
  • width — задает ширину рисунка в пикселях или в процентах.
  • height — задает высоту рисунка.
  • longdesc = [URL] — определяет ссылку на длинное описание изображения. Это описание должно дополнять краткое описание, задаваемое атрибутом alt.
  • usemap — связывает навигационную карту с элементом <img>. Навигационная карта определяется с помощью элемента <map>...</map>. Значение атрибута usemap должно совпадать со значением атрибута name связанного элемента <map>...</map>.
  • ismap — определяет серверную навигационную карту. В этом случае элемент <img> должен быть вложен в контейнер <а>...</а>. Когда пользователь активизирует ссылку, щелкнув на изображении, экранные координаты, заданные в пикселах, отправляются непосредственно на сервер, на котором располагается документ.
  • name — присваивает изображению внутреннее имя, по которому к нему можно обратиться из скриптов. Аналогичен атрибуту id, но применяется для совместимости со старыми браузерами.
  • id, class — идентификаторы в пределах документа.
  • title — заголовок элемента (выводится браузером в качестве комментария при наведении курсора на содержимое элемента).
  • style — встроенная информация о стиле.
  • onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup — внутренние события.

Все атрибуты элемента <img>, касающиеся визуального выравнивания и представления (align, width, height, border, hspace, vspace), не рекомендуются. Вместо этого рекомендуется использовать таблицы стилей.

Выравнивание изображений

При включении изображения в документ можно указать его расположение относительно текста или других элементов страницы. Способ выравнивания задается атрибутом align. Возможные значения:

  • bottom — низ изображения выравнивается вертикально по базовой линии (по умолчанию);
  • middle — центр изображения выравнивается вертикально по базовой линии;
  • top — верх изображения выравнивается вертикально по базовой линии;
  • left — изображение прижимается к левому краю окна, текст обтекает его справа;
  • right — изображение прижимается к правому краю окна, текст обтекает его слева;

Все значения атрибута align можно условно разделить на две группы по их принципу действия. К первой группе относятся два значения — left и right. При использовании любого из этих значений мы получаем так называемое «плавающее» изображение. В этом случае изображение прижимается к соответствующему краю окна просмотра браузера, а последующий текст (или другие элементы) «обтекают» изображение с противоположной стороны (рис. 6.1): 

<!doctype html public"-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Использование атрибута align</title>
</head>
<body>
<p align="justify">
B уездном городе N было так много парикмахерских заведений и бюро
похоронных процессий, что казалось, жители города рождаются лишь
<img src="lilies.gif" align="left">
затем, чтобы побриться, остричься, освежить голову вежеталем и
сразу же умереть. А на самом деле в уездном городе N люди рождались,
брились и умирали довольно редко. Жизнь города N была
тишайшей.
</p>
<p align="justify">
Вопросы любви и смерти не волновали Ипполита Матвеевича
Воробьянинова, хотя этими вопросами по роду своей службы он
ведал с девяти утра до пяти вечера ежедневно с получасовым
перерывом для завтрака.
</p>
<p align="justify">
Хотя похоронных депо было множество, но клиентура у них была небогатая.
<img src="lilies.gif" align="right">
"Милости просим" лопнуло еще за три года до того, как Ипполит Матвеевич
осел в городе N, а мастер Безенчук пил горькую и даже однажды пытался
заложить в ломбарде свой лучший выставочный гроб.
</p>
</body>
</html>
Рис. 6.1  Использование атрибута align.

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

<!doctype html public"-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Использование атрибута align</title>
</head>
<body>
<p style="border:1px solid blue">
<span style="border:1px solid red">
B уездном <img src="lilies.gif" align="bottom"> городе N было
так много  парикмахерских заведений и бюро похоронных процессий,
что казалось, жители города рождаются лишь затем,
<img src="lilies.gif" align="middle"> чтобы побриться, остричься,
освежить <img src="lilies.gif" align="top"> голову вежеталем  и
сразу же умереть. А на самом деле  в уездном городе N люди рождались,
брились и умирали довольно редко.
</span>
</p>
<p style="border:1px solid blue">
<span style="border:1px solid red">
Вопросы любви и смерти не волновали Ипполита Матвеевича
Воробьянинова, хотя этими вопросами по роду <img src="lilies.gif">
своей службы он <img src="msie.gif" align="top"> ведал с девяти утра
до пяти вечера ежедневно с получасовым перерывом для завтрака.
</span>
</p>
</body>
</html>
Рис. 6.2  Использование атрибута align.

Как поместить рисунок горизонтально по центру, если элемент <img> не имеет соответствующего атрибута? Здесь надо проявить немного фантазии и скомбинировать его с элементом, который может производить центрирование, например <div>: 

<div align="center">
<img src="bird.gif" alt="Птица">
</div>

Задание размеров изображения

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

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

Если эти атрибуты не указаны явно, то по умолчанию рисунок отображается в соответствии с собственными размерами.

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

Если атрибуты указаны явно, то картинка отображается в области указанных размеров. Если пропорции области и рисунка не совпадают, то изображение трансформируется до размеров области.

Интересные особенности возникают, если атрибуты задаются в процентах. Размер области, в которой отображается рисунок, в этом случае вычисляется относительно размеров окна браузера. При изменении размеров окна соответственно меняется и размер рисунка. Если задан только один атрибут, то второй вычисляется автоматически, из условия сохранения пропорций. Если оба атрибута заданы в процентах, то при непропорциональном изменении окна (только высоты или ширины) изображение исказится. Если размер по одной из осей превысит размер окна, то появится полоса прокрутки (рис. ). Возможны комбинированные способы задания размеров (ширина — в пикселях, высота — в процентах), которые в большинстве случаев приводят к искажению: конечный размер, заданный в пикселях — сохраняется, в процентах — трансформируется.

Отделение изображения от текста

Атрибуты hspace и vspace задают в пикелях размер отступа от изображения, соответственно, по горизонтали и вертикали. Это гарантирует, что между текстом и изображением останется пространство, необходимое для нормального восприятия. 

<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN.">
<html>
<head>
<title>Использование атрибутов vspace и hspace</title>
</head>
<body>
<h1 align="center">Троя</h1>
<p align="justify">
<img src="troy.gif" align="left" vspace="10" hspace="40">
Много тысяч лет Троя была для людей лишь легендой. После того,
как были обнаружены руины города, она стала историей. Но за
страницами поэм Гомера, за расписными античными амфорами можно
представить себе, какими были жившие тогда люди. Безликие герои
обретают плоть и характер. Перед нами богоравный Ахилл, не
подчиняющийся никому, желающий славы и уставший убивать, царевич
Парис, обрекший царство на гибель ради своей страсти, прекрасная
Елена, слышащая плач вдов и винящая себя в гибели их мужей,
Гектор, любящий жену и сына и вынужденный отдать жизнь за ошибки
брата, тысячи людей, втянутых в бессмысленную междоусобную войну,
так же любивших, страдавших и гибнущих, как и тысячи лет спустя.
</p>
</body>
</html>
Рис. 6.7  Использование атрибутов vspace и hspace.

Рамки вокруг изображений

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

<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN.">
<html>
<head>
<title>Использование атрибута border</title>
</head>
<body>
<img src="forest.jpg">
<img src="forest.jpg" border="1">
<img src="forest.jpg" border="5">
<img src="forest.jpg" border="10">
</body>
</html>
Рис. 6.7  Использование атрибута border.

Карта изображения. Элементы <map>, <area>

Рисунок может являться ссылкой, для чего элемент <img> должен быть помещен в контейнер <а href="...">...</a>. Еще эффектнее воспринимается сайт, на котором части изображения являются ссылками на разные страницы. Такое изображение называется графической картой.

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

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

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

Забегая несколько вперед, отметим, что если встретилась конструкция <а href="..."><img src="..." usemap="..."></a>, то есть элемент <img> сам является ссылкой, которая организована при помощи контейнера <а href="...">...</a>, то сначала обрабатывается карта (usemap или ismap), а ссылка, организованная контейнером <а href="...">...</a>, игнорируется. И только в случае неудачи используется альтернативная ссылка <а href="...">...</a>.

Синтаксис: карта организуется при помощи двух элементов — <map> и <area>. Описание карты располагается в обобщающем контейнере <map>, а активные фрагменты-ссылки рисунка, задающие ресурсы, к которым приведет ссылка, описываются в нескольких одиночных тегах <area>. 

<map name="direct">
  <area shape="rect" coords="0,0,100,190"
  href="http://www.somehost.ru" alt="налево пойдешь - коня потеряешь">
  <area shape="rect" coords="201,0,300,190"
  href="http://www.anotherhost.ru" alt="направо пойдешь - сам потеряешься">
</map>

Атрибуты <map>

  • name — назначает имя навигационной карте, определяемой элементом <map>...</map>, отсылающее к атрибуту usemap тэга <img>;
  • id, class — идентификаторы в пределах документа;
  • title — заголовок элемента;
  • style — встроенная информация о стиле;
  • onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup — внутренние события.

Атрибуты <area>

  • shape = rect | circle | poly — задает форму области:
    • rect — прямоугольник (по умолчанию);
    • circle — круг;
    • poly — многоугольник.
  • сооrd — координаты области. Значения этого атрибута в зависимости от формы (shape) следующие:
    • shape = rect (прямоугольник)
      coord = "x1, y1, x2, y2"
       х и у задают координаты верхнего левого и нижнего правого углов прямоугольника. Значения х и у координат измеряются в пикселах от верхнего левого угла соответствующего изображения. Это означает, что значение у возрастает сверху вниз.
    • shape = circle (круг)
      coord = "x0, y0, r"
       х0 и у0 — координаты центра круга, r — радиус круга.
    • shape = poly (многоугольник)
      coord = "x1, y1, x2, y2, ... , xn, yn"
       хn и уn — координаты вершин многоугольника. Первая пара координат x и y и последняя должны быть одинаковыми, чтобы «закрыть» многоугольник. Если эти значения не одинаковы, браузер вычислит дополнительную пару координат, чтобы закрыть многоугольник.
  • href = [URL] — указывается URL документа, к которому нужно перейти по ссылке.
  • nohref — означает, что для описываемой области нет ссылки.
  • alt — определяет альтернативный текст.

Примечание.

Элементы <map> и <area> введены в стандарт, начиная с версии HTML 3.2.

Рассмотрим на примере организацию карты.

Санкт-Петербург Москва Якутск 
<img src="russia.gif" width="360" height="196"
border=0 usemap="#Russia">
<map name="Russia">
  <area shape="circle" coords="49,60,10" href="peterburg.html"
  alt="Санкт-Петербург" title="Санкт-Петербург">
  <area shape="circle" coords="48,84,10" href="moscow.html"
  alt="Москва" title="Москва">
  <area shape="circle"  coords="256,93,10" href="yakutsk.html"
  alt="Якутск" title="Якутск">
</map>

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