14121

ИЗОБРАЖЕНИЯ-КАРТЫ. Создание изображения-карты в редакторе HomeSite

Конспект урока

Информатика, кибернетика и программирование

УРОК 11 ИЗОБРАЖЕНИЯКАРТЫ Изображениекарта это такое изображение различные фрагменты которого служат ссылками на разные HTMLфайлы или URL. Выбирая с помощью мыши различные фрагменты изображения посетители сайта могут перемещаться со страницы на страницу. Создание

Русский

2013-05-21

408 KB

2 чел.


УРОК 11

ИЗОБРАЖЕНИЯ-КАРТЫ

Изображение-карта – это такое изображение, различные фрагменты которого служат ссылками на разные HTML-файлы или URL. Выбирая с помощью мыши различные фрагменты изображения, посетители сайта могут перемещаться со страницы на страницу.

Создание изображения-карты в редакторе HomeSite

  1.  На панели инструментов Tools нажать кнопку (New Image Map)
  1.  В появившемся диалоговом окне
    •  указать адрес и имя файла с рисунком, который будете использовать в основе карты (Image name)
    •  ввести имя карты (Map name)
    •  нажать кнопку ОК для перехода к следующему окну

  1.  В следующем диалоговом окне
    •  выбрать конфигурацию выделения и  выделить фрагмент;
    •  в появившемся окне ввести адрес ссылки (href);
    •  ввести альтернативный  текст;
    •  нажать кнопку ОК;

  1.  повторить действия пункта 3 для других фрагментов
  2.  Завершить формирование карты, выполнив сохранение (File → Save and Exit)

 


По завершении процесса создания изображения-карты в тексте программы появится следующий код:

<MAP name="klass">

 <AREA shape="circle" coords="51,145,13" href="8.htm" alt="Бачурина Инна" >

 <AREA coords="292,2,343,67" href="7.htm" alt="Мартова Света">

 <AREA shape="poly" coords="517,367,519,359,524,355,536,355,545,360,548,372,544,384,531,393,523,390,516,381"

href="13.htm" alt="Трубников Сергей">

</MAP>

<IMG src="class.jpg" width="600" height="450" border="0" alt="142 группа" usemap="#klass">

Ключевое слово usemap в теге IMG сообщает браузеру, что данное изображение является картой, и указание ему найти раздел <MAP> </MAP>с именем  klass, описывающий систему фрагментов и ссылок.

Каждый тег AREA описывает отдельный фрагмент изображения, где атрибут shape определяет конфигурацию выделения фрагмента, атрибут cords координаты узлов (для окружности – координаты центра и радиус),:

прямоугольная область –  shape=”rect”,

окружность –  shape="circle",

многоугольник –  shape="poly".
Если атрибут
shape отсутствует, предполагается прямоугольная область.

Атрибутом alt задается текст, всплывающий при наведении указателя мыши на заданный фрагмент, а атрибутом  href – адрес ссылки для него.

Замечание: если выделенные области перекрещиваются, то работает ссылка на файл, указанный первым в списке <MAP>.


Задание

  1.  Рассмотреть пример страницы с изображением-картой (primer11/klass.htm)
  2.  Создать свой вариант Web-страницы с изображением-картой, на котором выделены минимум три фрагмента различной конфигурации. Продемонстрировать результат преподавателю в окне браузера.

PAGE  3

  1.