Графика и таблицы
Одним из наиболее популярных приемов дизайна страниц Web-узла является техника нарезки картинок на составные части. Можно выделить следующие способы применения этой техники для организации навигационных компонентов страницы:
- горизонтальные и вертикальные меню;
- вложенные меню;
- навигационные графические блоки.
Главной проблемой при использовании нарезанной графики является защита ее от контекстного форматирования страницы HTML-парсером. Дело в том, что он автоматически переносит элементы разметки на новую строку, если они не помещаются в одной. Составные части нарезанной картинки должны быть расположены определенным образом, поэтому простое их перечисление в ряд не дает желаемого эффекта: (открыть)
<IMG SRC="image1.gif"><IMG SRC="image2.gif"><IMG SRC="image3.gif"><IMG SRC="image4.gif">

Элементы переносятся на новую строку, так как ширина раздела меньше общей ширины всех картинок. Проблема решается, если применить защиту от парсера — <PRE>: (открыть)
<PRE>
<IMG SRC="image1.gif"><IMG SRC="image2.gif"><IMG SRC="image3.gif"><IMG SRC="image4.gif">
</PRE>

Использование такого меню требует определения на нем гипертекстовых ссылок, что приводит к следующему эффекту: (открыть)
<PRE>
<A HREF="javascript:void(0);"><IMG SRC="image1.gif"></A>
<A HREF="javascript:void(0);"><IMG SRC="image2.gif"></A>
<A HREF="javascript:void(0);"><IMG SRC="image3.gif"></A>
<A HREF="javascript:void(0);"><IMG SRC="image4.gif"></A>
</PRE>

Этого можно достичь за счет применения атрибута BORDER равного 0: (открыть)
<PRE>
<A HREF="javascript:void(0);"><IMG SRC="image1.gif"
BORDER="0"></A><A HREF="javascript:void(0);"><IMG SRC="image2.gif" BORDER="0"></A><A HREF="javascript:void(0);"><IMG SRC="image3.gif"
BORDER="0"></A><A HREF="javascript:void(0);"><IMG SRC="image4.gif" BORDER="0"></A>
</PRE>

Теперь попробуем тем же способом реализовать многострочное меню: (открыть)
<PRE>
<IMG SRC=tree.gif WIDTH=27 HEIGHT=21 BORDER=0><A HREF="javascript:void(0);"><IMG SRC="image1.gif" WIDTH=103 HEIGHT=21 BORDER=0></A>
<IMG SRC=tree.gif WIDTH=27 HEIGHT=21 BORDER=0><A HREF="javascript:void(0);"><IMG SRC="image2.gif" WIDTH=103 HEIGHT=21 BORDER=0></A>
<IMG SRC=tree.gif WIDTH=27 HEIGHT=21 BORDER=0><A HREF="javascript:void(0);"><IMG SRC="image3.gif" WIDTH=103 HEIGHT=21 BORDER=0></A>
<IMG SRC=tree.gif WIDTH=27 HEIGHT=21 BORDER=0><A HREF="javascript:void(0);"><IMG SRC="image4.gif" WIDTH=103 HEIGHT=21 BORDER=0></A>
</PRE>

Сплошной картинки не получается, так как высота строки не равна высоте картинки. Подогнать эти параметры практически невозможно. Каждый пользователь настраивает браузер по своему вкусу. Решение заключается в использовании таблицы: (открыть)
<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0 ALIGN=center>
<TR>
<TD><IMG SRC=tree.gif WIDTH=27 HEIGHT=21 BORDER=0></TD>
<TD><A HREF="javascript:void(0);"><IMG SRC="image1.gif" WIDTH=103 HEIGHT=21 BORDER=0></A></TD>
</TR>
<TR>
<TD><IMG SRC=tree.gif WIDTH=27 HEIGHT=21 BORDER=0></TD>
<TD><A HREF="javascript:void(0);"><IMG SRC="image2.gif" WIDTH=103 HEIGHT=21 BORDER=0></A></TD>
</TR>
<TR>
<TD><IMG SRC=tree.gif WIDTH=27 HEIGHT=21 BORDER=0></TD>
<TD><A HREF="javascript:void(0);"><IMG SRC="image3.gif" WIDTH=103 HEIGHT=21 BORDER=0></A></TD>
</TR>
<TR>
<TD><IMG SRC=tree.gif WIDTH=27 HEIGHT=21 BORDER=0></TD>
<TD><A HREF="javascript:void(0);"><IMG SRC="image14.gif" WIDTH=103 HEIGHT=21 BORDER=0></A></TD>
</TR>
</TABLE>

В данном случае все картинки удается сшить без пропусков и тем самым достичь непрерывности навигационного дерева. Пропуски устраняются путем применения атрибутов BORDER, CELLSPACING и CELLPADDING. Первый устраняет границы между ячейками, второй устанавливает расстояние между ячейками равным 0 пикселов, третий устанавливает отступ между границей ячейки и элементом, помещенным в нее, в 0 пикселов.
Графика и обработка событий
В данном разделе мы не будем рассматривать обработчики событий контейнера IMG. Мы остановимся на наиболее типичном способе комбинирования обработчиков событий и изменения графических образов. Собственно, не имело бы смысла применять нарезанную графику, если бы не возможность использования обработчиков событий для изменения отдельных частей изображения. Продолжая обсуждение примера с навигационным деревом, покажем его развитие с обработкой событий, вызванных наведением мыши на объект, и изменением картинок:
<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0 ALIGN=center>
<TR>
<TD><IMG SRC=image.gif WIDTH=20 HEIGHT=20 BORDER=0></TD>
<TD><IMG SRC=image1.gif WIDTH=20 HEIGHT=20 BORDER=0></TD>
</TR>
<TR>
<TD><IMG SRC=image2.gif WIDTH=20 HEIGHT=20 BORDER=0></TD>
<TD><A HREF="javascript:void(0);" onMouseover="document.manual.src='image3.gif';return true;" onMouseout="document.manual.src='image4.gif';
return true;"><IMG SRC=image5.gif BORDER=0 WIDTH=20 HEIGHT=20></A></TD>
</TR>
<TR>
<TD><IMG SRC=image6.gif WIDTH=20 HEIGHT=20 BORDER=0></TD>
<TD><A HREF="javascript:void(0);" onMouseover="document.desk.src='image7.gif';return true;" onMouseout="document.desk.src='image8.gif';return true;"><IMG SRC=image9.gif BORDER=0 WIDTH=20 HEIGHT=20></A></TD>
</TR>
</TABLE>
В данном примере при проходе курсор мышки через картинки меню последние изменяются. Этот эффект достигается за счет применения двух событий: onMouseover и onMouseout. По первому событию картинка меняется с позитива на негатив, по второму событию восстанавливается первоначальный вариант. Следует заметить, что события определены в контейнере якоря (A), а не в контейнере IMG. Это наиболее устойчивый с точки зрения совместимости браузеров вариант.
|