Карта-изображение как панель навигации
Давайте перепишем файл test.html (мы использовали его при изучении пла- вающих фреймов) и заменим текстовую панель навигации на карту- изображение (листинг 1.18).
Листинг 1.18. Применение карт-изображений
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Применение карт-изображений</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-
1251">
</head>
<body>
<h1 align="center">Название документа</h1>
<iframe src="chapter1.html" name="chapter" align="right" width="700" height="400">
<p>Ваш Web-браузер не отображает фреймы</p>
</iframe>
<img src="foto.gif" alt="Подсказка" width="120" height="240" border="1" usemap="#karta">
<map name="karta">
<area shape="rect" coords="0,0,120,120" href="chapter1.html" target="chapter" alt="Глава 1">
<area shape="rect" coords="0,120,240,240" href="chapter2.html" target="chapter" alt="Глава 2">
<area shape="default" alt="" nohref>
</map>
</body>
</html>
В данный момент нас не интересует само изображение, поэтому его может и не быть в папке. Чтобы видеть границы изображения на Web-странице, пара- метру border тега <img> присвоено значение 1. Сохраним файл и обновим Web-страницу.
Итак, как и в предыдущем примере, есть заголовок и окно фрейма, но вместо текстовой панели навигации имеется изображение 120?240 (в данном приме- ре показана только его рамка). Изображение виртуально разделено пополам на верхнюю и нижнюю области. Если навести курсор мыши на нижнюю часть изображения, то форма курсора даст понять, что это ссылка, а рядом с курсором появится всплывающая подсказка "Глава 2". При переходе по ссылке файл chapter2.html загружается в окно фрейма. Если щелкнуть на верхней части изображения, то во фрейм опять вернется текст "Глава 1".
1.11.2. Структура карт-изображений
Рассмотрим структуру, которая позволяет вставить карту-изображение в
HTML-документ (листинг 1.19).
Листинг 1.19. Структура карт-изображений
<!- Часть 1 ->
<img src="foto.gif" alt="Подсказка" width="120" height="240" border="1" usemap="#karta">
<!- Часть 1 ->
<!- Часть 2 ->
<map name="karta">
<area shape="rect" coords="0,0,120,120" href="chapter1.html" target="chapter" alt="Глава 1">
<area shape="rect" coords="0,120,240,240" href="chapter2.html" target="chapter" alt="Глава 2">
<area shape="default" alt="" nohref>
</map>
<!- Часть 2 ->
Как видим, код для вставки карты-изображения состоит из двух частей.
Первая часть с помощью тега <img> вставляет изображение в Web-страницу. Параметр usemap указывает, что изображение является картой. В качестве значения параметра указывается URL-адрес описания конфигурации. Если описание карты расположено в том же HTML-документе, то указывается на- звание раздела конфигурации карты, перед которым добавляется символ "#".
Вторая часть, являющаяся описанием конфигурации карты, расположена ме- жду тегами <map> и </map>. Активная область карты описывается с помощью тега <area>. Сколько на карте активных областей, столько и тегов <area> должно быть.
Источник: Прохоренок Н. А. HTML, JavaScript, PHP и MySQL. Джентльменский набор Web-мастера. — 3-е изд., перераб. и доп. — СПб.: БХВ-Петербург, 2010. — 912 с.: ил. + Видеокурс (на CD-ROM) — (Профессиональное программирование)
Похожие посты:
- Создание колонки, занимающей все доступное пространство по высоте (0)
- Добавление тени к блоку (0)
- Создание галереи миниатюр (0)
- Использование изображения вместо маркера списка (0)
- Добавление рамки к изображению (0)
- Удаление средствами CSS синей рамки вокруг изображения, выполняющего функцию ссылки (0)
- Задание фонового изображения для страницы с помощью CSS (0)