¡Hola Mayid!
Gracias por tu rápida respuesta
.
Estoy probando lo que has puesto, pero no me funciona: aparece el
.loader pero no cambia la imagen en el escenario.
El
.loader es un div posicionado de forma absoluta y oculto (display:block) que aparece mientras se carga la imagen. Ahora veo que no lo he incluido en el html que he puesto antes:
Código:
<div class="espacios" id="edificios">
<div class="escenario">
<img src="edificios1_grande" />
<img src="edificios2_grande" />
</div>
<a href="#" title="edificios1"><img src="#" title="edificios1" /></a>
<a href="#" title="edificios2"><img src="#" title="edificios2" /></a>
<div class="loader"></div>
</div>
<div class="espacios" id="monumentos">
<div class="escenario">
<img src="monumentos1_grande" />
<img src="monumentos2_grande" />
<div class="loader"></div>
</div>
<a href="#" title="monumentos1"><img src="#" title="monumentos1" /></a>
<a href="#" title="monumentos2"><img src="#" title="monumentos2" /></a>
</div>
Idealmente el .loader debería aparecer sólo en el
.escenario activo, pero no me importa que aparezca en todos porque les he dado una altura (a los div .espacios) suficiente para que sólo vea uno de ellos cada vez.
En cualquier caso voy a analizar lo que me has dicho detenidamente, porque no me resulta sencillo esto de la programación (de diseño y maquetación, lo que quieras, pero esto... me cuesta).
Un saludo.