FrontPage Behaviors and Layers are very
powerful features that allow more advance user
to concentrate on other things. For beginners
and intermediate users, FrontPage makes it easy to
accomplish sophisticated programming with just a
few mouse clicks!!
I did this page in about 5 minutes, just a few years ago it
would have taken
hours, just look at the code and images FrontPage Produced with about 50 mouse
clicks...
| <script language="JavaScript"> <!-- function FP_preloadImgs() {//v1.0 var d=document,a=arguments; if(!d.FP_imgs) d.FP_imgs=new Array(); for(var i=0; i<a.length; i++) { d.FP_imgs[i]=new Image; d.FP_imgs[i].src=a[i]; } } function FP_swapImg() {//v1.0 var doc=document,args=arguments,elm,n; doc.$imgSwaps=new Array(); for(n=2; n<args.length; n+=2) { elm=FP_getObjectByID(args[n]); if(elm) { doc.$imgSwaps[doc.$imgSwaps.length]=elm; elm.$src=elm.src; elm.src=args[n+1]; } } } function FP_getObjectByID(id,o) {//v1.0 var c,el,els,f,m,n; if(!o)o=document; if(o.getElementById) el=o.getElementById(id); else if(o.layers) c=o.layers; else if(o.all) el=o.all[id]; if(el) return el; if(o.id==id || o.name==id) return o; if(o.childNodes) c=o.childNodes; if(c) for(n=0; n<c.length; n++) { el=FP_getObjectByID(id,c[n]); if(el) return el; } f=o.forms; if(f) for(n=0; n<f.length; n++) { els=f[n].elements; for(m=0; m<els.length; m++){ el=FP_getObjectByID(id,els[n]); if(el) return el; } } return null; } function FP_changeProp() {//v1.0 var args=arguments,d=document,i,j,id=args[0],o=FP_getObjectByID(id),s,ao,v,x; d.$cpe=new Array(); if(o) for(i=2; i<args.length; i+=2) { v=args[i+1]; s="o"; ao=args[i].split("."); for(j=0; j<ao.length; j++) { s+="."+ao[j]; if(null==eval(s)) { s=null; break; } } x=new Object; x.o=o; x.n=new Array(); x.v=new Array(); x.n[x.n.length]=s; eval("x.v[x.v.length]="+s); d.$cpe[d.$cpe.length]=x; if(s) eval(s+"=v"); } } function FP_changePropRestore() {//v1.0 var d=document,x; if(d.$cpe) { for(i=0; i<d.$cpe.length; i++) { x=d.$cpe[i]; if(x.v=="") x.v=""; eval("x."+x.n+"=x.v"); } d.$cpe=null; } } // --> </script> <body onload="FP_preloadImgs(/*url*/'../../images/Buttons/buttonD.jpg',/*url*/'../../images/Buttons/buttonE.jpg')"> <div style="position: absolute; width: 100px; height: 20px; z-index: 1; left: 18px; top: 135px" id="layer6" onmouseout="FP_changePropRestore()" onmouseover="FP_changeProp(/*id*/'layer2',1,'style.visibility','visible')"> <img border="0" id="img3" src="../../images/Buttons/buttonC.jpg" height="20" width="100" alt="Link 1" onmouseover="FP_swapImg(1,0,/*id*/'img3',/*url*/'../../images/Buttons/buttonD.jpg')" onmouseout="FP_swapImg(0,0,/*id*/'img3',/*url*/'../../images/Buttons/buttonC.jpg')" onmousedown="FP_swapImg(1,0,/*id*/'img3',/*url*/'../../images/Buttons/buttonE.jpg')" onmouseup="FP_swapImg(0,0,/*id*/'img3',/*url*/'../../images/Buttons/buttonD.jpg')" fp-style="fp-btn: Border Left 2; fp-orig: 0" fp-title="Link 1"></div> <div style="position: absolute; width: 100px; height: 20px; z-index: 1; left: 18px; top: 97px" id="layer5" onmouseout="FP_changePropRestore()" onmouseover="FP_changeProp(/*id*/'layer3',1,'style.visibility','visible')"> <img border="0" id="img2" src="../../images/Buttons/buttonC.jpg" height="20" width="100" alt="Link 1" onmouseover="FP_swapImg(1,0,/*id*/'img2',/*url*/'../../images/Buttons/buttonD.jpg')" onmouseout="FP_swapImg(0,0,/*id*/'img2',/*url*/'../../images/Buttons/buttonC.jpg')" onmousedown="FP_swapImg(1,0,/*id*/'img2',/*url*/'../../images/Buttons/buttonE.jpg')" onmouseup="FP_swapImg(0,0,/*id*/'img2',/*url*/'../../images/Buttons/buttonD.jpg')" fp-style="fp-btn: Border Left 2; fp-orig: 0" fp-title="Link 1"></div> <div style="position: absolute; width: 100px; height: 20px; z-index: 1; left: 17px; top: 59px" id="layer1" onmouseout="FP_changePropRestore()" onmouseover="FP_changeProp(/*id*/'layer4',1,'style.visibility','visible')"> <img border="0" id="img1" src="../../images/Buttons/buttonC.jpg" height="20" width="100" alt="Link 1" onmouseover="FP_swapImg(1,0,/*id*/'img1',/*url*/'../../images/Buttons/buttonD.jpg')" onmouseout="FP_swapImg(0,0,/*id*/'img1',/*url*/'../../images/Buttons/buttonC.jpg')" onmousedown="FP_swapImg(1,0,/*id*/'img1',/*url*/'../../images/Buttons/buttonE.jpg')" onmouseup="FP_swapImg(0,0,/*id*/'img1',/*url*/'../../images/Buttons/buttonD.jpg')" fp-style="fp-btn: Border Left 2" fp-title="Link 1"></div> <div style="position: absolute; width: 59px; height: 56px; z-index: 6; left: 201px; top: 50px; visibility: hidden; border: 1px solid #000000; background-color: #CCCCCC" id="layer2"> <img border="0" src="../../images/avatars/1686.jpg" width="64" height="64"></div> <div style="position: absolute; width: 63px; height: 64px; z-index: 7; left: 400px; top: 49px; visibility: hidden; border-style: solid; border-width: 1px; background-color: #CCCCCC" id="layer3"> <img border="0" src="../../images/avatars/7184.jpg" width="64" height="64"></div> <div style="position: absolute; width: 62px; height: 59px; z-index: 8; left: 601px; top: 50px; visibility: hidden; border: 1px solid #000000; background-color: #CCCCCC" id="layer4"> <img border="0" src="../../images/avatars/7666.gif" width="64" height="64"></div> <div style="position: absolute; width: 69px; height: 67px; z-index: 4; left: 599px; top: 50px; border: 1px solid #000000; background-color: #CCCCCC" id="layer9"> </div> <div style="position: absolute; width: 69px; height: 67px; z-index: 4; left: 199px; top: 48px; border: 1px solid #000000; background-color: #CCCCCC" id="layer8"> </div> <div style="position: absolute; width: 69px; height: 67px; z-index: 5; left: 399px; top: 48px; border: 1px solid #000000; background-color: #CCCCCC" id="layer7"> </div> |
