Ссылки с использованием карт-изображений (MapImage)

Для создания гиперссылок можно использовать карты-изображения, на которых выделены области – указатели гиперссылок. С каждой областью изображения связывают переход на определенный объект (внешнюю Web-страницу или внутренний якорь).

В качестве основы для создания карты-изображения можно выбрать любое изображение. Чтобы преобразовать изображение в карту, в тэг <IMG> добавляется атрибут USEMAP, значением которого является ссылка на имя описания конфигурации областей на карте. Для рисования рамки вокруг карты-изображения используется атрибут BORDER, значением которого является толщина рамки в пикселях.

Задание:

Создать Web-страницу с картой-изображением, на которой находятся гиперссылки на якоря данной страницы, где описаны некоторые башни Московского Кремля. Данные о башнях можно взять здесь . Первые четыре абзаца из данного файла вставить в Web-страницу вместе с картой-изображением, установив отступы от рисунка; абзацы выровнять по ширине.

Названия и местонахождения башен можно взять здесь.

Используйте атрибут тега <BODY> BACKGROUND для оформления страницы, присвоив ему значение ”fon.png”. Здесь находится фон.

<IMG SRC="cxema.jpg" WIDTH="265" HEIGHT="330" BORDER="1"

USEMAP="#Kremlin" ALIGN="left" ALT="Схема Московского Кремля">

Для описания конфигурации областей карты-изображения используется тэг <MAP>, единственным атрибутом которого является NAME. Значение атрибута NAME должно соответствовать значению атрибута USEMAP, ранее заданному в тэге <IMG>.

<MAP NAME="Kremlin">

</MAP>

Форма и геометрические размеры областей на карте-изображении, а также адрес гиперссылки задаются тэгами <AREA> с атрибутами. Атрибут SHAPE определяет форму области и может принимать значения rect – прямоугольник, circle – круг и poly – многоугольник.

Атрибут COORDS задает координаты каждой области в пикселях. Значением атрибута является список координат точек, определяющих область, разделенных запятыми. Для прямоугольника задаются координаты левого верхнего и правого нижнего углов, для круга – координаты центра и радиус, для многоугольника – координаты вершин.

Для задания адреса гиперссылки используется атрибут HREF, а для вывода альтернативного текста атрибут ALT.

<area shape="rect" coords="175,95,183,119" href="#anchor1" alt="Сенатская">

<area shape="rect" coords="129,21,148,87" href="#anchor2" alt="Никольская">

<area shape="rect" coords="103,3,116,57" href="#anchor3" alt="Угловая Арсенальная"> …

Координаты областей можно узнать, открыв рисунок в каком-либо графическом редакторе, например, PAINT (рисунок находится здесь). Достаточно навести курсор на интересующую точку, и в строке состояния высветятся координаты курсора.

Активизация гиперссылок будет вызывать переход на абзац текста, относящийся к соответствующим башням (начало каждого раздела заранее помечено якорем).
[вернуться к оглавлению урока]

[ответ]