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

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

Итак, теперь мы можем попытаться обвести “активные области” нашего изображения компьютера (см. рис. 3.4). Естественно, что все они должны быть многоугольными, так как ни один из трех объектов не “укладывается” в прямоугольник или круг. Посмотрим, что получится в результате.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 TRANSITIONAL//EN">
<HTML>
  
<HEAD>
    <TITLE>Описание компьютера</TITLE>
</HEAD>
  
<BODY BGCOLOR="#FFA940" TEXT="#1A1A1A" LINK="#OOOOAO" VLINK="#OOOOAO" ALINK="#OOOOAO">
    <DIV ALIGN- "center">
        <H1>ATARI-800</H1>
    </DIV>
    <DIV ALIGN="center">
        <BIG>Здесь представлено описание старинного компьютера ATARI-800.
Вот как он выглядел:</BIG>
    </DIV>
    <DIV ALIGN="center">
        <IMG SRC="Images/computer.gif" WIDTH="451" HEIGHT="310" BORDER="0" ALT="ATARI-800" USEMAP="#compmap">
    </DIV>
    <DIV ALIGN="center">Для получения подробной информации о каждом узле щелкните на его изображении.</DIV>
</BODY>
<MAP NAME="compmap">
    <AREA ALT="МОНИТОР" SHAPE="poly" COORDS="95.41.289.40.289.180.212.180.211.167.86.168.86.54" HREF="monitor.html">
    <AREA ALT="Компьютер ATARI-800" SHAPE="poly" COORDS="7.253.57.255.62.265.156.265.158.259.205.259.213.247.210.178, 208.169.30.168.6.245" HREF="computer.html">
    <AREA ALT="Дисковод" SHAPE="poly" COORDS="293.197.345.154.438.168.441.196.437.224.400.265.294, 252.292.226" HREF="diskovod.html">
</MAP>

Результат этих трудов представлен на рис. 3.5. Как видите, на первый взгляд рисунок на страничке вполне обычный – наличие “активных областей” ничем не выдается. Поэтому необходима поясняющая подпись под рисунком.

Если поводить мышью над рисунком, то можно заметить, что над “актив ными областями” указатель мыши меняет свой вид, а если приостановить мышь над “активной областью” – появится соответствующая всплывающая надпись. И еще интересный момент: в большинстве браузеров можно воочию увидеть границы активных областей. Для этого надо нажать кнопку мыши на “активной области”, и, не отпуская ее, увести мышь за пределы области, и там отпустить кнопку. Тогда граница соответствующей “ актив ной области” останется выделенной.

Иллюстрированный самоучитель по созданию сайтов › Графика на веб-странице › Изображение-карта
Рис. 3.5. Страничка с графической картой ссылок

Если Вы заметили ошибку, выделите, пожалуйста, необходимый текст и нажмите CTRL + Enter, чтобы сообщить об этом редактору.