Layers problem with java pop-up menus

[mdbw]

I am following an online tutorial:
[url]http://www.creativepro.com/story/feature/17898-2.html[/url]

When I get to this part, the sentence that I have bolded is not working, I
actually have to click show for every nested layer (50 of them), and this is
creating problems when I get to the last part of the tutorial because in order
to keep the nested layers visible I have to do a show-hide behavior on each of
them and end up having to show every single layer in the behavior for every
single layer. So, as you can see, it's a lot of unnecessary work.

[Q]Now, click on the main menu image that will be used to trigger the pop-up
menu -- in our case, it's the Products button. Now, choose Window > Behaviors
to open the Behaviors panel. Click the Add Actions button and select Show-Hide
Layers. The Show/Hide Layers dialog box appears, listing all available layers
in your document, as shown in figure 8. Since our layers are nested, all we
need to do is choose Layer "productMenu," click Show, and then click OK.
Now the new behavior shows up in the behavior window, but it may not have the
correct event. Events are what trigger the action part of the behavior. In this
case, you want it to be triggered by an onMouseOver event. If it doesn't say
onMouseOver in the Events column for your action, click on the pop-up menu and
choose onMouseOver from the list. Now if you test your page in a browser, the
menu should pop up when you roll over the Product button. You'll notice that it
doesn't go away, though, so that's what we'll tackle next.[/Q]

When I do what they say in bold, and mouseOver the menu link nothing
happens.... for some reason the main layer will not show up even if i tell it
too....this is the main problem. Please help.

[Murray *TMM*]

That tutorial is flawed in several important respects -

1. It has you create nested "layers" and does not tell you to convert the
inner ones to fully CSS qualified styles. This is a big mistake because it
means that your menus will not work properly in all browsers.

2. It uses mouseover events on the submenu text to 'keep the submenu layers
alive' which, in my opinion is an unreliable method.

Here is the best way to make these menus -

[url]http://www.projectseven.com/tutorials/menuing/mcloser/index.htm[/url]

or

[url]http://www.projectseven.com/tutorials/auto_hide/index.htm[/url]

and here's an example you can analyze -

[url]http://www.projectseven.com/tutorials/autolayers/[/url]

Learn these simple methods (which are not too different from the creativepro
ones) and you will be able to make any menu you want. You may also find
that the use of the AutoLayer extension saves you quite a bit of time in the
process!


--
Murray --- ICQ 71997575
Team Macromedia Volunteer for Dreamweaver MX
(If you *MUST* email me, don't LAUGH when you do so!)
==================
[url]news://forums.macromedia.com/macromedia.dreamweaver[/url] - THE BEST WAY TO GET
ANSWERS
==================
[url]http://www.dreamweavermx-templates.com[/url] - Template Triage!
[url]http://www.projectseven.com/go[/url] - DW FAQs, Tutorials & Resources
[url]http://www.dwfaq.com[/url] - DW FAQs, Tutorials & Resources
[url]http://www.macromedia.com/support/search/[/url] - Macromedia (MM) Technotes
==================

"mdbw" <webforumsuser@macromedia.com> wrote in message
news:c73mq1$962$1@forums.macromedia.com...

> I am following an online tutorial:
> [url]http://www.creativepro.com/story/feature/17898-2.html[/url]
>
> When I get to this part, the sentence that I have bolded is not working,

I

> actually have to click show for every nested layer (50 of them), and this

is

> creating problems when I get to the last part of the tutorial because in

order

> to keep the nested layers visible I have to do a show-hide behavior on

each of

> them and end up having to show every single layer in the behavior for

every

> single layer. So, as you can see, it's a lot of unnecessary work.
>
> [Q]Now, click on the main menu image that will be used to trigger the

pop-up

> menu -- in our case, it's the Products button. Now, choose Window >

Behaviors

> to open the Behaviors panel. Click the Add Actions button and select

Show-Hide

> Layers. The Show/Hide Layers dialog box appears, listing all available

layers

> in your document, as shown in figure 8. Since our layers are nested,

all we

> need to do is choose Layer "productMenu," click Show, and then click

OK.

> Now the new behavior shows up in the behavior window, but it may not have

the

> correct event. Events are what trigger the action part of the behavior. In

this

> case, you want it to be triggered by an onMouseOver event. If it doesn't

say

> onMouseOver in the Events column for your action, click on the pop-up menu

and

> choose onMouseOver from the list. Now if you test your page in a browser,

the

> menu should pop up when you roll over the Product button. You'll notice

that it

> doesn't go away, though, so that's what we'll tackle next.[/Q]
>
> When I do what they say in bold, and mouseOver the menu link nothing
> happens.... for some reason the main layer will not show up even if i tell

it

> too....this is the main problem. Please help.
>

[Steel_Cat]

II've found the best way to learn is to fiddle around with the things you
know... then slowly expand your knowledge. The "OnMousOver" event is a very
powerful one, and you can achieve just about anything with it's counterparts
"OnClick" and "OnMouseOut". Here's an example of something I just made for you
to fool around with using these three Events with the "Show/Hide Layers", "Set
Text of Layer", and "Change Property commands. There are no graphics involved
(except for a transparent gif named "trans", which you can put in if you want
to get rid of that goody red X :P)

Copy and paste this code, and then review it in dreamwiever, this simple menu
takes about 10 minutes to make, and again - has no graphics, instead utilizing
colored layers (except for the transparent gif):


<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript">
<!--
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if
((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight;
onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH)
location.reload();
}
MM_reloadPage(true);
// -->

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 MM_setTextOfLayer(objName,x,newText) { //v3.0
if ((obj=MM_findObj(objName))!=null) with (obj)
if (navigator.appName=='Netscape') {document.write(unescape(newText));
document.close();}
else innerHTML = unescape(newText);
}

function MM_changeProp(objName,x,theProp,theValue) { //v3.0
var obj = MM_findObj(objName);
if (obj && (theProp.indexOf("style.")==-1 || obj.style))
eval("obj."+theProp+"='"+theValue+"'");
}

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; }
}
//-->
</script>
</head>

<body bgcolor="#006699" text="#000000">
<div id="buttontext" style="position:absolute; left:20px; top:34px;
width:150px; height:16px; z-index:3">
<div align="center"><font face="Tahoma" color="#006699"><b><font size="4"
color="#FFFFFF">menu#1</font></b></font></div>
</div>
<div id="buttonback1" style="position:absolute; left:25px; top:25px;
width:140px; height:40px; z-index:2; background-color: #003366;
layer-background-color: #003366; border: 1px none #000000"></div>
<div id="buttonborder1" style="position:absolute; left:20px; top:20px;
width:150px; height:50px; z-index:1; background-color: #CCCCCC;
layer-background-color: #CCCCCC; border: 1px none #000000"></div>
<div id="rolloverarea" style="position:absolute; left:20px; top:20px;
width:150px; height:50px; z-index:4"><img src="trans.gif" width="150"
height="50" border="0" usemap="#button1">
<map name="button1">
<area shape="rect" coords="-4,-9,176,60" href="#"
onMouseOver="MM_setTextOfLayer('buttontext','','%3 Cdiv
align=%22center%22%3E%3Cfont face=%22Tahoma%22
color=%22#006699%22%3E%3Cb%3E%3Cfont size=%224%22
color=%22#003366%22%3Emenu#1%3C/font%3E%3C/b%3E%3C/font%3E%3C/div%3E');MM_change
Prop('buttonback1','','style.backgroundColor','#FF FFFF','LAYER');MM_changeProp('
buttonborder1','','style.backgroundColor','#003366 ','LAYER');MM_showHideLayers('
menu1back','','show','menu1backborder','','show',' menu1button1back','','show','m
enu1button2back','','show','menu1button3back','',' show','menu1button4back','','s
how','menu1button5back','','show','menu1button6bac k','','show','menu1titleback',
'','show','menu1button1text','','show','menu1butto n2text','','show','menu1button
3text','','show','menu1button4text','','show','men u1button5text','','show','menu
1button6text','','show','menu1button2rolloverarea' ,'','show','menu1button1rollov
erarea','','show','menu1button3rolloverarea','','s how','menu1button4rolloverarea
','','show','menu1button5rolloverarea','','show',' menu1button6rolloverarea','','
show','menu1clickout','','show')">
</map>
</div>
<div id="menu1back" style="position:absolute; left:120px; top:90px;
width:225px; height:300px; z-index:5; background-color: #FFFFFF;
layer-background-color: #FFFFFF; border: 1px none #000000; visibility:
hidden"></div>
<div id="menu1backborder" style="position:absolute; left:110px; top:80px;
width:245px; height:320px; z-index:4; background-color: #003366;
layer-background-color: #003366; border: 1px none #000000; visibility:
hidden"></div>
<div id="menu1button1back" style="position:absolute; left:128px; top:123px;
width:208px; height:33px; z-index:6; background-color: #006699;
layer-background-color: #006699; border: 1px none #000000; visibility: hidden">
<div align="center"></div>
</div>
<div id="menu1button2back" style="position:absolute; left:128px; top:168px;
width:208px; height:33px; z-index:6; background-color: #006699;
layer-background-color: #006699; border: 1px none #000000; visibility:
hidden"></div>
<div id="menu1button3back" style="position:absolute; left:128px; top:213px;
width:208px; height:33px; z-index:6; background-color: #006699;
layer-background-color: #006699; border: 1px none #000000; visibility:
hidden"></div>
<div id="menu1button4back" style="position:absolute; left:128px; top:258px;
width:208px; height:33px; z-index:6; background-color: #006699;
layer-background-color: #006699; border: 1px none #000000; visibility:
hidden"></div>
<div id="menu1button5back" style="position:absolute; left:128px; top:303px;
width:208px; height:33px; z-index:6; background-color: #006699;
layer-background-color: #006699; border: 1px none #000000; visibility:
hidden"></div>
<div id="menu1button6back" style="position:absolute; left:128px; top:348px;
width:208px; height:33px; z-index:6; background-color: #006699;
layer-background-color: #006699; border: 1px none #000000; visibility:
hidden"></div>
<div id="menu1titleback" style="position:absolute; left:153px; top:88px;
width:160px; height:27px; z-index:5; background-color: #003366;
layer-background-color: #003366; border: 1px none #000000; visibility: hidden">
<div align="center"><b><font face="Tahoma" size="3" color="#FFFFFF">[menu #1
options]</font></b></div>
</div>
<div id="menu1button1text" style="position:absolute; left:128px; top:130px;
width:208px; height:17px; z-index:7; visibility: hidden">
<div align="center"><font face="Tahoma" color="#CCCCCC">option
#1</font></div>
</div>
<div id="menu1button2text" style="position:absolute; left:128px; top:175px;
width:208px; height:17px; z-index:7; visibility: hidden">
<div align="center"><font face="Tahoma" color="#CCCCCC">option
#2</font></div>
</div>
<div id="menu1button3text" style="position:absolute; left:128px; top:220px;
width:208px; height:17px; z-index:7; visibility: hidden">
<div align="center"><font face="Tahoma" color="#CCCCCC">option
#3</font></div>
</div>
<div id="menu1button4text" style="position:absolute; left:128px; top:265px;
width:208px; height:17px; z-index:7; visibility: hidden">
<div align="center"><font face="Tahoma" color="#CCCCCC">option
#4</font></div>
</div>
<div id="menu1button5text" style="position:absolute; left:128px; top:310px;
width:208px; height:17px; z-index:7; visibility: hidden">
<div align="center"><font face="Tahoma" color="#CCCCCC">option
#5</font></div>
</div>
<div id="menu1button6text" style="position:absolute; left:128px; top:355px;
width:208px; height:17px; z-index:7; visibility: hidden">
<div align="center"><font face="Tahoma" color="#CCCCCC">option
#6</font></div>
</div>
<div id="menu1button2rolloverarea" style="position:absolute; left:128px;
top:168px; width:208px; height:33px; z-index:8; visibility: hidden"><img
src="trans.gif" width="208" height="33" usemap="#Map2" border="0">
<map name="Map2">
<area shape="rect" coords="-5,-5,233,46" href="#"
onMouseOver="MM_setTextOfLayer('menu1button2text', '','%3Cdiv
align=%22center%22%3E%3Cfont face=%22Tahoma%22
color=%22#006699%22%3E%3Cb%3Eoption
#2%3C/b%3E%3C/font%3E%3C/div%3E');MM_changeProp('menu1button2back','','styl e.bac
kgroundColor','#CCCCCC','LAYER')"
onMouseOut="MM_setTextOfLayer('menu1button2text',' ','%3Cdiv
align=%22center%22%3E%3Cfont face=%22Tahoma%22 color=%22#CCCCCC%22%3Eoption
#2%3C/font%3E%3C/div%3E');MM_changeProp('menu1button2back','','styl e.backgroundC
olor','#006699','LAYER')"
onClick="MM_setTextOfLayer('menuselectiontext','', '%3Cdiv
align=%22center%22%3E%3Cfont face=%22Tahoma%22 color=%22#CCCCCC%22%3Emenu
selection: %3Cb%3Eoption #2%3C/b%3E%3C/font%3E%3C/div%3E')">
</map>
</div>
<div id="menu1button1rolloverarea" style="position:absolute; left:128px;
top:123px; width:208px; height:33px; z-index:8; visibility: hidden"><img
src="trans.gif" width="208" height="33" usemap="#Map2Map" border="0">
<map name="Map2Map">
<area shape="rect" coords="-7,-5,231,46" href="#"
onMouseOver="MM_setTextOfLayer('menu1button1text', '','%3Cdiv
align=%22center%22%3E%3Cfont face=%22Tahoma%22
color=%22#006699%22%3E%3Cb%3Eoption
#1%3C/b%3E%3C/font%3E%3C/div%3E');MM_changeProp('menu1button1back','','styl e.bac
kgroundColor','#CCCCCC','LAYER')"
onMouseOut="MM_setTextOfLayer('menu1button1text',' ','%3Cdiv
align=%22center%22%3E%3Cfont face=%22Tahoma%22 color=%22#CCCCCC%22%3Eoption
#1%3C/font%3E%3C/div%3E');MM_changeProp('menu1button1back','','styl e.backgro