HTML: Популярный самоучитель

ОглавлениеДобавить в закладки К обложке

Изменение цвета в примере осуществляется по таймеру. Значения RGB‑составляющих цвета случайным образом изменяются на небольшие значения, что обеспечивает эффект этакого плавного перехода цвета. Еще следует отметить, что цвет всех отобранных элементов всегда одинаков. Это сделано для упрощения программы.

В примере 13.14 показано, как используется рассматриваемый сценарий.

Пример 13.14. Страница с разноцветным текстом

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Frameset//EN»

"http://www.w3.org/TR/html4/frameset.dtd">

<HTML>

<HEAD>

<TITLE>Разноцветный текст</TITLE>

<STYLE type = "text/css">

.colored {}

</STYLE>

</HEAD>

<BODY>

<H1>Обычный заголовок</H1>

<H1 class = "colored">Разноцветный заголовок</H1>

<P class>Обычный текст

<P class = "colored">Разноцветный текст

<SCRIPT type = "text/javascript" src = "coloredtext.js"></SCRIPT>

</BODY>

</HTML>

Теперь создадим усовершенствованный вариант рассмотренного ранее меню. Сейчас это будет не просто набор пунктов, все время находящийся на странице, а настоящее меню, похожее на то, которое имеют многие Windows‑приложения.

Пример реализован следующим образом: вверху окна организуется строка меню, в которой присутствуют два пункта, открывающих два различных меню. Первое меню выглядит так, как показано на рис. 13.5.

Рис. 13.5. Открыто первое меню

Второе меню, вызываемое при выборе второго пункта в строке меню, показано на рис. 13.6.

Рис. 13.6. Открыто второе меню

Как видно, оба меню появляются под соответствующими пунктами строки меню. Теперь рассмотрим, как реализован этот пример, а также какие существуют направления усовершенствования этого примера. Пример разбит на две части: HTML‑документ и сценарий (файл popup_menu.js). Сначала разберем текст HTML‑документа (пример 13.15).

Пример 13.15. Документ со строкой меню

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Frameset//EN»>

<HTML>

<HEAD>

<TITLE>Страница с меню</TITLE>

<STYLE type = "text/css">

.item {background-color: rgb(170, 170, 170)}

.selected {background-color: magenta}

.menu {border-style: ridge; visibility: visible; position: absolute}

.hidden {display: none}

.menu_line {border-style: solid; border-width: 1px;

background-color: rgb(170,170,170); width:100%}

</STYLE>

<SCRIPT src = "popup_menu.js" type = "text/javascript"></SCRIPT>

</HEAD>

<BODY>

<!–Создаем первое меню (изначально оно скрывается)–>

<TABLE id = "menu1" class = "hidden">

<!–Первый пункт меню–>

<TR id = "menu1_item1" class = "item" onClick = "menu1_item1_click()"

onMouseOver = "menu1_item1.className = 'selected'"

onMouseOut = "menu1_item1.className = 'item'">

<TD><IMG src = "icons/1.jpg"><TD>Первый пункт меню

<!–Второй пункт меню–>

<TR id = "menu1_item2" class = "item" onClick = "menu1_item2_click()"

onMouseOver = "menu1_item2.className = 'selected'"

onMouseOut = "menu1_item2.className = 'item'">

<TD><IMG src = "icons/2.jpg"><TD>Второй пункт меню

<!–Третий пункт меню–>

<TR id = "menu1_item3" class = "item" onClick = "menu1_item3_click()"

onMouseOver = "menu1_item3.className = 'selected'"

onMouseOut = "menu1_item3.className = 'item'">

<TD><IMG src = "icons/3.jpg"><TD>Третий пункт меню

<!–Четвертый пункт меню–>

<TR id = "menu1_item4" class = "item" onClick = "menu1_item4_click()"

onMouseOver = "menu1_item4.className = 'selected'"

onMouseOut = "menu1_item4.className = 'item'">

<TD><IMG src = "icons/4.jpg"><TD>Четвертый пункт меню
-= 169 =-
Регистрация.
Забыли пароль?
Логин
Пароль
Запомнить меня