Интернет Университет информационных технологий  Расскажи
про свой ВУЗ!
www.intuit.ru
мои курсы мои настройки моя корзина помощь
  Лекции
Введение в HTML
(архив: ZIP)
1.   Общие сведения
2.   Структура HTML-документа и элеме...
3.   Контейнеры тела документа
4.   Графика
5.   Таблицы в HTML
6.   HTML-формы
7.   Фреймы
    Экзамен
    Сдать экзамен экстерном
    Литература

  Общение
однокурсники
форум по курсу
вопрос преподавателю
мнения о курсе

Введение в HTML
Лекция #4: Графика
Страницы: « | 1 | 2 | 3 | вопросы | » | HTML для печати | PDF | ZIP
  Если Вы заметили ошибку на этой странице - сообщите нам.  

Активные изображения

Активные изображения (image maps), или изображения, чувствительные к щелчкам мыши, позволяют создать на узле графические меню произвольной формы. Активное изображение — это изображение с так называемыми активными областями (hot spots), которые ссылаются на URL других страниц или узлов.

Есть два метода формирования активных изображений: на сервере и у клиента. Изображения первого типа используют сервер для того, чтобы найти соответствующий данной активной области URL и передать на браузер нужную страницу. Активные изображения, работающие на клиентской машине, задают информацию об активной области на НТМL-странице, так что браузер сам выясняет, какие области являются активными, и запрашивает с сервера соответствующую страницу.

Активные изображения, работающие у клиента, имеют несколько преимуществ. Во-первых, страницы с ними можно перенести на другой сервер. Во-вторых, серверу не приходится выполнять лишнюю работу (например, просматривать всю информацию об активных областях), то есть нагрузка на сервер уменьшается. При использовании работающих на сервере активных изображений в каталоге сgi-bin сервера должен быть соответствующий сценарий. Из соображений безопасности многие системные администраторы не записывают сценарии в каталог сgi-bin. Поэтому более подробно мы рассмотрим создание активных изображений у клиента.

Создание активного изображения. Процесс создания активного изображения состоит из двух этапов. Сначала необходимо определить на картинке области, которые нужно сделать активными, а потом соотнести их со ссылками на другие URL. Активные области задаются перечислением их координат (в пикселах). Все это можно сделать вручную, определив координаты углов активных областей, но гораздо проще воспользоваться какой-нибудь программой, например МарЕdit.

Определить карту легко. Нужно открыть в МарEdit HTML-файл, содержащий изображение, на котором требуется создать активные области, после чего выбранное изображение будет загружено в рабочее окно. Затем следует выбрать тип активной области (квадрат, треугольник и круг), щелкнуть и потянуть мышкой, обозначив границу области. Программа автоматически производит запись в HTML-файл, описывающий границы активной области. Затем этой области нужно приписать URL. В любых местах изображения можно нарисовать активные области и определить для каждой из них URL. Важно оставлять между областями немного места, чтобы при чтении быть уверенным, что активизируется правильная ссылка. Границы активных областей задаются координатами углов прямоугольника и многоугольника или центра и радиуса круга. Если вы решили делать активное изображение у клиента, Мар Edit поставляет данные только для тегов <МАР>. Вам придется самим задать тег изображения с атрибутом USЕМАР и поместить его после тега </МАР>. Не забудьте перед именем карты в атрибуте USЕМАР записать символ "#" следующим образом:

<IMG SRC="mymap.gif" USЕМАР="#sitemap">

Активные изображения у клиента работают независимо от программного обеспечения сервера и не перестанут функционировать, даже если файлы будут перенесены на другой сервер. Таким изображениям требуются только две вещи: браузер, поддерживающий HTML 3.0, и информация о карте, записанная в HTML-файле. Приведем пример активных изображений.

<IMG SRC="image.gif" ALT="Изображения" USEMAP="#imap">
</CENTER>
<MAP NAME="imap">
<AREA SHAPE="rect" COORDS="0,0,100,100" HREF="http://www.intuit.ru/help/index.html">
<AREA SHAPE="rect" COORDS="100,0,200,100" HREF="http://www.intuit.ru/shop/index.html">
<AREA SHAPE="default" nohref>
</MAP>

Изображения в миниатюре

Часто для иллюстрации какой-то темы требуются изображения большого размера, загружаться они будут достаточно долго. В том месте, где требуется разместить большой рисунок, можно поместить маленькую его копию и сделать ссылку на полномасштабное изображение. Те посетители, которым это действительно интересно, смогут посмотреть изображение полностью, а все остальные пролистнут страницу, не задерживаясь. Такая методика особенно хороша для обложек книг, фотографий, рекламных листков, которые не все читатели захотят изучить в деталях.

Перейти к вопросам »
  Если Вы заметили ошибку на этой странице - сообщите нам.  
Страницы: « | 1 | 2 | 3 | вопросы | » | HTML для печати | PDF | ZIP
  Спецпредложения
Для тех, кто желает поддержать проект:
Майки с символикой INTUIT.ru
Все книги+CD со скидкой более 60%
 
  Ключевые слова
Картинка, image, IMG, элемент разметки, JPEG, PNG, GIF, BMP.
 
  Информация о лекции
В этой лекции рассматриваются принципы применение графических образов при HTML-разметке.
 
  Учебники к курсу
Основы web-технологий
Основы web-технологий
Храмцов П.Б., Брик С.А., Русак А.М., Сурин А.И.,
Интернет-университет информационных технологий - ИНТУИТ.ру.
Курс лекций посвящен основам Web-технологий. В его рамках рассматриваются язык гипертекстовой разметки HTML, язык программирования динамического контента JavaScript, спецификация разработки прикладного программного обеспечения CGI и спецификация описания стилей представления информации CSS.
Практические занятия по HTML. Краткий курс
Практические занятия по HTML. Краткий курс
Будилов В.А.,
Наука и техника.
В книге на примерах изложены основы использования языка разметки гипертекста HTML. Приведено много простых, но полезных примеров, в которых иллюстрируются наиболее употребительные при создании Web-страниц модели.
HTML и XHTML. Подробное руководство
Муссиано Ч., Кеннеди Б., Символ-Плюс.
все книги по курсу »