Иллюстрированный самоучитель по созданию сайтов

Изображение-карта

Теперь давайте рассмотрим более сложный пример. Представим себе, что надо сделать сайт, посвященный описанию старинного компьютера 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">
Если Вы заметили ошибку, выделите, пожалуйста, необходимый текст и нажмите CTRL + Enter, чтобы сообщить об этом редактору.