Vale mira he hecho algun progreso, mi intencion ya esta resuelta, pero el metodo es muy chapuzero, observa:
Código HTML:
<!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>
</head>
<body>
<div id="todo">
<div>
<div id="heroe1">Contenido primer heroe</div>
<div id="heroe2">Contenido segundo heroe</div>
<div>
<img class="miniatura" onclick="javascript:document.getElementById('heroe1').style.display='block';javascript:document.getElementById('heroe2').style.display='none';
" src="URL-IMAGEN-1" />
<img class="miniatura" onclick="javascript:document.getElementById('heroe2').style.display='block';javascript:document.getElementById('heroe1').style.display='none';" src="URL-IMAGEN-2" />
</div>
</div>
</body>
</html> Ahora esta como lo queria, el problema es si quiero añadir mas "miniaturas", tal y como lo he hecho esto es exponencial, seguro que hay una forma mas senzilla, pero no llego a mas, xd!