Конечно же обработка изображений, создание красочных иллюстраций, анимация и баннеротворчество являются неотъемлемой частью Web-строительства. Меня часто в письмах обвиняют, что дизайн мой не очень-то хороший. Вероятно это так. Поскольку дизайн как таковой требует серьезной проработки. А у меня постоянно не хватает времени и терпения. Поэтому тему дизайна я пока освещать не буду. Это уже творческая сторона, а сейчас мы пока рассматриваем азы. Они позволят Вам заниматься дизайном самостоятельно. Поэтому сейчас рассмотрим один прием, позволяющий, использовать части одного и того же цельного изображения для ссылок на различные странички. На этом в принципе мы завершим рассмотрение изображений.
Для этого в языке HTML имеется тэг <map>. Он включает в себя тэг <area>.
Рассмотрим простейший рисунок:
Его размер 170x50 пикселей. Сейчас станет понятно к чему я веду. Пусть квадрат, круг и теругольник ссылаются на различные страницы: link1.html, link2.html и link3.html.
Теперь, оставляя рисунок как есть, применим к нему тэг <map>. Этот тэг имеет один атрибут - это name и используется (как уже отмечалось) в неразравности с тэгом <area>. У <area> несколько атрибутов:
href - это и есть наша гиперссылка;
shape - это форма (она бывает трех видов - прямоугольной (rect), круглой (circle) и полигон (poly));
coords - координаты для задание положения формы на изображении.
alt - всплывающая подсказка.
Таким образом, наше изображение получается как карта (<map>), с нанесенными на нее с помощью координат (задаваемых атрибутами тэга <area>) различных плоских фигур, как простых, так и служных. И именно область, которая ограничена этой фигурой и будет ссылкой на желаемую страницу. А связать картинку с картой можно с помощью атрибута тэга <img> usemap, о котором я в предыдущих разделах пока не упоминал. Предположим, что файл картинки называется segment.gif, тогда полный код сегментации (картирования) изображения будет:
Обратите внимание на запись 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. А сам этот значек означает, что ссылка приводит на саму себя. Я так записал, чтобы Вы не нервничали, если Вас начнет уводить на страницы, которых нет или которые Вам придется дополнительно создать, чтобы не получать сообщение об ошибках. К тому же так удобнее видеть, как реагирует картинка на щелчок мыши.
Наведите курсор мыши на картинку, помещенную выше и Вы сможете увидеть как все работает.
