2015-05-13
1576
Напишем сценарий, реализующий горизонтальное графическое меню. При наведении курсора мыши на пункт меню изменяется световая гамма так, как изображено на рис. 3.6.
При реализации горизонтального графического меню функция img выполняет те же действия, что и в предыдущем примере. Графические изображения, соответствующие пунктам меню, помещены в таблицу, которая состоит из одной строки и пяти ячеек. В каждую из ячеек помещено изображение для соответствующего пункта. Значения параметров ceilpadding и cellspacing тега <TABLE>, определяющих расстояние между ячейками таблицы и расстояние от содержимого ячейки и границы, равны нулю для того, чтобы создавалось впечатление единой графической панели. Сценарий, реализующий графическое меню, приведен в листинге 3.4.
Листинг 3.4. Просто горизонтальное меню:
<HTML>
<HEAD>
<TITLE>Горизонтальное меню</TITLE>
<script language="JavaScript">
function img(n, action)
{if (action)
{document.images[n-1],src="wpch"+n+".gif"}
else
{document.images[n-1].src="pch"+n+".gif"}
}
</script>
</HEAD>
<BODY background="fonl.jpg">
<H2><FONT со1ог="#0000ff">Содержание</FONT></Н2>
<TABLE border=0 cellpadding=0 cellspacing=0>
<TR>
<TD>
<A href="tchl.htm" onmouseover="img(1, 1)"
onmouseout="img(1, 0)">
<IMG src="pchl.gif" alt="форматирование текста"
border="0" width="103" height="35"></A></TD>
<TD>
<A href="tch2.htm" onmouseover="img(2, 1)"
onmouseout="img(2, 0)">
<IMG src="pch2.gif" alt="создание списков" border="0"
width="103" height="35"></A></TD>
<TD>
<A href="tch3.htm" onmouseover="img(3, 1)"
onmouseout="img(3, 0)">
<IMG src="pch3.gif" alt="nocTpoeHne таблиц"
border="0" width="103" height="35"></A></TD>
<TD>
<A href="tch4.htm" onmouseover="img(4, 1)"
pnmouseout="img(4, 0)">
<IMG src="pch4.gif" аlt="использование графики"
border="0" width="103" height="35"></A></TD>
<TD>
<A href="tch5.htm" onmouseover="img(5, 1)"
onmouseout="img(5, 0)">
<IMG src="pch5.gif" alt="co3naHne фреймовой структуры"
border="0" width="103" height="35"></A></TD>
</TR>
</TABLE>
</BODY>
</HTML>
Анкета "Нагрузка преподавателя"
Необходимо написать сценарий обработки анкеты преподавателя. В анкете заданы поля, в которые требуется ввести количество часов, отведенных на чтение лекций и проведение практических занятий, и число студентов. Если по предмету читаются лекции, то дополнительно планируется нагрузка: 10% времени от лекционных часов отводится на консультации, и для приема экзамена планируется по 30 минут на человека. Если по предмету проводятся практические занятия, то предусмотрена контрольная работа из расчета 15 минут на человека, зачет из расчета 20 минут на человека. Форма анкеты представлена на рис. 3.7.
Аналогичные задачи неоднократно решались, написать сценарий предлагается в качестве упражнения. Предположим, что нагрузку преподавателя требуется представить в виде диаграммы. В анкете преподавателя заполняются первые три поля, а затем после нажатия кнопки Вычислить в документе должна появиться диаграмма, построенная по значениям тех полей, которые вычислялись в анкете, а именно: контрольные работы, зачеты, консультация, экзамены. Диаграмма представляется с помощью изображений. Сначала в зависимости от исходных данных считаются значения требуемых величин, затем вычисляется величина каждого из столбцов, и нужные изображения помещаются в документ для формирования столбцов диаграммы. Столбцы диаграммы располагаются в ячейках таблицы, для каждого столбца выделена своя ячейка.
Вторая строка таблицы содержит подписи к столбцам диаграммы. Если подвести курсор мыши к столбцу, то выводится числовое значение, соответствующее столбцу диаграммы. Документ с введенными полями и построенной диаграммой изображен на рис. 3.8.
Приведем для этого случая HTML-код со сценарием (листинг 3.5).
