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.  

 

А также другие работы, которые могут Вас заинтересовать

19380. ДОСЛIДЖЕННЯ СТРУМЕНЕВИХ ЗАХОПЛЮВАЧIВ 340.5 KB
  Лабораторна робота № 8 ДОСЛIДЖЕННЯ СТРУМЕНЕВИХ ЗАХОПЛЮВАЧIВ Теоретичні відомості Струменевi захоплювачі використовують для захоплювання й орiєнтацiї штучних заготовок рiзної конфiгурацiї матерiалу i маси а також як механiзми захоплювачів промислови...
19381. НАЛАДКА НА АВТОКОЛИВАЛЬНИЙ РЕЖИМ РОБОТИ ПНЕВМАТИЧНОГО ВIБРАЦIЙНОГО ПРИВОДУ З ХАРАКТЕРИСТИКОЮ ТИПУ ОБМЕЖЕННЯ 75.5 KB
  ЛАБОРАТОРНА РОБОТА №9. НАЛАДКА НА АВТОКОЛИВАЛЬНИЙ РЕЖИМ РОБОТИ ПНЕВМАТИЧНОГО ВIБРАЦIЙНОГО ПРИВОДУ З ХАРАКТЕРИСТИКОЮ ТИПУ ОБМЕЖЕННЯ. МЕТА РОБОТИ: 1. Ознайомлення з конструкцією вiбролотка i пневматичного вібрацiйного приводу. 2. Експериментальне визначення з...
19382. Аналіз конструкції і дослідження роботи вібраційного завантажувального пристрою 169.92 KB
  Вібраційний завантажувальний пристрій (ВЗП) для автоматизації завантаження штучних заготовок на верстати-автомати одержав широке застосування в різних галузях.
19383. Дослідження напівсамотічного завантажувально-орієнтуючого валкового пристрою 156 KB
  Лабораторна робота №11 Дослідження напівсамотічного завантажувальноорієнтуючого валкового пристрою. Мета дослідження: Вивчення конструкції та принципу дії двохвалкового завантажувальноорієнтуючого пристрою і визначення умов його функціонування. Зміст до...
19384. Дослідження пристрою для вторинної автоматичної орієнтації деталей форми тіл обертання 174 KB
  Лабораторна робота №12 Дослідження пристрою для вторинної автоматичної орієнтації деталей форми тіл обертання Мета роботи: Ознайомлення з конструкцією та принципом дії типового пристрою для автоматичної вторинної орієнтації деталей тіл обертання з поперечн...
19385. Дослідження вібраційного лотка з активним орієнтуючим пристроєм 105 KB
  Лабораторна робота №13 Дослідження вібраційного лотка з активним орієнтуючим пристроєм. Мета роботи: ознайомлення з конструкцією та принципом роботи вібраційного лотка і дослідження факторів що впливають на його продуктивність. Зміст роботи. Ознайом
19386. Дослідження роботи орієнтуючого пристрою у вигляді V-подібного вирізу до вібраційних бункерних живильників 557.5 KB
  ЛАБОРАТОРНА РОБОТА № 14 Дослідження роботи орієнтуючого пристрою у вигляді Vподібного вирізу до вібраційних бункерних живильників. Мета роботи: Вивчити принцип роботи орієнтуючого пристрою ознайомитись з методикою аналітичного дослідження роботи пристрою од
19387. Експериментальне дослідження динамічного коефіцієнта коливальної системи вібраційного живильника 188 KB
  Лабораторна робота № 15 Експериментальне дослідження динамічного коефіцієнта коливальної системи вібраційного живильника Мета роботи: 1. Ознайомитись з методикою розрахунку коливальної системи вібраційних живильників. 2. Експериментальне визначення залежності д...
19388. Дослідження впливу режиму роботи вібраційного бункерного живильника на його продуктивність 223 KB
  Лабораторна робота №16 Дослідження впливу режиму роботи вібраційного бункерного живильника на його продуктивність Мета роботи: Ознайомлення з конструкцією та принципом роботи вібраційного бункерного живильника ВБЖ. Експериментальне визначення залежно...