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> Esto es lo que casi yo solito he podido hacer, y funciona bien. Si os fijais hay 2 botones que son imagenes y se intercambian 2 divs segun en que imagen clickees.
Vale, ahora mi problema, yo quisiera poner no 2, sino unos cuantos mas, asi que esto ya no me es util, alguna idea?!?
Gracias de antemano!