AJAX загрузка
home

В HTML документы могут быть вставлены изображения.

Добавление изображений в HTML документы

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

Для добавления в HTML документ изображений используется тэг <img>. Атрибут src тэга <img> должен содержать адрес по которому находится картинка, которая должна быть отображена.

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

Пример

<img src="mountimg3.jpg" />
<p><b>Ергаки</b> — горный узел, хребет в Западном Саяне. Представляет собой 
массив разнонаправленных грив, отрогов в значительной степени обработанных ледником. 
Альпийский рельеф в центральной части Ергаков на периферии сменяется гольцовым с 
отдельно расположенными горами и отрогами более плавных очертаний с пенепленом на 
вершинах.</p>
Быстрый просмотр

Атрибут alt

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

Роботы поисковых систем, которые анализируют страницы не могут просматривать картинки, поэтому единственный способ "рассказать" им о их содержимом - написать об этом в атрибуте alt.

<img src="boat.gif" alt="На картинке изображена плывущая лодка" />

Создание карт-изображений

В HTML можно создавать специальные карты-изображений, которые содержат список областей-ссылок и привязываются к изображениям.

Карты в HTML создаются с помощью тэга <map>, а области-ссылки в них с помощью тэга <area>.

Пример карты-изображения (на кнопки можно щелкать):

Форма и координаты областей-ссылок задаются с помощью атрибутов shape и coords тэга <area>, а место на которое они ссылаются с помощью атрибута href.

Возможные формы областей ссылок:

Форма Атрибуты
Прямоугольная область-ссылка shape="rect", coords="x1,y1,x2,y2", где x1,y1 координаты верхнего левого угла прямоугольной области, а x2,y2 координаты нижнего правого угла области.
Круглая область-ссылка shape="circle", coords="x,y,радиус", где x,y координаты центра области.
Область-ссылка многоугольник shape="poly", coords="x1,y1,x2,y2..xz,yz", где x1,y2 координаты первого угла многоугольника, x2,y2 второго и т.д. Если координаты первого и последнего угла не совпадают, браузер автоматически добавит координату последнего угла, чтобы завершить многоугольник.

После того, как карта создана необходимо привязать ее к какому-нибудь изображению. Для этого необходимо добавить к изображению атрибут usemap="#имя_карты", а к карте добавить атрибут name="имя_карты".

Пример

<img src="figures.gif" usemap="#figuremap" />
<map name="figuremap">
<area shape="rect" coords="3,8,72,75" href="bluesquare.html" target="_blank" />
<area shape="circle" coords="125,50,38" href="greencircle.html" target="_blank" />
<area shape='poly' coords='180,27,210,6,248,30,233,74,190,72' href="redpolygon.html" target="_blank" />
</map>
Быстрый просмотр

Сделайте сами

Задание 1 исправьте ошибки в коде, а затем расставьте цифры на картинках в порядке возрастания.

Пример

<imb source='http://www.wisdomweb.ru/HTML/bere.gif" alto='Цифра />
<imb source='http://www.wisdomweb.ru/HTML/berf.gif" alto='Цифра />
<imb source='http://www.wisdomweb.ru/HTML/bero.gif" alto='Цифра
<imb source='http://www.wisdomweb.ru/HTML/bert.gif" alto='Цифра />

Задание 2 отобразите кодовые буквы, а затем расставив их в правильном порядке (позиция буквы указана в черном кружке на картинке) Картинки с кодовыми буквами располагаются по следующим адресам:

Пример

Файл codeword.gif в папке word на нашем сайте
Файл esec.gif в папке CSS на нашем сайте
Файл codewrd.gif в папке word на нашем сайте
Файл secredw.gif в папке HTML на нашем сайте
Файл codw.gif в папке JS на нашем сайте
Файл awrd.gif в папке CSS на нашем сайте
Файл wrdcod.gif в папке word на нашем сайте

Задание 3 создайте карту-изображения по следующим данным:

Пример

<p>Изображение imagemap.gif содержит несколько геометрических фигур разных цветов.</p>
<p>Файлы desc1.html, desc2.html, desc3.html содержат описания этих фигур.</p>
<p>Свяжите геометрические фигуры с описанием с помощью карты-изображения. </p> 
<p><b>Обратите внимание:</b> файлы располагаются по следующему адресу: http://www.wisdomweb.ru/editor/. </p>