Использование Java скриптов

Создание любого сайта обычно начинается с главной страницы, а ещё точнее с главного меню. Поначалу, если сайт состоит из нескольких страниц, то можно обойтись простым меню из кнопок. Но постепенно число страниц сайт может достигнуть нескольких десятков и более, тогда приходит- ся создавать под-меню, т.е. группируя страницы по темам и помещая их в отдельные разделы. При создании таких меню лучше использовать Ява скрипты, так как они позволяют создавать более ком- пактные и оригинальные меню, что также заметно улучшает навигацию по страницам сайта и его дизайн. Сразу уточню, что апплет это вызываемая из HTML Java-программа в формате name.class , кото- рая может работать с графикой в заданном окне. Так выглядит тег вызова апплета:

<APPLET CODE=name width=200 height=100> .. </APPLET>

Создание всплывающего меню

Теперь в качестве примера рассмотрим конкретный скрипт меню который я использовал сам - его файл можно взять здесь - menu.js Кстати, если у вас нет под рукой Ява редактора, то для изменения скрипта можно воспользоваться обычным блокнотом ( чтобы не менять расширение .js исспользуйте 2-ую кнопку мыши - Изменить )

Чтобы вызвать скрипт "menu.js" используйте следующий код:

<script language=JavaScript src="menu.js"></script>

Вызов всплывающего меню вы можете теперь сделать в любом месте, где находится ваша кнопка, при наведении на которую будет появляться под-меню. Здесь две кнопки - b1.gif и b2.gif , а mm - папка, где они лежат:

<IMG border=0 onMouseOut="Turn('1',0);occupied_header[1]=0;"
onMouseOver="Turn('1',1);occupied_header[1]=1;" src="mm/b1.gif" >

<IMG border=0 onmouseout="Turn('2',0);occupied_header[2]=0;"
onmouseover="Turn('2',1);occupied_header[2]=1;" src="mm/b2.gif" >

Правда, если главное меню лежит на слое, то там же непосредственно должен вызываться и скрипт ( в нашем случае - menu.js ). Вы также можете использовать на одной странице несколько скриптов, но следите что бы они не забивали друг друга ( их можно разделять фреймами, слоями ). Теперь рассмотрим сам скрипт всплывающего под-меню. Данный скрипт не очень компактный, но вы можете найти в сети и др. скрипты, для этого достаточно сохранить страничку с меню, где ис- пользуется нужный скрипт.

Здесь приведена только нижняя часть скрипта, которую вам необходимо изменить:

txt = new Array();
txt[1] = "<table border=1 cellspacing=1 cellpadding=1 width=200
bgcolor=#00CCCC><tr><td bgcolor=#66CCCC>
<a href=page1.htm class=active><div class=hov>. пункт меню1</div></a>
<a href=page2.htm class=active><div class=hov>. пункт меню2</div></a>
</td></tr></table>";
CreateLayer(txt[1], 1, y1, x1, 1);

txt[2] = "<table ... ";
CreateLayer(txt[2], 2, y2, x2, 1);

function rollHandler() {
var srcElement = window.event.srcElement;
if(srcElement.className=='hov') {
if(srcElement.style.backgroundColor=='') {
srcElement.style.backgroundColor = '#CCCC99';
}


Оператор CreateLayer здесь открывает новый слой с нашим текстовым меню - txt[1]. Кординаты всплывающего меню задаются числами ( y1, x1) от верхнего и левого края страницы, ширину меню определяет параметр width=200, page1.htm - имя страницы или адрес перехода, пункт меню1 - название ссылки меню. Номер меню [1] должен соответствовать тому, что указан на странице в теге вывода кнопки <IMG...> Цвет рамки = 00СССС, фона меню здесь = 66СССС, а цвет полоски активной ссылки = СССС99

Если ваше меню не работает, значит вы где то допустили ошибку, скрипт может не работать даже при таких незначительных изменениях как лишний перенос строки или пробел, так что будьте внимательны..

Вот пример слоя моего всплывющего меню, количество подменю и число пунктов в каждом из них не ограничено:

txt[2] = "<table border=1 cellspacing=1 cellpadding=1 width=300 bgcolor=#00CCCC><tr><td bgcolor=#66CCCC> <a href=Y-net.narod.htm class=active><div class=hov>. Введение, Dreamweaver, Xara3D</div></a> <a href=Y-net.narod1.htm class=active><div class=hov>. Теги, графика, Gif MovieGear, вёрстка</div></a> <a href=narod_html.htm class=active><div class=hov>. HTML-теги и примеры</div></a> <a href=menu_script.htm class=active><div class=hov>. JavaScript всплывающего меню</div></a> </td></tr></table>"; CreateLayer(txt[2], 2, 15, 86, 1);

Параметры шрифта ссылок меню можно изменять с помощью тега стиля :

<STYLE> A:LINK, A:VISITED, A:ACTIVE { Font-family: Verdana; Font-size: 9pt; Font-Weight: bold; TEXT-decoration: none; } A:HOVER { TEXT-decoration: none; COLOR: red; } </STYLE>

Пример скрипта, выводящий шлейф из б у к в рядом с курсором мыши:

<SCRIPT> var x,y var step=10 var flag=0 var message=" б у к в ы " message=message.split("") var xpos=new Array() for (i=0;i<=message.length-1;i++) {xpos[i]=-50} var ypos=new Array() for (i=0;i<=message.length-1;i++) {ypos[i]=-50} function handlerMM(e) {x = (document.layers) ? e.pageX : document.body.scrollLeft+event.clientX y = (document.layers) ? e.pageY : document.body.scrollTop+event.clientY flag=1} function makesnake() {if (flag==1 && document.all) {for (i=message.length-1; i>=1; i--) {xpos[i]=xpos[i-1]+step ypos[i]=ypos[i-1]} xpos[0]=x+step ypos[0]=y for (i=0; i<message.length-1; i++) {var thisspan = eval("span"+(i)+".style") thisspan.posLeft=xpos[i] thisspan.posTop=ypos[i]}} else if (flag==1 && document.layers) {for (i=message.length-1; i>=1; i--) {xpos[i]=xpos[i-1]+step ypos[i]=ypos[i-1]} xpos[0]=x+step ypos[0]=y for (i=0; i<message.length-1; i++) {var thisspan = eval("document.span"+i) thisspan.left=xpos[i] thisspan.top=ypos[i]}} var timer=setTimeout("makesnake()",10)} for (i=0;i<=message.length-1;i++) { document.write("<span id='span"+i+"' class='spanstyle'>") document.write(message[i]) document.write("</span>")} if (document.layers){document.captureEvents(Event.MOUSEMOVE);} document.onmousemove = handlerMM; </SCRIPT>

Цвет и параметры шрифта букв устанавливают тегом стиля:

<STYLE>.spanstyle {FONT-WEIGHT: bold; FONT-SIZE: 8pt; COLOR: #006666; FONT-family: Arial; POSITION: absolute; TOP: -50px}</STYLE>

Также необходимо в тег <body.. добавить команду onload=makesnake() >