Código PHP:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<style type="text/css">
<!--
#todo {
border: 1px solid #EAEAEA; /* Borde de la galería */
padding: 10px;
background: white; /* Fondo de la galería */
width: 410px; /* Ancho de la galería */
height: 300px; /* Alto de la galería */
}
#heroe1 {
border-radius: 3px;
border: 1px solid #F2F2F2; /* Borde de la imagen */
padding: 3px;
width: 120px; /* Ancho de la imagen */
height: 120px; /* Alto de la imagen */
display:block;
}
#heroe2 {
border-radius: 3px;
border: 1px solid #F2F2F2; /* Borde de la imagen */
padding: 3px;
width: 120px; /* Ancho de la imagen */
height: 120px; /* Alto de la imagen */
display:none;
}
.miniatura {
width: 60px; /* Ancho de las miniaturas */
height: 60px; /* Alto de las miniaturas */
float: left;
cursor: pointer;
padding: 5px;
}
-->
</style>
<script type="text/javascript">
var ListHeroes={};
ListHeroes[0]={id:'heroe1'};
ListHeroes[1]={id:'heroe2'};
ListHeroes[2]={id:'heroe3'};
function showHeroes(id){
for(var a in ListHeroes){
var o = ListHeroes[a];
if(id==a){
document.getElementById(o.id).style.display='block';
}else{
document.getElementById(o.id).style.display='none';
}
}
}
</script>
</head>
<body>
<div id="todo">
<div>
<div id="heroe1">Contenido primer heroe</div>
<div id="heroe2">Contenido segundo heroe</div>
<div id="heroe3">Contenido tecer heroe</div>
<div>
<img class="miniatura" onclick="javascript:showHeroes(0)" src="URL-IMAGEN-1" />
<img class="miniatura" onclick="javascript:showHeroes(1)" src="URL-IMAGEN-2" />
<img class="miniatura" onclick="javascript:showHeroes(2)" src="URL-IMAGEN-3" />
</div>
</div>
</div>
</body>
</html>
a ver si te sirve XDXD