Задание карты ссылок

Элемент IMG позволяет использовать изображения, отдельные части которых связаны со ссылками и позволяют выполнять переходы. Такие изображения называются картами (mар). Для определения полей карты используется атрибут

usemap=" #Имя"

Это имя ставится в соответствие со значением соответствующих атрибутов элементов AREA и MAP (см. ниже), которые определяют конфигурацию карты. Задание атрибутов usemap придает элементу IMG свойства, характерные для элемента А, то есть возможность осуществления перехода.

Для определения карты необходимо обязательное совместное использование сразу трёх элементов: AREA, IMG и MAP.

Элемент MAP необходим для общего определения карты. Внутри него определяются области карты при помощи элементов AREA и задается имя карты при помощи атрибута:

name=" Имя"

Для каждой области карты должен быть создан свой элемент AREA. Он не имеет конечного тега. Этот элемент должен включать атрибут, определяющий ссылку:

href=" https://Адрес"

Атрибут для задания текста, заменяющего изображение карты, не является обязательным:

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

1. Сохраните графический файл week.jpg в ту же папку, что и файл my_schedule.html.

2. В начало файла my_schedule.html вставьте следующий код:

3. Сохраните файл.

4. Для просмотра созданной Web-страницы используйте браузер.

5. Вы должны увидеть Web-страницу с определенным в ее начале графическим изображением дней недели. При щелчке указателем мыши на дни Понедельник и Пятница браузер загружает страницы с соответствующим расписанием.

6. Определите ссылки на карте для остальных дней недели.

7. Продемонстрируйте полученный документ преподавателю.

Контрольные вопросы:

1. Какие виды ссылок возможны в документе html?

2. Какие действия нужно произвести, чтобы установить ссылку на точку в текущем документе?

3. Что такое карта ссылок?

Контрольное задание:

Создайте небольшой сайт с ссылками на расписание уроков в школе по дням недели.