ВСТАВКА ИЛЛЮСТРАЦИЙ
Для вставки изображений в документ служит тег <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
соответствующий тег:
текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст
Если пример не работает, попробуйте щелкнуть поborder
соответствующий тег:
текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст
Если пример не работает, попробуйте щелкнуть поhspace
vspace
соответствующий тег:
текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст
Если пример не работает, попробуйте щелкнуть по
соответствующий тег:
текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст
Если пример не работает, попробуйте щелкнуть по
соответствующий тег:
текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст
Эта картинка имеет активные зоны, при щелчке по которым происходит переход на другие странички.
Вот код примера:
<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), который использует ту же карту, что и первый: