Оглавление

11.1. Карта-изображение как панель навигации

Давайте перепишем файл test.html (мы использовали его при изучении плавающих фреймов) и заменим текстовую панель навигации на карту-изображение (листинг 18).

 

Листинг 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="l" 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-страницу.
Итак, как и в предыдущем примере, есть заголовок и окно фрейма, но вместо текстовой панели навигации имеется изображение 120x240 (в данном примере показана только его рамка). Изображение виртуально разделено пополам на верхнюю и нижнюю области. Если навести курсор мыши на нижнюю часть изображения, то форма курсора даст понять, что это ссылка, а рядом с курсором появится всплывающая подсказка "Глава 2". При переходе по ссылке файл chapter2.html загружается в окно фрейма. Если щелкнуть на верхней части изображения, то во фрейм опять вернется текст "Глава 1".

Комментарии принадлежат их авторам. Мы не несем ответственности за их содержание.
Отправитель Нити