Изображение-карта
Итак, теперь мы можем попытаться обвести “активные области” нашего изображения компьютера (см. рис. 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. Страничка с графической картой ссылок