Salve, ho scaricato un menù a tendina dal sito di html.it e vorrei sapere come riuscire a visualizzare una galleria immagini richiamandola con uno dei pulsanti del menu' e visualizzandola nella stessa pagina. cioè io ho un menu' cosi, vorrei poter cliccare per esempio su "atene" ed atene mi richiama tutte le foto che metto in una determinata directory mostrandomi le foto nella stessa pagina dove c'è il menu:

<html>
<head>
<title>menu</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="it" />
<meta name="Robots" content="All" />
<meta name="Owner" content="no" />
<meta name="Author" content="no" />
<meta name="Copyright" content="no" />
<script type="text/javascript" src="../4253/ClickShowHideMenu.js"></script>
<style type="text/css">
body {
background-color: #271D11;
}
.click-menu {
}
.click-menu .box1 {
background: url('../4253/images/button1.gif') no-repeat;
color: #f9f9f9
}
.click-menu .box1-hover {
background: url('../4253/images/button1.gif') no-repeat;
color: #FFEBA9
}
.click-menu .box1-open {
background: url('../4253/images/button1-click.gif') no-repeat;
color: #f9f9f9
}
.click-menu .box1-open-hover {
background: url('../4253/images/button1-click.gif') no-repeat;
color: #FFEBA9
}
.click-menu .box1,
.click-menu .box1-hover,
.click-menu .box1-open,
.click-menu .box1-open-hover {
text-indent: 12px;
font-weight: bold;
font-size: 14px;
line-height: 31px;
font-family: arial;
cursor: pointer;
width: 150px;
}
.click-menu .section {
background-color: #46351F;
font-family: arial;
font-size: 13px;
line-height: 15px;
padding: 0 0 5px 10px;
display: none;
}
.click-menu .section a {
color: #ffffff;
text-decoration: none;
white-space: nowrap;
}
.click-menu .section a:hover {
color: #FFFF99;
text-decoration: none;
white-space: nowrap;
}
.click-menu .box2 {
border-color: #7B6139;
border-width: 1px;
border-style: none none solid solid;
padding: 1px 0 2px 6px;
}
.click-menu .box2-hover {
border-color: #7B6139;
border-width: 1px;
border-style: none none solid solid;
padding: 1px 0 2px 6px;
background: #5B4529;
}
</style>
</head>
<body>

<script type="text/javascript">
/* preload images, you can remove this code */
var img = new Array();
img[0] = new Image();
img[0].src = "images/button1.gif";
img[1] = new Image();
img[1].src = "images/button1-click.gif";
</script>

<table width="895" height="380"><tr>
<td style="height: 376px; background-color: #46351F; vertical-align: top; padding: 10px" width="168">

<table cellspacing="0" cellpadding="0" id="click-menu2" class="click-menu">
<tr>
<td>
<div class="box1">Mondo Greco</div>
<div class="section">
<div class="box2">Atene</div>
<div class="box2">Sparta</div>
<div class="box2">Cipro</div>
<div class="box2">Cnosso</div>
<div class="box2">Creta</div>
</div>
</td>
</tr>
</table>

</td>
<td style="height: 376px; background-color: #46351F; vertical-align: top; padding: 10px">

</td></tr></table>

<script type="text/javascript">
var clickMenu2 = new ClickShowHideMenu('click-menu2');
clickMenu2.init();
</script>







</body>
</html>