Flash seems to be the order of the day! Given this, I thought it's about time I explained how to "embed DHTML" into a Flash Menu. (The Menu in this example is a simple & basic one in Flash - total weight of the .swf file is less than 1000 bytes!). But please do remember, it's beyond the scope of this site to explain how to create a flash menu! I'm assuming, you know that already. (Those who don't, can download this script & use it as it is - except that the Pop-Up DHTML tables can of course, be modified as you wish. Tips on how to use it as it is - has been explained later in this page).

To start with, create the number of tables you need. In this example, there are 5 (for 5 buttons) - wrapped within DIV tags with IDs I've named sub1, sub2 ... sub5 and position them as appropriate (In this example, it's POSITION:ABSOLUTE; TOP:160; LEFT:80;). I suppose that's easy enough. Put all these DIVs right at the bottom of the page. (You'll not like non-DHTML browsers to show up all these tables on top of the pages!!)

Having done that, get down to writing the actual Javascript code (which goes within the HEAD tags as is normal). It's really quite simple. Before I proceed any further, let me tell you, I have named these functions showit1(), showit2() ... showit5() for the 5 buttons. The code is like this:

function showit1(){
if(document.getElementById){
document.getElementById('sub1').style.visibility="visible";
document.getElementById('sub2').style.visibility="hidden";
document.getElementById('sub3').style.visibility="hidden";
document.getElementById('sub4').style.visibility="hidden";
document.getElementById('sub5').style.visibility="hidden";
}
if(document.layers){
document.sub1.visibility="visible";
document.sub5.visibility="hidden";
document.sub2.visibility="hidden";
document.sub3.visibility="hidden";
document.sub4.visibility="hidden";
}
if(document.all && !(document.getElementById)){
sub1.style.visibility="visible";
sub5.style.visibility="hidden";
sub2.style.visibility="hidden";
sub3.style.visibility="hidden";
sub4.style.visibility="hidden";
}
}

As you can see, the showit1() function controls the visibility property of the DIV tags - sub1 being visible & all the rest hidden. incidentally, document.getElementById sniffs IE5 & NS6 while document.layers is for NS4 and (document.all && !(document.getElementById)) is for IE4

Likewise, I have created 4 other showit functions where the corresponding DIV tags are visible & others hidden.

Finally, I have created ANOTHER function called hideall(), where, as the name itself indicates, all DIV tags have their visibility property set to hidden.

You are now ready to embed the function calls into the Flash Menu. Simple if you know Flash! For each button, enter ACTION as Get URL (roll over) = javascript:showit1() (for the first button, showit2 for the second and so on) & then ACTION Get URL (roll out) = javascript:hideall() (for all five of them).

The downloadable zipped file includes the .fla as well as the .swf files.

As I mentioned above, if any one wants to use it as it is you can do so. All you'll have to do is name your 5 pages as a.htm, b.htm, c.htm, d.htm & e.htm. In fact, the zipped bundle already contains these five pages!! Re-design them as you need & use them if you wish. The more enterprising lot could use these pages (a ~ e) to redirect to actual pages!

Just one more point - because NS6 ignores the Table Cellpadding (when with a DIV tag), create a CSS class for the texts that go inside the pop-up tables & specify a "padding". See the example source code - I've given a padding of 5px.