Como superponer imagenes con HTML?

ESTERUKI94 · #1 (**permalink**) 15/11/2014, 11:18

Hola, llevo una semana dandole vuelvas al codigo y no hay manera de que consiga nada.
Os comento, tengo que hacer unos banners para unos ejercicios de clase, los banners hay que publicarlos en una plataforma que utiliza HTML, mi grupo a creado unos banners que cambian la imagen cuando pasas el ratón sobre ellos, pero se supone que el banner tiene 3 secciones y cada una de ellas nos reconduce a un nuevo enlace, el problema está a la hora de pasar el ratón por encima y que cambie el banner.

Esta es la imagen 1:

Esta es la imagen que aparece cuando pasamos el ratón por encima de la imagen:
(como veis tiene tres secciones tipo menu)

Bien, creo que la manera se conseguirlo es superponner unos cuadrados transparentes encimas y que sean estos los que reconduzcan, pero cuando lo intento al pasar el ratón por encima la imagen ya no cambia

Este es el codigo que he estado probando:

Código HTML:

<html>
<head>
</head>
<body>
<DIV STYLE="position:absolute; top:120px; left:50px; width:200px; height:200px; 
visibility:visible z-index:1"> 
<style type="text/css">
a#m {display: block; 
width: 780px; 
height: 120px;
background: #e6e6e6 url(http://citywiki.ugr.es/w/images/thumb/e/e9/01musica.jpg/800px-01musica.jpg) no-repeat;} 
a#m:hover {background: #e6e6e6 url(http://citywiki.ugr.es/w/images/3/38/B_01_musica.jpg) no-repeat;}
</style>
</head>
<body> 
<div id="m"> 
<a id="m"></a> 
</DIV> 
<DIV STYLE="position:absolute; top:30px; left:300px; width:160px; height:120px; 
visibility:visible z-index:2"> 
<a href="http://citywiki.ugr.es/wiki/Proyectos_3_grupo_E/trabajos_14-15/procesos_creativos/enunciado_m%C3%BAsica"> <img src =" Sin_título-3.gif "></a> 
</DIV>
<DIV STYLE="position:absolute; top:30px; left:460px; width:160px; height:120px; 
visibility:visible z-index:2"> 
<a href="http://citywiki.ugr.es/wiki/Proyectos_3_grupo_E/trabajos_14-15/procesos_creativos/elecciones_m%C3%BAsica"> <img src =" Sin_título-3.gif "></a> </DIV>
<DIV STYLE="position:absolute; top:30px; left:620px; width:160px; height:120px; 
visibility:visible z-index:2"> 
<a href="http://citywiki.ugr.es/wiki/Proyectos_3_grupo_E/trabajos_14-15/procesos_creativos/autoevaluaci%C3%B3n_m%C3%BAsica"> <img src =" Sin_título-3.gif "></a> </DIV>
</body>
</html>

Otra opcción que he barajado es de poner la fotografía en trozos y hacer que cada trozo cambie por separado (que eso sí se hacerlo) y de alguna manera enlazar las imagenes para que todas cambien cuando el ratón pase sobre cualquiera de ellas.

Espero haberme explicado, es que esto del HTML es totamente nuevo y tenimo de saber como cogerlo.

Este es el trabajo:
[URL="http://citywiki.ugr.es/wiki/Proyectos_3_grupo_E/trabajos_14-15/procesos_creativos/dise%C3%B1os_dise%C3%B1o_grafico/Grupo4"]http://citywiki.ugr.es/wiki/Proyectos_3_grupo_E/trabajos_14-15/procesos_creativos/dise%C3%B1os_dise%C3%B1o_grafico/Grupo4[/URL]

Ito79 · #2 (**permalink**) 17/11/2014, 09:15

Podrías por ejemplo tener un div con un estilo aplicado que tenga una imagen de fondo (contenedorPrincipal). Dentro de ese DIV meterías los enlaces que deseas (por ejemplo en una lista UL). Y por último dentro del contenedor principal, definirías un estilo "hover" para que cuando pases por encima el ratón, cambie la imagen de fondo.

Algo así, escrito rápido:

HTML

Código HTML:

 <div class="contenedorPrincipal">
		<a href="e1.html">Enlace1</a>
		<a href="e2.html">Enlace2</a>
		<a href="e3.html">Enlace3</a>
		<a href="e4.html">Enlace4</a>
	</div>

CSS:

Código HTML:

.contenedorPrincipal {
	background-image: url(Imagen1.jpg);
}

.contenedorPrincipal:hover {
	background-image: url(Imagen2.jpg);
}

Tendrás que diseñar el contenido del contenedorPrincipal como más te interese

Un saludo