Основы Web-инжиниринга. Часть 1. Громов Ю.Ю - 101 стр.

UptoLike

ВУЗ: 

ТГТУ | Тамбов

Составители: 

Рубрика: 

<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>
Рис. 75
В данном случае все картинки удается сшить без пропусков и тем самым достичь непрерывности навигационного дере-
ва. Пропуски устраняются путем применения атрибутов border, cellspacing и cellpadding.
Остановимся на наиболее типичном способе комбинирования обработчиков событий и изменения графических образов.
Продолжая обсуждение примера с навигационным деревом, покажем его развитие с обработкой событий, вызванных наве-
дением мыши на объект, и изменением картинок:
<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. Это наиболее устойчивый с точки зрения совместимости браузеров вариант.
Вертикальные и горизонтальные меню. Графическое меню удобно тем, что автор может всегда достаточно точно рас-
положить его компоненты на экране. Это, в свою очередь, позволяет и другие элементы страницы точнее располагать отно-
сительно элементов меню (рис. 76):
<TABLE BORDER="0" CELLPADDING="0" CELLSPACING="0" ALIGN="center">
<TR ALIGN="center">
<TD><IMG NAME="e0" SRC="empty.gif" WIDTH="15" HEIGHT="8" BORDER="0"></TD>
<TD><IMG NAME="e1" SRC="empty.gif" WIDTH="15" HEIGHT="8" BORDER="0"></TD>
<TD><IMG NAME="e2" SRC="empty.gif" WIDTH="15" HEIGHT="8" BORDER="0"></TD>
<TD><IMG NAME="e3" SRC="empty.gif" WIDTH="15" HEIGHT="8" BORDER="0"></TD>
</TR>
<TR>
<TD><A HREF="javascript:void(0);" onMouseover="document.e0.src= 'arrowdw.gif';return true;"
onMouseout="document.e0.src='empty.gif';return true;">
<IMG SRC="image1.gif" BORDER="0"></A></TD>
<TD><A HREF="javascript:void(0);" onMouseover="document.e1.src= 'arrowdw.gif';return true;"
onMouseout="document.e1.src='empty.gif';return true;">
<IMG SRC="image2.gif" BORDER="0"></A></TD>
<TD><A HREF="javascript:void(0);" onMouseover="document.e2.src= 'arrowdw.gif';return true;"
onMouseout="document.e2.src='empty.gif';return true;">
<IMG SRC="image3.gif" BORDER="0"></A></TD>
<TD><A HREF="javascript:void(0);" onMouseover="document.e3.src= 'arrowdw.gif';return true;"
onMouseout="document.e3.src='empty.gif';return true;">
<IMG SRC="image4.gif" BORDER="0"></A></TD>
</TR>

Страницы