Создание меню.
Рассмотрим пример создания внешнего скрипта для создания меню
Рисунок - Меню
Ниже приводится текст HTML-документа с созданным меню.
<html>
<head>
<title>Страница с меню</title>
<style type = "text/css">
.item {background-color: rgb(170, 170,170)}
.selected {background-color: magenta}
.menu {border-style: ridge}
</style>
<script src = "menu.js" type = "text/javascript"></script>
</head>
<body>
<table id = "tt" class = "menu">
<!--Первый пункт меню-->
<tr id = "item1" class = "item" onclick = "item1_click()" onMouseOver =
"item1.className = 'selected'" onMouseOut = "item1.className = 'item'">
<td><IMG src = "BDAQUA.gif"> Первый пункт меню </td>
</tr>
<!—Второй пункт меню—>
<tr id = "item2" class = "item" onClick = "item2_click()" onMouseOver =
"item2.className = 'selected'" onMouseOut = "item2.className = 'item'">
13
<td><IMG src = "BDAQUA.gif"> Второй пункт меню </td>
</tr>
<!—Третий пункт меню-->
<tr id = "item3" class = "item" onClick = "item3_click()" onMouseOver =
"item3.className = 'selected'" onMouseOut = "item3.className = 'item'">
<td><IMG src = "BDAQUA.gif"> Третий пункт меню </td>
</tr>
<!—Четвертый пункт меню-->
<tr id = "item4" class = "item" onClick = "item4_click()" onMouseOver =
"item4.className = 'selected'" onMouseOut = "item4.className = 'item'">
<td><IMG src = "BDAQUA.gif">Четвертый пункт меню </td>
</tr>
<!—Пятый пункт меню-->
<tr id = "item5" class = "item" onClick = "item5_click()" onMouseOver =
"item5.className = 'selected'" onMouseOut = "item5.className = 'item'">
<td><IMG src = "BDAQUA.gif">Пятый пункт меню </td>
</tr>
</table>
</body>
</html>
Из приведенного текста можно увидеть, каким образом используется таблица: пунктами
меню являются строки таблицы. Чтобы строки таблицы подсвечивались при наведении указателя
мыши, их стилевой класс динамически изменяется при обработке событи й onMouseOver,
onMouseOut. Изменив определения стилевых классов item, selected, menu, можно легко добиться
нужного вида меню.
При выборе каждого из пунктов меню вызывается соответствующая функция-обработчик
(см. значения атрибутов onClick для элементов TR). Все функции-обработчики собраны в файле
menu.js, текст которого приводится ниже.
/* В этом файле содержатся функции-обработчики для каждого пункта меню*/
function item1_click(){
alert("выбрали первый пункт меню");
//Другие действия...
}
function item2_click(){
alert ("выбрали второй пункт меню");
//Другие действия...
}
function item3_click(){
alert ("выбрали третий пункт меню");
//Другие действия...
}
function item4_click(){
alert ("выбрали четвертый пункт меню");
//Другие действия...
}
function item5_click(){
alert ("выбрали пятый пункт меню");
//Другие действия...
}
В каждую из приведенных выше функций помещен только код, сообщающий о
работоспособности отдельного пункта меню.