Изображение-карта
Теперь давайте рассмотрим более сложный пример. Представим себе, что надо сделать сайт, посвященный описанию старинного компьютера ATARI-800. Уже подготовлены файлы с описанием его монитора, самого компьютера и дисковода: monitor.html, computer.html и diskovod.html (мы для проверки работоспособности примера тоже создали такие файлы, но в них ничего нет, кроме заголовка). Наша задача: создать титульную страницу сайта и поместить на нее изображение компьютера (рис. 3.4).
При этом логично было бы сделать так, чтобы щелчок на изображении монитора переводил читателя на страничку с описанием монитора, щелчок на изображении дисковода – на страничку с описанием дисковода и щелчок на изображении самого компьютера – на страничку с его описанием. Можно, конечно, “разрезать” изображение на три и с каждого дать гиперссылку на соответствующий файл. Но при этом разрушится целостность композиции на фотографии компьютера. Что же делать?
Оказывается, есть возможность установить несколько гиперссылок с одного рисунка, не “разрезая” его! Такое изображение называется кар той графических ссылок (imagemap}. Создание карты графических ссылок – операция довольно кропотливая, но результат обычно довольно эффектен. Делается это так.
Вот, например, наш файл diskovod.html:
<HTML> <HEAD> <TITLE>ДИСКОВОД</TITLE></HEAD> <BODY>ОПИСАНИЕ ДИСКОВОДА</BODY> </HTML>
Рис. 3.4. Изображение компьютера, из которого мы будем делать графическую карту ссылок
Сначала рисунок внедряется на веб-страницу обычным образом, с помощью тега <IMG>:
<IMG SRC="Images/computer.gif" WIDTH="451" HEIGHT="310" BORDER="0" ALT="ATARI-800">Затем необходимо установить в этом теге атрибут USEMAP=. Его значение должно содержать имя карты графических ссылок, с предвари тельным знаком #, Если карта еще не создана, как в нашем случае, то ей можно дать любое имя:
<IMG SRC="Images/computer.gif" WIDTH="451" HEIGHT="310" BORDER="0" ALT="ATARI-800" USEMAP="#compmap">Теперь нужно создать собственно карту ссылок. Вообще говоря, эта карта может располагаться где угодно, хоть в другом файле – тогда в атрибуте USEMAP= нужно будет указать, кроме имени карты, имя этого файла, например: “mapfile.html#mymap”). В нашем случае давайте рас положим ее в конце того же файла.
Карта графических ссылок начинается с тега < МАР> и завершается закрывающим тегом </МАР>. В теге <МАР> следует установить (обязательно!) единственный возможный атрибут NAME=. Его значением должно быть имя карты, на которое мы ссылались в теге <МАР> (с помощью атрибута USEMAP=). В данном случае это должно быть имя "compmap":
<MAP NAME="compmap">