ГЛАВНАЯ ГРАФИКА АВТОР


ВСТАВКА ИЛЛЮСТРАЦИЙ

Для вставки изображений в документ служит тег <IMG>. Закрывающего тега для него не существует.
Общий формат тега:
<img
  src="URL_изображения"
  alt="текст"
  width="значение"
  height="значение"
  border="значение"
  hspace="значение"
  vspace="значение"
  align="тип_выравнивания"
  usemap="#имя_карты"
  lowsrc="URL_изображения"
>

Параметры тега:

SRC - обязательный параметр, указывающий URL файла с изображением (абсолютный или относительный).

ALT - рекомендуемый параметр, строка, заменяющая изображение при загрузке и в браузерах без поддержки графики.

WIDTH, HEIGHT - рекомендуемые параметры, горизонтальный и вертикальный размеры растра изображения. Задаются либо в пикселах либо в процентах от размеров окна просмотрщика. При загрузке изображения браузер может отображать на его месте в документе рамку соответствующего размера.

BORDER - толщина рамки вокруг изображения в пикселах, если изображение является частью активной зоны ссылки. Если BORDER=0, то рамка не будет отображаться.

HSPACE, VSPACE - позволяют задать свободное пространство вокруг изображения.

ALIGN - (TOP BOTTOM MIDDLE и др.) положение текста относительно изображения. (LEFT или RIGHT) положение изображения относительно окна браузера.

USEMAP - указывает, что изображение имеет активные зоны, описанные с помощью тега MAP в самом документе.

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


атрибуты WIDTH, HEIGHT
Значения вводите в пикселах, а не в процентах.
width
height

соответствующий тег:
текст текст текст текст текст текст текст текст текст текст текст текст текст текст ПРОСТО КАРТИНКА текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст
Если пример не работает, попробуйте щелкнуть по
если проще


атрибут BORDER
border

соответствующий тег:
текст текст текст текст текст текст текст текст текст текст текст текст текст текст ПРОСТО КАРТИНКА текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст
Если пример не работает, попробуйте щелкнуть по
если проще


атрибуты HSPACE, VSPACE
hspace
vspace

соответствующий тег:
текст текст текст текст текст текст текст текст текст текст текст текст текст текст ПРОСТО КАРТИНКА текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст
Если пример не работает, попробуйте щелкнуть по
если проще


положение текста относительно картинки

соответствующий тег:
текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст ПРОСТО КАРТИНКА текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст
Если пример не работает, попробуйте щелкнуть по
если проще


положение картинки относительно окна просмотрщика

соответствующий тег:
текст текст текст текст текст текст текст текст текст текст текст текст текст текст ПРОСТО КАРТИНКА текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст
Если пример не работает, попробуйте щелкнуть по
если проще

использование карты
Rambler Апорт List Yahoo Яndex AltaVista Эта картинка имеет активные зоны, при щелчке по которым происходит переход на другие странички.
Вот код примера:
<img src="images/logos.gif" usemap="#mapp">
<map name="mapp">
<area shape="rect" coords="5,8,72,39" href="http://www.rambler.ru" alt="Rambler">
<area shape="poly" coords="74,21, 75,3, 142,2, 141,27, 104,25" href="http://www.aport.ru" alt="Апорт">
<area shape="poly" coords="85,26, 121,26, 146,30, 145,55, 86,54" href="http://www.list.ru" alt="List">
<area shape="poly" coords="17,40, 24,67, 87,62, 84,39" href="http://www.yahoo.com" alt="Yahoo">
<area shape="poly" coords="3,88, 3,54, 21,54, 21,66, 73,64, 74,89" href="http://www.yandex.ru" alt="Яndex">
<area shape="poly" coords="77,89, 77,66, 116,55, 144,55, 145,79, 112,87" href="http://www.altavista.com" alt="AltaVista">
</map>
В теге <img> атрибуту usemap присвоено значение "#mapp", где mapp - имя карты, т.е. тега описания активных зон: <map>. Внимание! Символ # обязателен, т.к. usemap работает как локальная ссылка. Тег <map>может быть в любом месте документа, главное, чтобы он имел уникальное имя, которое задается в его атрибуте name. Между <map> и </map> в тегах <area> указываются активные зоны.
Атрибуты тега <area>:
shape - задает форму активной зоны.
coords - зависит от значения shape:
1)если shape="poly", то в coords координаты верхнего левого и правого нижнего углов прямоугольника.
2)если shape="circle", то в координаты центра и радиус окружности.
3)если shape="poly", то в координаты вершин многоугольника.
href - URL ресурса, на который происходит ссылка.
alt - к в теге <img>
Вот рисунок (прозрачный GIF), который использует ту же карту, что и первый:

вверх

©Xoft, Eugen 2000