<script type="text/javascript">
function toggleDiv(divid){
    if(document.getElementById(divid).style.display == 'none'){
      document.getElementById(divid).style.display = 'block';
    }else{
      document.getElementById(divid).style.display = 'none';
    }
  }
</script>

<a href="java script:;" onmousedown="toggleDiv('mydiv');">Click here for more info!</a><br />
<div id="mydiv" style="display:none">
Here's the hidden text!
</div>

body {
background-color: #ffffff;
}

div.nav1 {
height: 50px;
width: 150px;
margin-top:15px;
padding:0;
background-image:url("img/btn_down1.png");
}

div.nav1 a, div.nav1 a:link, div.nav1 a:visited {
display:block;
}

div.nav1 img {
width:100%;
height:100%;
border:0;
}

div.nav1 a:hover img {
visibility:hidden;
}

div.nav2 {
height: 50px;
width: 150px;
margin-left:153px;
margin-top:-50px;
padding:0;
background-image:url("img/btn_down2.png");
}

div.nav2 a, div.nav2 a:link, div.nav2 a:visited {
display:block;
}

div.nav2 img {
width:100%;
height:100%;
border:0;
}

div.nav2 a:hover img {
visibility:hidden;
}

div.nav3 {
height: 50px;
width: 150px;
margin-left:306px;
margin-top:-50px;
padding:0;
background-image:url("img/btn_down3.png");
}

div.nav3 a, div.nav3 a:link, div.nav3 a:visited {
display:block;
}

div.nav3 img {
width:100%;
height:100%;
border:0;
}

div.nav3 a:hover img {
visibility:hidden;
}

div.nav4 {
height: 50px;
width: 150px;
margin-left:459px;
margin-top:-50px;
padding:0;
background-image:url("img/btn_down4.png");
}

div.nav4 a, div.nav4 a:link, div.nav4 a:visited {
display:block;
}

div.nav4 img {
width:100%;
height:100%;
border:0;
}

div.nav4 a:hover img {
visibility:hidden;
}

div.nav5 {
height: 50px;
width: 150px;
margin-left:612px;
margin-top:-50px;
padding:0;
background-image:url("img/btn_down5.png");
}

div.nav5 a, div.nav5 a:link, div.nav5 a:visited {
display:block;
}

div.nav5 img {
width:100%;
height:100%;
border:0;
}

div.nav5 a:hover img {
visibility:hidden;
}

<div class="nav1">
    <a href="#"><img src="img/btn_up1.png" width="150" height="50" alt="" /></a>
</div>
<div class="nav2">
    <a href="#"><img src="img/btn_up2.png" width="150" height="50" alt="" /></a>
</div>
<div class="nav3">
    <a href="#"><img src="img/btn_up3.png" width="150" height="50" alt="" /></a>
</div>
<div class="nav4">
    <a href="#"><img src="img/btn_up4.png" width="150" height="50" alt="" /></a>
</div>
<div class="nav5">
    <a href="#"><img src="img/btn_up5.png" width="150" height="50" alt="" /></a>
</div>

&txt1var=Link 1
&txt2var=Link 2
&txt3var=Link 3
&txt4var=Link 4


&files1=<font face="Arial"><font size="15"><font color="#003060">
Add text here.  With wordwrap and multiline functions enabled in the ActionScript, this text should wrap around the text area as it would in a CSS container on an HTML page.  With HTML set to True, the bracketed information on font sizes and colors should also work in your Flash presentation.

&files2=<font face="Tahoma Bold"><font size="25"><font color="#ff0000">
Add a bunch of junk related to your second link here.

&files3=<font face="Impact"><font size="15"><font color="#ff00ff">
Add more junk related to your third link here.

&files4=<font face="Arial"><font size="12"><font color="#003060">
Add junk related to your fourth link here.  And so on and so forth.....

loadVariables("text.txt",_root);
_root.createTextField("frmInfo",1,169,60,362,361);
frmInfo.multiline = true;
frmInfo.wordWrap = true;
frmInfo.border = false;
frmInfo.html = true;
frmInfo.type = dynamic;
frmInfo.selectable = false;
frmInfo.background = false;
frmInfo.font = "Courier New";
frmInfo.variable = "files1";
stop();

body {
background-color:#FFFFFF;
color:#000000;
margin:20px;
text-align:left;
}

#wrapper        
    {position: absolute;
     top: 50%;
     left: 0px;
     width: 25%;
     height: 1px;}

#content
    {margin-left: 0px;
         position: absolute;
     top: -200px;
     left: 50%;
     width: 700px;
     height: 300px}

.bgtext                     
    {font-size: 100px;
     position:absolute;
     top:120px;
     left:0px;
     color:#1d243a;
     font-family:verdana, helvetica, sans serif;}

div#link1, div#link2, div#link3, div#link4
         {color:#767f9a;
          font-family:verdana, helvetica, sans serif;
          position:absolute;}

div#link1 {font-size:40px;
        top:75px;
        left:100px;}
        
div#link2 {font-size:50px;
        top:25px;
        left:300px;}
                
div#link3 {font-size:30px;
        top:275px;
        left:50px;}
            
div#link4 {font-size:60px;
        top:275px;
        left:250px;}

div#content a span {display: none;}

div#content a {text-decoration: none;
         color:#767f9a;}

div#content a:hover span {display: block;
            position:relative;
            background:none;
            font-size:14px}
            
div#urltext, div#content a:link
            {color:#767f9a;}

div#content a:visited, div#content a:hover, div#content a:hover span
                {color:#a4abc1}

<html>
<head>
<link href="style1.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
  <div id="content">
    <div class="bgtext">Page Title</div>        
<div id="link1"><a href="#">Link 1<span>– Extra text</span></a></div>

<div id="link2"><a href="#">Link 2<span>– More extra text</span></a></div>

<div id="link3"><a href="#">Link 3<span>– Extra text again</span></a></div>

<div id="link4"><a href="#">Link 4<span>– Last time, more text</span></a></div>            
            
    </div>
  </div>
</div>
</body>
</html>