Введение в JavaScript



Графика и таблицы - часть 2



Рис. 16.4. 

Теперь попробуем тем же способом реализовать многострочное меню: (открыть)

<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>

Пример 16.1.


Рис. 16.5. 

Сплошной картинки не получается, так как высота строки не равна высоте картинки. Подогнать эти параметры практически невозможно. Каждый пользователь настраивает браузер по своему вкусу. Решение заключается в использовании таблицы:(открыть)

<table 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>

Пример 16.2.


Рис. 16.6. 

В данном случае все картинки удается сшить без пропусков и тем самым достичь непрерывности навигационного дерева. Пропуски устраняются путем применения атрибутов BORDER, CELLSPACING и CELLPADDING. Первый устраняет границы между ячейками, второй устанавливает расстояние между ячейками равным 0 пикселов, третий устанавливает отступ между границей ячейки и элементом, помещенным в нее, в 0 пикселов.




Содержание  Назад  Вперед