Компьютеры и ПО: Web-программирование

Служба рассылок MailList.ru компании АГАВА

Архив рассылки Web-программирование - это просто!

Не показываются картинки?

Новое на сайте Программирование - это просто! (www.easyprog.ru):

В платном разделе

Урок 7. EASY_CMS. Организуем редактирование записей БД (PHP, CMS, POST)

В бесплатном разделе

Добрый день, уважаемые подписчики!

Тема сегодняшнего выпуска: "Java Script: разворачивающееся горизонтальное меню".

Сегодня мы научимся делать на JavaScript горизонтальное разворачивающееся меню. В свернутом состоянии оно выглядит вот так:

А когда подводим к нему мышкой становиться таким:

И так, вот текст этого скрипта:

<html>
<head>
<title>easyprog.ru - Scripts - JavaScript - CTC-Web Menu</title>
<META http-equiv="Content-Type" content="text/html; charset=windows-1251">
<META NAME="description" CONTENT="Коллекции CGI, PHP, JavaScript скриптов, Java апплеты, огромное количество документации по разным языкам программирования, анимированные гифы, фоны, полезные программы, форум, ссылки по теме.">
<META NAME="keywords" CONTENT="perl scripts, perl, cgi scripts, cgi, перл, java, java scripts, веб-программирование, web-programming, html, каталог ссылок, документация по веб-программированию, cgi скрипты, java скрипты, игры, java апплеты, апплеты, гифы, скрипты, скрипт, книги по веб-программированию, форум по perl, CGI, Perl, script, HTML">
<Style>
A:Link{ Color: #000000; Text-decoration: underline}
A:Visited{ Color: #000000; Text-decoration: underline}
A:Hover{ Color: #000000; Text-decoration: none}
td, body {font-family: verdana, arial, helvetica; font-size:11px;}
</Style>



<SCRIPT language=JavaScript>
function MM_findObj(n, d) { //v4.0
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && document.getElementById) x=document.getElementById(n); return x;
}

function P7AniMagic(el, x, y, a, b, c, s) { //v2.5 PVII
var g,elo=el,f="",m=false,d="";x=parseInt(x);y=parseInt(y);
var t = 'g.p7Magic = setTimeout("P7AniMagic(\''+elo+'\',';
if ((g=MM_findObj(el))!=null) {d=(document.layers)?g:g.style;}else{return;}
if (parseInt(s)>0) {eval(t+x+','+y+','+a+','+b+','+c+',0)",' + s+')');return;}
var xx=(parseInt(d.left))?parseInt(d.left):0;
var yy=(parseInt(d.top))?parseInt(d.top):0;
if(parseInt(c)==1) {x+=xx;y+=yy;m=true;c=0;}
else if (c==2) {m=false;clearTimeout(g.p7Magic);}
else {var i=parseInt(a);
if (eval(g.moved)){clearTimeout(g.p7Magic);}
if (xx<x){xx+=i;m=true;if(xx>x){xx=x;}}
if (xx>x){xx-=i;m=true;if(xx<x){xx=x;}}
if (yy<y){yy+=i;m=true;if(yy>y){yy=y;}}
if (yy>y){yy-=i;m=true;if(yy<y){yy=y;}}}
if (m) {if((navigator.appName=="Netscape") && parseInt(navigator.appVersion)>4){
xx+="px";yy+="px";}
d.left=xx;d.top=yy;g.moved=true;eval(t+x+','+y+','+a+','+b+','+c+',0)",'+b+')');
}else {g.moved=false;}
}

function takeFocusBack() {
window.focus();
}

function MM_showHideLayers() { //v3.0
var i,p,v,obj,args=MM_showHideLayers.arguments;
for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v='hide')?'hidden':v; }
obj.visibility=v; }
}

function MM_nbGroup(event, grpName) { //v3.0
var i,img,nbArr,args=MM_nbGroup.arguments;
if (event == "init" && args.length > 2) {
if ((img = MM_findObj(args[2])) != null && !img.MM_init) {
img.MM_init = true; img.MM_up = args[3]; img.MM_dn = img.src;
if ((nbArr = document[grpName]) == null) nbArr = document[grpName] = new Array();
nbArr[nbArr.length] = img;
for (i=4; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {
if (!img.MM_up) img.MM_up = img.src;
img.src = img.MM_dn = args[i+1];
nbArr[nbArr.length] = img;
} }
} else if (event == "over") {
document.MM_nbOver = nbArr = new Array();
for (i=1; i < args.length-1; i+=3) if ((img = MM_findObj(args[i])) != null) {
if (!img.MM_up) img.MM_up = img.src;
img.src = (img.MM_dn && args[i+2]) ? args[i+2] : args[i+1];
nbArr[nbArr.length] = img;
}
} else if (event == "out" ) {
for (i=0; i < document.MM_nbOver.length; i++) {
img = document.MM_nbOver[i]; img.src = (img.MM_dn) ? img.MM_dn : img.MM_up; }
} else if (event == "down") {
if ((nbArr = document[grpName]) != null)
for (i=0; i < nbArr.length; i++) { img=nbArr[i]; img.src = img.MM_up; img.MM_dn = 0; }
document[grpName] = nbArr = new Array();
for (i=2; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {
if (!img.MM_up) img.MM_up = img.src;
img.src = img.MM_dn = args[i+1];
nbArr[nbArr.length] = img;
} }
}

function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
//-->
</SCRIPT>



</head>
<body bgcolor="#EDEDED" text="#000000" link="#000000" topmargin="0" leftmargin="0">
<center>



<DIV id=menu style="Z-INDEX: 10; LEFT: 0px; WIDTH: 88px; POSITION: absolute; TOP: 78px">
<A onfocus=takeFocusBack() href="javascript:;">
<IMG onmouseover="P7AniMagic('main',47,78,50,30,0,0);P7AniMagic('work',168,78,50,30,0,0);
P7AniMagic('price',294,78,50,30,0,0);P7AniMagic('koordinaty',414,78,50,30,0,0);
P7AniMagic('guestbook',534,78,50,30,0,0);MM_showHideLayers('sbros','','show')"
height=15 src="img/menu.gif" width=88 border=0>
</A>
</DIV>
<DIV id=main style="Z-INDEX: 9; LEFT: -200px; WIDTH: 88px; POSITION: absolute; TOP: 78px">
<A onfocus=takeFocusBack() href="http://www.easyprog.ru">
<IMG height=15 src="img/glav.gif" width=184 border=0>
</A></DIV>
<DIV id=work style="Z-INDEX: 8; LEFT: -200px; WIDTH: 88px; POSITION: absolute; TOP: 78px">
<A onfocus=takeFocusBack() href="http://easyprog.ru/index.php?option=com_content&task=view&id=118&Itemid=37">
<IMG height=15 src="img/raboty.gif" width=184 border=0>
</A>
</DIV>
<DIV id=price style="Z-INDEX: 7; LEFT: -200px; WIDTH: 88px; POSITION: absolute; TOP: 78px">
<A onfocus=takeFocusBack() href="http://easyprog.ru/index.php?option=com_content&task=view&id=139&Itemid=37">
<IMG height=15 src="img/ceny.gif" width=184 border=0>
</A>
</DIV>
<DIV id=koordinaty style="Z-INDEX: 6; LEFT: -200px; WIDTH: 88px; POSITION: absolute; TOP: 78px">
<A onfocus=takeFocusBack() href="http://easyprog.ru/index.php?option=com_contact&Itemid=3">
<IMG height=15 src="img/koordinaty.gif" width=184 border=0>
</A>
</DIV>
<DIV id=guestbook style="Z-INDEX: 5; LEFT: -200px; WIDTH: 88px; POSITION: absolute; TOP: 78px">
<A onfocus=takeFocusBack() href="http://www.easyprog.ru/forums/">
<IMG height=15 src="img/guestbook.gif" width=184 border=0>
</A>
</DIV>
<DIV id=sbros style="Z-INDEX: 3; LEFT: 0px; VISIBILITY: hidden; WIDTH: 99%; POSITION: absolute; TOP: 121px; HEIGHT: 60%">
<IMG onmouseover="P7AniMagic('guestbook',-200,78,60,30,0,0);
P7AniMagic('koordinaty',-200,78,60,30,0,200);
P7AniMagic('price',-200,78,60,30,0,400);
P7AniMagic('work',-200,78,60,30,0,600);
P7AniMagic('main',-200,78,60,30,0,800);
MM_showHideLayers('sbros','','hide')"
height="99%" src="img/blank.gif" width="99%">
</DIV>



</body>
</html>

Скачайте отсюда картинки, затем запустите скрипт и убедитесь, что он работает. Теперь давайте разберем программу более подробно. Начнем "с конца", тоесть, с того места, где у нас, собственно говоря, содержится HTML-код. И так, рассмотрим содержимое первого тэга div:

Этому тэгу присвоено id "menu" и стиль "Z-INDEX: 10; LEFT: 0px; WIDTH: 88px; POSITION: absolute; TOP: 78px". Расшифровывается это строка так:

Z-INDEX: 10. Это свойство стиля задает номер слоя, в который будет помещен этот тэг. Можно помещать тэги в разные слои, при этом они могу накладывать друг на друга и тэги в слое с большим номером закрывают собой тэги с меньшим номером. Они могу закрывать их и частично, то есть, тэги с в слое с меньшим номером могут "выставляется" из под тэгов в слое с большим номером.
LEFT: 0px. Задается координата начала тэга слева.
WIDTH: 88px. Ширина тэга.
POSITION: absolute. Способ задания позиции тэга. Означает, что позиция задана в абсолютных координатах. О способах позиционирования я уже писал в рассылке, если не помните или начали читать отсюда, то ознакомиться с этим материалом можно так же на моем сайте вот здесь (CSS, способы позиционирования блоков).
TOP: 78px. Задается вертикальное положение тэга, точка начала координат - сверху.

Далее, внутри тэга у нас идет ссылка:

внутри которой находиться картинка с навешанными на нее Java скриптами. Картинку мы уже рассмотрим в следующем выпуске, а сейчас я скажу пару слов о ссылке. Запись: "onfocus=takeFocusBack()" означает, что при фокусировке на данную ссылку необходимо запустить функцию takeFocusBack(), вот как она выглядит:

function takeFocusBack() {
window.focus();
}

Как видим, эта функция просто передает фокус окну браузера. Конкретная реализация window.focus() зависит от операционной системы. Обычно, если окно не минимизировано, то оно делается его текущим и выводится на передний план. Если же окно минимизировано, то его обозначение в списке минимизированных окон начинает мигать.

href="javascript:;" означает, что ссылкой является не url адрес, а java скрипт. Если бы он бы указан, то именно он бы вызывался при щелчке мышкой на ссылке. А в данном случае ничего не произойдет (точнее, произойдет, только это "произойдет" отработают скрипты навешанные на картинку). Спрашивается, а зачем тогда нужна такая ссылка, если при нажатии на нее ничего не происходит? Во превых, как я сказал в скобках, происходит, но реализуется другими скриптами. во вторых, в href мы должны что то указать, даже если у нас в данном случае "фиктивная" ссылка, которая нужна только для того, что бы при подведении к объекту мышки появлялась характерная для ссылок "рука".

На этом я закончу выпуск, продолжение разбора примера следует.

С уважением, Шуравин Александр, e-mail: megabax@rambler.ru, автор оставляет за собой право публиковать в рассылках ваши письма, если в письме прямо неоговорено нежелание его публиковать.