Конечно же обработка изображений, создание красочных иллюстраций, анимация и баннеротворчество являются неотъемлемой частью Web-строительства. Меня часто в письмах обвиняют, что дизайн мой не очень-то хороший. Вероятно это так. Поскольку дизайн как таковой требует серьезной проработки. А у меня постоянно не хватает времени и терпения. Поэтому тему дизайна я пока освещать не буду. Это уже творческая сторона, а сейчас мы пока рассматриваем азы. Они позволят Вам заниматься дизайном самостоятельно. Поэтому сейчас рассмотрим один прием, позволяющий, использовать части одного и того же цельного изображения для ссылок на различные странички. На этом в принципе мы завершим рассмотрение изображений.

Для этого в языке HTML имеется тэг <map>. Он включает в себя тэг <area>.

Рассмотрим простейший рисунок:

Его размер 170x50 пикселей. Сейчас станет понятно к чему я веду. Пусть квадрат, круг и теругольник ссылаются на различные страницы: link1.html, link2.html и link3.html.

Теперь, оставляя рисунок как есть, применим к нему тэг <map>. Этот тэг имеет один атрибут - это name и используется (как уже отмечалось) в неразравности с тэгом <area>. У <area> несколько атрибутов:

1. href - это и есть наша гиперссылка;
2. shape - это форма (она бывает трех видов - прямоугольной (rect), круглой (circle) и полигон (poly));
3. coords - координаты для задание положения формы на изображении.
4. alt - всплывающая подсказка.

Таким образом, наше изображение получается как карта (<map>), с нанесенными на нее с помощью координат (задаваемых атрибутами тэга <area>) различных плоских фигур, как простых, так и служных. И именно область, которая ограничена этой фигурой и будет ссылкой на желаемую страницу. А связать картинку с картой можно с помощью атрибута тэга <img> usemap, о котором я в предыдущих разделах пока не упоминал. Предположим, что файл картинки называется segment.gif, тогда полный код сегментации (картирования) изображения будет:

<img src= segment.gif usemap="#segm" border=0> 
    <map name="segm"> 
      <area shape="rect" coords="4,2,50,50
" href="#"  alt="Ссылка 1">
      <area shape="circle" coords="78,26,24
" href="#" alt="Ссылка 2">
      <area shape="poly" coords="132,5,101,
47,164,46" href="#" alt="Ссылка 3">
    </map>

Обратите внимание на запись usemap="#segm". Без значка # ничего работать не будет. А что такое segm? Так мы назвали нашу карту <map name="segm">. Мы видим на картинки три фигуры. К ним-то и привяжем наши ссылки. Первая фигура - это прямоугольник (rect). Координаты прямоугольника задаются двумя точками: координатами X и Y верхнего левого угла и правого нижнего. Я не случайно в начале сделал акцент на размеры изображения. Левый верхний угол изображения имеет координаты (0, 0), правого нижнего (169, 49). Почему не 170 и 50? Потому, что отсчет начинается с нуля. А наш квадратик несколько смещен от левого и верхнего угла рисунка, поэтому по координате верхнего левого угла мы видим смещение - 4 (по X и 2 по Y). Координаты окружности (circle) задаются с помощью координат X и Y центра окружности и радиусом. Разумеется в нашем случае радиус не должен превышать высоты изображения. Полигон (poly) в принципе может иметь сколь угодно много точек. В нашем случае их три, но записываем мы шесть значений - X и Y через запятую. Программы редакторы типа Dreamweaver помогут Вам расставить координаты без труда. Однако понимать суть происходящего все-таки нужно. У атрибута href стоит значек #. Вместо него можно подставить link1.html, link2.html и link3.html. А сам этот значек означает, что ссылка приводит на саму себя. Я так записал, чтобы Вы не нервничали, если Вас начнет уводить на страницы, которых нет или которые Вам придется дополнительно создать, чтобы не получать сообщение об ошибках. К тому же так удобнее видеть, как реагирует картинка на щелчок мыши.

Наведите курсор мыши на картинку, помещенную выше и Вы сможете увидеть как все работает.