 |
АвтоАвтоматизацияАрхитектураАстрономияАудитБиологияБухгалтерияВоенное делоГенетикаГеографияГеологияГосударствоДомДругоеЖурналистика и СМИИзобретательствоИностранные языкиИнформатикаИскусствоИсторияКомпьютерыКулинарияКультураЛексикологияЛитератураЛогикаМаркетингМатематикаМашиностроениеМедицинаМенеджментМеталлы и СваркаМеханикаМузыкаНаселениеОбразованиеОхрана безопасности жизниОхрана ТрудаПедагогикаПолитикаПравоПриборостроениеПрограммированиеПроизводствоПромышленностьПсихологияРадиоРегилияСвязьСоциологияСпортСтандартизацияСтроительствоТехнологииТорговляТуризмФизикаФизиологияФилософияФинансыХимияХозяйствоЦеннообразованиеЧерчениеЭкологияЭконометрикаЭкономикаЭлектроникаЮриспунденкция
Вертикальное графическое меню
Создадим документ, реализующий вертикальное графическое меню. При наведении курсора мыши над пунктом меню должна меняться цветовая палитра, соответствующая выделенному пункту меню.
Каждому пункту меню соответствует два изображения:
первое изображение, когда пункт меню не выбран;
второе - при выбранном пункте меню, цветовая палитра рисунка изменена.
Графические.изображения, соответствующие ситуации, когда пункты меню не выбраны, хранятся в файлах с именами pchl.gif, pch2.gif, pch3.gif, pch4.gif, pch5.gif. Соответствующие им графические изображения с измененной палитрой хранятся в файлах с именами wpchl.gif, wpch2.gif, wpch3.gif, wpch4.gif, wpch5.
При перемещении курсора над пунктом меню возникает событие onmouseover. В этом случае при решении задачи требуется изменить графическое изображение, соответствующее выбранному пункту меню, что осуществляется в результате выполнения конструкции
onmouseover="document.pml.src='wpchl.gif'"
Если курсор мыши выходит за пределы области связи, то возникает событие onmouseout, в результате обработки которого пункт меню должен принять первоначальный вид. Это достигается оператором присваивания
onmouseout="document.pml. src=.'pchl.gif "
HTML-код документа, реализующего графическое вертикальное меню, может иметь следующий вид.
<HTML>
<HEAD>
<title>Вертикальное графическое меню</title>
</HEAD>
<BODY background="fonl.jpg">
<h2><font color="#OOOOFF">Содержание</font></h2>
<A href="tchl.htm" target="Main"
onmouseover="document.pml.src='wpchl.gif'"
onmouseout="document.pml.src='pchl.gif'" >
<IMG src="pchl.gif" name="pm1" alt="форматирование текста"
border="0" width="103" height="35"></A><br>
<A href="tch2.htm" target="Main"
onmouseover="document.pm2.src='wpch2.gif'"
onmouseout="document.pm2.src='pch2.gif'" >
<IMG src="pch2.gif" name="pm2" аlt="создание списков"
order="0" width="103" height="35"></A><br>
<A href="tch3.htm" target="Main"
onmouseover="document.pm3.src='wpch3.gif'"
onmouseout="document.pm3.src='pch3.gif'" >
<IMG src="pch3.gif" name="pm3" alt="построение таблиц"
border="0" width="103" height="35"></A><br>
<A href="tch4.htm" target="Main"
onmouseover="document.pm4.src='wpch4.gif'"
onmouseout= "document.pm4.src='pch4.gif'" >
<IMG src="pch4.gif" name="pm4" alt="использование графики"
border="0" width="103" height="35"></A><br>
<A href="tch5.htm"
onmouseover="document.pm5.src='wpch5.gif'"
onmouseout="document.pm5.src='pch5.gif'" >
<IMG src="pch5.gif" name="pm5" alt="создание фреймовой структуры"
border="0" width="103" height="35"></A>
<br>
</BODY>
</HTML>
Поиск по сайту: