From: Mike <mike-26@yandex.ru>
Newsgroups: email
Date: Mon, 25 Sep 2003 14:31:37 +0000 (UTC)
Subject: Изучаем HTML: рисунки и карты
Изучаем HTML: рисунки и карты
Статью подготовил Mike <mike-26@yandex.ru>
<IMG> - элемент для создания ссылки на графический файл (image). Он не
содержит конечного тега - вся необходимая информация задается при
помощи атрибутов. Этот элемент является универсальным: с его помощью
можно использовать изображения в гиперссылках, вставлять картинки в
таблицы, просто размещать рисунки на Web-странице, создавать маркеры,
решать задачи дизайна и т.д.
Необходимым атрибутом является src - указатель на файл графики:
src="Ссылка на файл"
Ссылка на файл представляет собой URL. В некоторых случаях у
пользователя может возникнуть желание скопировать в отдельную папку
какую-нибудь Web-страницу или набор страниц из Интернета. Это
позволяет в дальнейшем использовать страницы, не подключаясь к Сети.
Скопировать НТМL-файлы легко: это сделает броузер. Сложнее с
рисунками. Сначала их надо найти в папке кэша, скопировать в требуемую
папку, а затем откорректировать значения всех атрибутов src, указав
для них новый путь.
Очень полезным атрибутом является alt. Он позволяет выводить текст в
тех местах, где должны располагаться рисунки. Страница может
загружаться достаточно долго, и пока графические файлы на подходе,
пользователь должен видеть, какие изображения он сможет получить. В
некоторых случаях это позволит ему, не дожидаясь окончания загрузки,
прокрутить в окне текущий документ или перейти на другую страницу. Вот
несколько примеров:
alt="My photo" -- для фотографии;
alt="www.webshops.ru" -- если это гиперссылка;
alt="pict15.gif" -- удобно для разработчика страницы.
Кроме этого, текст тега alt всплывает при наведении курсора мыши на
картинку. Например в каталоге товаров интернет-магазинов (http://www.webshops.ru),
посетитель может навести курсор на фотографию товара и при этом сразу
узнать его название.
Высоту и ширину области, в которой демонстрируется рисунок, задают:
при помощи атрибутов height и width. В том случае, когда задается один
из этих атрибутов, рисунок масштабируется таким образом, чтобы его
высота или ширина соответствовали заданной. Второй размер
устанавливается автоматически, в соответствующей пропорции. Таким
образом, применение только одного из атрибутов изменяет оба размера
рисунка. Если задать явным образом оба атрибута, то рисунок будет
масштабироваться по двум осям в соответствии с заданным размером.
Масштабирование, как правило, ухудшает качество изображения.
Рисунок можно снабдить и стандартными атрибутами: class, dir, id,
lang, longdesc, style, title, атрибутами событий.
Элемент IMG позволяет использовать изображения, отдельные части
которых связаны со ссылками и позволяют выполнять переходы. Такие
изображения называются картами (mар). В том случае, когда реакцию на
щелчок на карте обрабатывает программа, расположенная на сервере, в
элемент включается атрибут ismap. Иногда его записывают так:
ismap="ismap"
Однако задание значения атрибута совершенно не обязательно.
В том случае, когда карта обрабатывается броузером, используется
атрибут usemap. Он определяет имя карты:
usemap="#Имя"
Это имя ставится в соответствие со значением соответствующих атрибутов
элементов AREA и MAP (см. ниже), которые определяют конфигурацию
карты.
Интересно, что задание атрибутов usemap придает элементу IMG свойства,
характерные для элемента А, то есть возможность осуществления
перехода. Кроме того, мы сталкиваемся со случаем, когда необходимо
обязательное совместное использование сразу трёх элементов: AREA, IMG
и MAP.
<map><area></map>
Этот элемент необходим для общего определения карты. Внутри него
определяются области карты при помощи элементов AREA и задается имя
карты при помощи атрибута:
name="Имя"
Для каждой области карты должен быть создан свой элемент AREA. Он не
имеет конечного тега. Этот элемент должен включать атрибут,
определяющий ссылку:
href="Адрес"
Атрибут для задания текста, заменяющего изображение карты, не является
обязательным:
alt="Текст подсказки"
Он необходим для работы текстовых броузеров, но может быть использован
как комментарий.
Атрибуты, определяющие форму области на карте, являются обязательными.
Существует три стандартных вида областей: круг (circle), прямоугольник
(rect) и многоугольник произвольной формы (polygon).
Для круга необходимо задать координаты центра и радиус (r), выраженные
в пикселах. Координаты центра отсчитываются от левого края (х) и
верхнего края (у) рисунка. Шаблон для задания круговой области таков:
shape="circle" , coords=x, у, r
Для определения области произвольной конфигурации задают координаты
(х, у) каждого из углов многоугольника, который точно или
приблизительно соответствует по форме этой области:
shape="poly" coords=x1, у1, х2, у2, х3, у3 ...
При определении прямоугольной области задают координаты верхнего
левого и правого нижнего углов прямоугольника:
shape="rect" coords=x1, y1, x2, y2
При помощи атрибута nohref (который используется без значений) можно
запретить переход по ссылке для определенной области карты.
На листинге приведен пример страницы Map.htm, на которой размещены две
карты. Карта, имеющая имя karta1, содержит область в виде круга и
область произвольной формы. Карта karta2 содержит область
прямоугольной формы.
Web-страница с картами
<html>
<head>
<title>Указатель Wеb-страниц</title>
</head>
<body bgcolor="#FFFFFF" text="#000000" link="#0000FF" vlink="ffFF00">
<center><h2>Примеры карт</h2></center>
<p>Изображения карт иллюстрируют способы задания координат областей для переходов
<hr>
<h2>Карта 1</h2>
<map name="karta1">
<area alt="Kpyг" shape="circle" coords="119, 114, 83" href="http://www.metalloprofil.ru">
<area alt="Mнoгoyгольник" shape="poly" сoords="74, 242, 180, 250, 249, 239, 242, 278, 31, 276" href="Start.htm">
</map>
<map name="karta2">
<area аlt="Переход к карте 2" shape="rect" coords="27, 31, 191, 101" href="#verh">
</map>
<img src="Map1.gif" usemap="#karta1" alt="Kapта 1">
<hr>
<p>Ha этой странице представлены две карты, которые позволяют
выполнять различные переходы. Для правильного функционирования
страницы необходимо проверить все ссылки на файлы, заданные
с помощью атрибутов src и href,
<p>Щелчок по зеленому кругу обеспечит переход к Web-странице
издательства "Питер". Желтый многоугольник вернет вас
на страницу Start.htm. Красный прямоугольник
обеспечивает переход в начало этой страницы.
<hr>
<h2>Карта 2</h2>
<img src="Map2.gif" useraap="#karta2" alt="Kapтa 2">
</body>
</html>
Из листинга видно, что описание областей карты и соответствующий
элемент IMG могут размещаться в разных частях страницы. Переходы,
выполняемые с помощью карты, могут происходить как внутри страницы,
так и к удаленному ресурсу. Для обращения к карте можно использовать и
элемент OBJECT, например:
Реальные карты, созданные с использованием самых разных графических
пакетов, смотрятся очень привлекательно. Часто области не имеют четких
границ, и неискушенному пользователю <<мышечувствительная>> карта
может показаться последним достижением в области разработки программ
или, по крайней мере, хитро придуманным трюком. На самом же деле
возможность построения карт была заложена в HTML с самых ранних
версий.
Но сейчас, в связи с развитием новых технологий, вместо такой карты
можно использовать флеш. Стильный флеш ролик (http://www.metalloprofil.ru)
на главной странице сайта может приятно удивить посетителя.
Одним из способов применения карты является создание меню страницы.
Это обычно горизонтальная полоса, состоящая из цветных прямоугольников
с текстом команд. Щелчок на каждом из прямоугольников переводит
пользователя на другую страницу или в другую точку текущей страницы.
Преимущество графического меню заключается в независимости от
используемой кодировки символов: буквы всегда будут видны. Такое меню
можно сделать как набор нескольких рисунков, но тогда надо принимать
меры к тому, чтобы эти рисунки всегда, при любой конфигурации окна
броузера, располагались в ряд. Гораздо проще представить меню в виде
одного рисунка-карты и разбить его на несколько прямоугольных
областей. Но этот способ не приемлем для профессиональных
web-дизайнеров.
По материалам книги А. Гончаров "Самоучитель HTML"
701 Прочтений • [Изучаем HTML: рисунки и карты (html image)] [08.05.2012] [Комментариев: 0]
Vova
