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]