2.9. Рисунки и карты
<IMG>
Для размещения рисунков используется элемент IMG. Он не имеет конечного тега, а вся необходимая информация указывается с помощью атрибутов. Например, для создания логотипа фирмы при помощи файла logotip.gif размером 153x152 пиксела, необходим такой код:<IMG src="logotip.gif" width="153" height="152"
alt="Название фирмы" border="0">
С помощью атрибутов необходимо указать основные характеристики рисунка:
src — имя файла;
width — ширина в пикселах;
height — высота в пикселах;
alt — текст всплывающей подсказки;
border — толщина рамки вокруг рисунка (появляется, если рисунок используется как гиперссылка).
Ссылка на файл изображения представляет собой URL. Довольно часто рисунки копируются в отдельную папку (обычно она имеет имя images) и тогда в ссылках необходимо указывать имя папки:
<img src="images/picture01.gif" ...>
Рисунок можно поместить прямо в текст (задание выравнивания и способа обтекания обсуждается в разделе 2.6), в отдельный абзац (внутри элемента P) или в ячейке таблицы. Для того чтобы текст не касался рисунка, полезно задать величину горизонтального и вертикального отступа в пикселах:
hspace=n vspace=n
Когда Web-страницы сохраняются для автономного использования, может возникнуть проблема со ссылками на рисунки. Тогда необходимо найти их в соответствующей папке и скорректировать значения всех атрибутов src, указав для них новый путь.
Если атрибуты height и width не заданы, броузер не может отформатировать страницу до тех пор, пока рисунок не будет загружен, поэтому задание этих атрибутов необходимо. Если заданные значения не соответствуют реальным, рисунок масштабируется. Этот эффект иногда используют в дизайне, хотя качество рисунка при этом уменьшается.
Очень полезным атрибутом является alt. Он позволяет выводить текст в тех местах, где должны располагаться рисунки. Страница может загружаться достаточно долго, но броузер отображает текст подсказок в местах расположения рисунков. Не дожидаясь загрузки страницы, пользователь может увидеть, какие изображения он получит. В некоторых случаях это позволит ему, не дожидаясь окончания загрузки, прокрутить в окне текущий документ или перейти на другую страницу. Текст из alt используется поисковыми системами, что тоже важно.
Вот несколько примеров:
alt="My photo" — для комментария к фотографии;
alt="SEND" — если кнопка «Send» имеет надпись в виде рисунка;
alt="www.адрес.ru" — для гиперссылки;
alt="pict034.gif" — для отладки сайта.
По умолчанию значение атрибута border равно нулю (рамка отсутствует). Если рисунок IMG находится внутри гиперссылки A, то необходимо явно указывать border=0, иначе рамка появится. Она будет менять цвет после использования ссылки. При создании страниц с большим количеством рисунков ссылок (например, иконок в фотогалерее) рамка, наоборот, полезна, потому что служит подсказкой пользователю.
Рисунок можно снабдить и стандартными атрибутами: class, dir, id, lang, longdesc, style, title (аналог alt), атрибутами событий.
Элемент IMG позволяет использовать изображения, отдельные части которых связаны со ссылками и позволяют выполнять переходы. Такие изображения называются картами (см. ниже). В том случае, когда реакцию на щелчок по карте отрабатывает программа, расположенная на сервере, в элемент включается атрибут ismap. Иногда его записывают так:
ismap="ismap",
но задание значения совершенно не обязательно.
В том случае, когда карта обрабатывается броузером (программой пользователя), используется атрибут usemap. Он определяет имя карты:
usemap="#Имя"
Это имя ставится в соответствие со значением соответствующих атрибутов элементов AREA и MAP, которые определяют конфигурацию карты.
Использование атрибутов usemap придает элементу IMG свойства, характерные для элемента A, то есть возможность осуществления перехода по ссылке.
<MAP> <AREA> </MAP>
Этот элемент необходим для общего определения карты. Внутри него определяются области карты при помощи элементов AREA и задается имя карты при помощи атрибута:name="имя"
Для каждой области карты должен быть создан свой элемент AREA. Он не имеет конечного тега. Этот элемент должен включать атрибут, определяющий ссылку:
href="URL"
Атрибут для задания текста, заменяющего изображение карты, не является обязательным:
alt="текст_всплывающей_ подсказки"
Он необходим для работы текстовых броузеров, но может быть использован как комментарий.
Элемент AREA создает на карте активную область, выполняющую функцию гиперссылки. Для каждой области можно задать свою всплывающую подсказку.
Атрибуты, определяющие форму области на карте, являются обязательными. Существуют три стандартных вида областей: круг (circle), прямоугольник (rect) и многоугольник произвольной формы (poly).
Для круга необходимо задать координаты центра и радиус (R), выраженные в пикселах. Координаты центра отсчитываются от левого края (X) и верхнего края (Y) рисунка (рис. 2.12). Шаблон для задания круговой области таков:
shape="circle" coords=X,Y,R
Для определения области произвольной конфигурации задают координаты (X,Y) каждого из углов многоугольника, который точно или приблизительно соответствует по форме этой области:
shape="poly" coords=X1,Y1, X2,Y2, X3,Y3...
Пример многоугольника показан на рис. 2.12.
При определении прямоугольной области задают координаты верхнего левого (Xv,Yv) и правого нижнего (Xn,Yn) углов прямоугольника:
shape="rect" coords=Xv,Yv,Xn,Yn
Рис. 2.12. Задание координат областей
При помощи атрибута nohref (который используется без значений) можно запретить переход по ссылке для определенной области карты.Для вывода рисунка карты используется элемент IMG. Он связывается с соответствующим элементом MAP при помощи уникального имени и специальных атрибутов (name для MAP и usemap для IMG).
Ниже приведен пример карты, на которой размещены три области различной формы (с произвольными координатами).
<MAP name="karta01">
<AREA alt="Круг" shape="circle"
coords="221,123,90" href="page01.htm">
<AREA alt="Многоугольник" shape="poly"
coords="65,348,195,397,210,405,..."
href="page02.htm">
<AREA alt="Прямоугольник" shape="rect"
coords="310,405,420,435" href="page03.htm">
</MAP>
<IMG src="karta.gif" width=600 height=500 usemap="#karta01"
alt="Пример карты">
Элементы MAP и IMG не обязательно должны находиться рядом. Удобно поместить элементы MAP в начало секции BODY, т.к. они не отображаются на экране.
Для обращения к карте можно использовать и элемент OBJECT, например:
<OBJECT data="имя_файла_рисунка.gif" width=n height=m
type="image/gif" usemap="#karta01"> </OBJECT>
Одним из способов применения карты является создание меню страницы. Это обычно горизонтальная полоса, состоящая из цветных прямоугольников с текстом (команд). Щелчок на каждом из прямоугольников переводит пользователя на другую страницу или в другую точку текущей страницы. Преимущество графического меню заключается в независимости от используемой кодировки символов: буквы всегда будут видны. Такое меню можно сделать как набор нескольких рисунков, но тогда надо принимать меры к тому, чтобы эти рисунки всегда, при любой конфигурации окна броузера, располагались в ряд. Гораздо проще представить меню в виде одного рисунка-карты, выделив на нем несколько прямоугольных областей.
Другой популярный способ использования карт — заглавная страница организации. В этом случае необходимые команды и названия рубрик могут иметь произвольное расположение.
Ссылка на файл видеозаписи
Гипертекстовый редактор MS Front Page имеет команду (Вставка ► Рисунок ► Видеозапись) для помещения на Web-страницу ссылки на файл типа AVI при помощи элемента IMG. Конструкция эта достаточно проста, и ее можно набрать вручную:<IMG border="0" dynsrc="имя_файла.avi" start="fileopen" width="m" height="n">
Во время загрузки страницы загружается и видеоролик, а потом воспроизводится. Последний кадр остается на экране как обычный рисунок.
© TEKCT.RU, А. Гончаров, 2007-2022
|
|