Layers/Buttons/Behaviours...

E

Easily Confused

I used the layers suggestion and I think it's exactly what I am after; however, when I added my buttons then inserted the layers, formatted the behaviours to show the hidden layers when the corresponding button is clicked. I now experience this problem
When you mouse off the button, that layer dissappears, taking the information within it as well. I need the layer to stay visible until the user clicks onto the next button.
Also, when I click on another button, it shows two layers at once.
I am typing text directly into the layers - should I be doing something diffrently
Appreciate any help you can offer!
 
J

John Jansen \(MSFT\)

You're very close. What this sounds like is that two of your layers have
the same ID, so check that by doing a simple find in code view. You should
be able to find <div and just check to see that all three have unique ID
attributes. Secondly, by default the behavior returns to its default state
onmouseout. You can change that in the Behaviors taskpane. Take a look at
that and see 'onmouseout' you can change that to onclick or dblclick.

--
Thanks!
John Jansen
Micosoft Office FrontPage
This posting is provided "AS IS" with no warranties, and confers no rights.
Easily Confused said:
I used the layers suggestion and I think it's exactly what I am after;
however, when I added my buttons then inserted the layers, formatted the
behaviours to show the hidden layers when the corresponding button is
clicked. I now experience this problem:
When you mouse off the button, that layer dissappears, taking the
information within it as well. I need the layer to stay visible until the
user clicks onto the next button.
 
E

Easily Confused

Below is the code from the "Test Page" I am curently working on. If I read the code right, they appear to have unique attributes already. i.e.;
<div style="position: absolute; width: 786px; height: 472px; z-index: 1; left: 10px; top: 47px; border: 1px solid #ABD5FF; padding-left: 4px; padding-right: 4px; padding-top: 1px; padding-bottom: 1px; visibility:visible" id="layer1"><div style="position: absolute; width: 100px; height: 100px; z-index: 1; left: 104px; top: -1px; visibility: hidden" id="layer2"><div style="position: absolute; width: 100px; height: 100px; z-index: 1; left: 103px; top: 0px; visibility: hidden" id="layer3">


The whole code is below...

<html><head><meta http-equiv="Content-Language" content="en-us"><meta name="GENERATOR" content="Microsoft FrontPage 6.0"><meta name="ProgId" content="FrontPage.Editor.Document"><meta http-equiv="Content-Type" content="text/html; charset=windows-1252"><title>Second Layer</title><script language="JavaScript"><!--
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_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=new Image; d.FP_imgs.src=a; }
}

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_changePropRestore() {//v1.0
var d=document,x; if(d.$cpe) { for(i=0; i<d.$cpe.length; i++) { x=d.$cpe;
if(x.v=="") x.v=""; eval("x."+x.n+"=x.v"); } d.$cpe=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.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"); }
}
// --></script></head><body onload="FP_preloadImgs(/*url*/'button2.jpg', /*url*/'button3.jpg', /*url*/'button5.jpg', /*url*/'button6.jpg', /*url*/'button8.jpg', /*url*/'button9.jpg')"><p><img border="0" id="img1" src="button1.jpg" height="33" width="100" alt="General Info" onmouseover="FP_swapImg(1,0,/*id*/'img1',/*url*/'button2.jpg')" onmouseout="FP_swapImg(0,0,/*id*/'img1',/*url*/'button1.jpg'); FP_changePropRestore()" onmousedown="FP_swapImg(1,0,/*id*/'img1',/*url*/'button3.jpg')" onmouseup="FP_swapImg(0,0,/*id*/'img1',/*url*/'button2.jpg')" fp-style="fp-btn: Metal Tab 1" fp-title="General Info" onclick="FP_changeProp(/*id*/'layer1',1,'style.visibility','inherit')"><img border="0" id="img2" src="button4.jpg" height="33" width="100" alt="Office Equip" onmouseover="FP_swapImg(1,0,/*id*/'img2',/*url*/'button5.jpg')" onmouseout="FP_swapImg(0,0,/*id*/'img2',/*url*/'button4.jpg'); FP_changePropRestore()" onmousedown="FP_swapImg(1,0,/*id*/'img2',/*url*/'button6.jpg')" onmouseup="FP_swapImg(0,0,/*id*/'img2',/*url*/'button5.jpg')" fp-style="fp-btn: Metal Tab 1" fp-title="Office Equip" onclick="FP_changeProp(/*id*/'layer2',1,'style.visibility','inherit')"><img border="0" id="img3" src="button7.jpg" height="33" width="100" alt="Misc" onmouseover="FP_swapImg(1,0,/*id*/'img3',/*url*/'button8.jpg')" onmouseout="FP_swapImg(0,0,/*id*/'img3',/*url*/'button7.jpg')" onmousedown="FP_swapImg(1,0,/*id*/'img3',/*url*/'button9.jpg')" onmouseup="FP_swapImg(0,0,/*id*/'img3',/*url*/'button8.jpg')" fp-style="fp-btn: Metal Tab 1" fp-title="Misc"></p><div style="position: absolute; width: 786px; height: 472px; z-index: 1; left: 10px; top: 47px; border: 1px solid #ABD5FF; padding-left: 4px; padding-right: 4px; padding-top: 1px; padding-bottom: 1px; visibility:visible" id="layer1"><div style="position: absolute; width: 100px; height: 100px; z-index: 1; left: 104px; top: -1px; visibility: hidden" id="layer2"><div style="position: absolute; width: 100px; height: 100px; z-index: 1; left: 103px; top: 0px; visibility: hidden" id="layer3">&nbsp;</div><p>Second Layer</div><p onmouseout="FP_changePropRestore()" onmouseover="FP_changeProp(/*id*/'img1',1,'style.visibility','visible')">
Insert Text here and here and here</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</div></body></html>
 
J

John Jansen \(MSFT\)

OH, I see what happened. I misunderstood your 2nd problem. Your IDs are
correct, but since each layer is inside one before it, you are seeing the
bad behavior.

Your layers are nested inside each other, so you need to actually insert
them on top of one another, so you code looks like this:

<div...>layer one</div>
<div...>layer two</div>
<div...>layer three</div>

instead of like this:

<div...>layer one<div...>layer two<div...>layer three</div></div></div>

(notice how they close?)

Then set the proper behaviors.

--
Thanks!
John Jansen
Micosoft Office FrontPage
This posting is provided "AS IS" with no warranties, and confers no rights.
Easily Confused said:
Below is the code from the "Test Page" I am curently working on. If I read
the code right, they appear to have unique attributes already. i.e.;
<div style="position: absolute; width: 786px; height: 472px; z-index: 1;
left: 10px; top: 47px; border: 1px solid #ABD5FF; padding-left: 4px;
padding-right: 4px; padding-top: 1px; padding-bottom: 1px;
visibility:visible" id="layer1"><div style="position: absolute; width:
100px; height: 100px; z-index: 1; left: 104px; top: -1px; visibility:
hidden" id="layer2"><div style="position: absolute; width: 100px; height:
100px; z-index: 1; left: 103px; top: 0px; visibility: hidden" id="layer3">
The whole code is below...

<html><head><meta http-equiv="Content-Language" content="en-us"><meta
name="GENERATOR" content="Microsoft FrontPage 6.0"><meta name="ProgId"
content="FrontPage.Editor.Document"><meta http-equiv="Content-Type"
content="text/html; charset=windows-1252"> said:
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_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=new Image; d.FP_imgs.src=a; }
}

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_changePropRestore() {//v1.0
var d=document,x; if(d.$cpe) { for(i=0; i<d.$cpe.length; i++) { x=d.$cpe;
if(x.v=="") x.v=""; eval("x."+x.n+"=x.v"); } d.$cpe=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.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"); }
}
// --></script></head><body onload="FP_preloadImgs(/*url*/'button2.jpg',

/*url*/'button3.jpg', /*url*/'button5.jpg', /*url*/'button6.jpg',
/*url*/'button8.jpg', /*url*/'button9.jpg')"><p><img border="0" id="img1"
src="button1.jpg" height="33" width="100" alt="General Info"
onmouseover="FP_swapImg(1,0,/*id*/'img1',/*url*/'button2.jpg')"
onmouseout="FP_swapImg(0,0,/*id*/'img1',/*url*/'button1.jpg');
FP_changePropRestore()"
onmousedown="FP_swapImg(1,0,/*id*/'img1',/*url*/'button3.jpg')"
onmouseup="FP_swapImg(0,0,/*id*/'img1',/*url*/'button2.jpg')"
fp-style="fp-btn: Metal Tab 1" fp-title="General Info"
onclick="FP_changeProp(/*id*/'layer1',1,'style.visibility','inherit')"><img
border="0" id="img2" src="button4.jpg" height="33" width="100" alt="Office
Equip" onmouseover="FP_swapImg(1,0,/*id*/'img2',/*url*/'button5.jpg')"
onmouseout="FP_swapImg(0,0,/*id*/'img2',/*url*/'button4.jpg');
FP_changePropRestore()"
onmousedown="FP_swapImg(1,0,/*id*/'img2',/*url*/'button6.jpg')"
onmouseup="FP_swapImg(0,0,/*id*/'img2',/*url*/'button5.jpg')"
fp-style="fp-btn: Metal Tab 1" fp-title="Office Equip"
onclick="FP_changeProp(/*id*/'layer2',1,'style.visibility','inherit')"><img
border="0" id="img3" src="button7.jpg" height="33" width="100" alt="Misc"
onmouseover="FP_swapImg(1,0,/*id*/'img3',/*url*/'button8.jpg')"
onmouseout="FP_swapImg(0,0,/*id*/'img3',/*url*/'button7.jpg')"
onmousedown="FP_swapImg(1,0,/*id*/'img3',/*url*/'button9.jpg')"
onmouseup="FP_swapImg(0,0,/*id*/'img3',/*url*/'button8.jpg')"
fp-style="fp-btn: Metal Tab 1" fp-title="Misc"></p><div style="position:
absolute; width: 786px; height: 472px; z-index: 1; left: 10px; top: 47px;
border: 1px solid #ABD5FF; padding-left: 4px; padding-right: 4px;
padding-top: 1px; padding-bottom: 1px; visibility:visible" id="layer1"><div
style="position: absolute; width: 100px; height: 100px; z-index: 1; left:
104px; top: -1px; visibility: hidden" id="layer2"><div style="position:
absolute; width: 100px; height: 100px; z-index: 1; left: 103px; top: 0px;
visibility: hidden" id="layer3">&nbsp;</div><p>Second Layer</div><p
onmouseout="FP_changePropRestore()"
onmouseover="FP_changeProp(/*id*/'img1',1,'style.visibility','visible')">
Insert Text here and here and
here</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</div><
/body></html>
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Top