Техника Web-дизайна для студента
Горизонтальное меню
Внешний вид горизонтального меню, которое нам предстоит создать, показан на рис. 8.10.
|
Рис 8.10. Внешний вид в окне браузера горизонтального раскрывающегося меню |
Список пунктов раскрывается после щелчка по рисунку с названием раздела. Перемещение указателя мыши по пунктам приводит к выделению соответствующего пункта, что достигается сменой файла рисунка. Щелчок по названию пункта либо выход за пределы списка приведут к его закрытию. Список будет также закрыт при переходе в другой раздел или за пределы меню. Пространство под названиями разделов, в котором раскрываются списки пунктов, до их раскрытия остается пустым и не может быть занято объектами, расположенными ниже меню. Текст документа приведен в листинге 8.17.
Листинг 8.17. Пример создания горизонтального раскрывающегося меню
<HTML>
<НЕА0ХТ1ТЬЕ>Горизонтальное мешо</Т1ТЬЕ>
<SCRIPT>
Function prR()
{event. cancelBubble="true"
Function prH(stolbx)
{stolbx. style. visibility="hidden"
Function prV(stolbx)
{stolbx. style. visibility="visible"
}
Function prS(sx, fn)
{sx. src=fn
}
</SCRIPT>
<BODY onmousemove=prH(stolbl),prH(stolb2),prH(stolb3)>
<SPAN style="WIDTH: 95px; TEXT-ALIGN: center" onmouse - move=prH(stolb2),prR()>
<IMG id=pl src="rl. jpg" onclick=prV(stolbl)>
<SPAN id=stolbl style="VISIBILITY: hidden; WIDTH: 70px" on - click=prH(stolbl),prR()>
<IMG id=pll src="ppl. jpg" onmousemove=prS(pll,"ppld. jpg") on- mouseout=prS(pll,"ppl. jpg")><br>
<IMG id=pl2 src="pp2.jpg" onmousemove=prS(pl2,"pp2d. jpg") on- mouseout=prS(pl2,"pp2.jpg")><br>
<IMG id=pl3 src="pp3.jpg" onmousemove=prS(pl3,"pp3d. jpg") on- mouseout=prS(pl3,"pp3.jpg")><br>
<IMG id=pl4 src="pp4.jpg" onmousemove=prS(pl4,"pp4d. jpg") on- mouseout=prS(pl4,"pp4.jpg")>
</SPAN>
</SPAN>
<SPAN style="WIDTH: 95px; TEXT-ALIGN: center" onmouse - move=prH(stolbl),prH(stolb3),prR()>
<IMG src="r2.jpg" onclick=prV(stolb2)>
<SPAN id=stolb2 style="VISIBILITY: hidden; WIDTH: 70px" on - click=prH(stolb2),prR()>
<IMG id=p21 src="ppl. jpg" onmousemove=prS(p21,"ppld. jpg") on - mouseout=prS(p21,"ppl. jpg")><br>
<IMG id=p22 src="pp2.jpg" onmousemove=prS(p22,"pp2d. jpg") on- mouseout=prS(p22,"pp2.jpg")><br>
<IMG id=p23 src="pp3.jpg" onmousemove=prS(p23,"pp3d. jpg") on- mouseout=prS(p23,"pp3.jpg")><br>
<IMG id=p24 src="pp4.jpg" onmousemove=prS(p24,"pp4d. jpg") on- mouseout=prS(p24,"pp4.jpg")>
</SPANX/SPAN>
<SPAN style="WIDTH: 95px; TEXT-ALIGN: center" onmouse - move=prH(stolb2),prR()>
<IMG src="r3.jpg" onclick=prV(stolb3)> <SPAN id=stolb3 style="VISIBILITY: hidden; WIDTH: 70px" on - click=prH(stolb3),prR()>
<IMG id=p31 src="ppl. jpg" onmousemove=prS(p31,"ppld. jpg") on- mouseout=prS(p31,"ppl. jpg")><br>
<IMG id=p32 src="pp2.jpg" onmousemove=prS(p32,"pp2d. jpg") on- mouseout=prS(p32,"pp2.jpg")><br>
<IMG id=p33 src="pp3.jpg" onmousemove=prS(p33,"pp3d. jpg") on- mouseout=prS(рЗЗ,"pp3.jpg")><br>
<IMG id=p34 src="pp4.jpg" onmousemove=prS(p34,"pp4d. jpg") on- mouseout=prS(p34,"pp4.jpg")>
</SPANX/SPAN>
</BODY>
</HTML>
Меню создано с помощью блоков, хотя можно было бы использовать и таблицу. Все разделы меню имеют одинаковую структуру и отличаются только индивидуальными именами, поэтому ограничимся рассмотрением первого раздела.
Раздел создается с помощью метки-контейнера <span>. Задается ширина блока, которая выбирается несколько большей, чем ширина рисунка с изображением названия раздела, что влияет на расстояние между разделами. Содержимым контейнера, кроме рисунка, является другой контейнер, также созданный меткой <span> с индивидуальным именем stoibi. Контейнер включает 4 рисунка с изображениями названий пунктов меню. Каждый рисунок имеет индивидуальное имя, которое используется в качестве параметра при вызове функции смены изображений prs (). Вторым параметром является имя файла рисунка.
Функция prs () вызывается на выполнение двумя событиями. Событие onMouseMove (перемещение курсора) вызывает функцию, передавая имя файла рисунка активного пункта, а событие onMouseOut (выход за пределы рисунка) — пассивного пункта.
Контейнер с названиями пунктов скрыт (visibility: hidden) и становится видимым только после щелчка по рисунку с названием раздела, в результате чего вызывается функция prvo. В качестве параметра функции передается имя контейнера. Действие функции prv () очевидно, она содержит одну строку, в которой свойству visibility присваивается значение visible. Так же проста и функция ргн (), которая делает заданный объект скрытым. Она вызывается на выполнение после щелчка по любому пункту меню контейнера stoibi.
Чтобы стало понятно назначение функции prR(), следует сказать несколько слов о том, как распространяется событие в иерархии объектов. В нашем документе можно проследить следующую иерархию. На верхнем уровне располагается сама страница (содержимое метки <body>). На следующем уровне располагается контейнер раздела, в котором располагаются два объекта более низкого уровня — рисунок с названием раздела и контейнер с рисунками пунктов. Любое действие в отношении объекта нижнего уровня создаст соответствующее событие не только в отношении этого объекта, но и всех объектов, расположенных выше по иерархии. Например, если щелкнуть мышью по элементу контейнера stoibi, то наступит событие onclick и произойдет вызов функции ргН о. Это же событие наступит и в отношении вышестоящего контейнера, в котором для этого случая предусмотрен вызов функции рrv(), совершающей противоположное действие. Запретить прохождения события к вышестоящим объектам можно с помощью свойства cancelBubble объекта event, которому нужно присвоить значение true, что и делается в единственной строке функции prR (). Вторично функция prR () вызывается событием onMouseMove контейнера раздела. В случае перемещения курсора, над каким-либо разделом, предусматривается скрытие смежных с ним контейнеров с названиями пунктов. В первом разделе это осуществляется вызовом функции pH(stoib2), во втором разделе она вызывается дважды с разными значениями параметра рн (stoibi), pH(stolb3) и в третьем разделе — pH (stoib2). Аналогичные действия предусмотрены и в метке <body>, что обеспечивает скрытие списка пунктов после перемещения курсора за пределы меню. Если не запретить прохождение события onMouseMove от контейнера раздела ко всей станице, то любое перемещение указателя мыши внутри меню будет сопровождаться скрытием списка пунктов. Вот почему вместе с вызовом функции ргн () вызывается и функция prR() .
