Buenos días,
No sé programar en JavaScript, pero siempre me ha interesado este mundo. Sobretodo cuando las cosas me van saliendo...
Hace un mes decidí hacer una web y, mediante las plantillas asignadas he ido avanzando. También he buscado scripts extra y, modificándolos, he conseguido efectos que quería.
Pero lo que necesito ahora es algo para mi muy complicado, pero seguro que para vosotros muy fácil. He visto algunos posts abiertos con cosas muy similares, pero como soy muy inexperta, necesito que me lo den mascado!! Porque no me aclaro...
Voy al grano: tengo una imagen de fondo con un mapa de imágenes. Quisiera que, cada vez que el ratón pase por encima de una las zonas del mapa determinadas, la imagen cambie por otra. Sé que esto es un rollover o un mouseover mouseout, pero no sé cómo lo tengo que añadir.
Pongo aquí el mapa, tal y como lo tengo ahora mismo. Qué tengo que hacer para conseguir ese efecto??
<div style="position:relative; height:2500px; width:3000px; background:url(http://files.123inventatuweb.com/acens8631/image/doc050515-001.jpg) 0 0 no-repeat;">
<a style="position:absolute; top:427px; left:238px; width:332px; height:251px;" title="Sobrecampana" alt="" href="sobrecampanas" target="_self">
</a>
<a style="position:absolute; top:678px; left:394px; width:380px; height:725px;" title="Columna" alt="" href="columnas" target="_self">
</a>
<a style="position:absolute; top:342px; left:571px; width:203px; height:335px;" title="Columna" alt="" href="columnas" target="_self">
</a>
<a style="position:absolute; top:299px; left:767px; width:229px; height:401px;" title="" alt="" href="altos" target="_self">
</a>
<a style="position:absolute; top:258px; left:987px; width:209px; height:333px;" title="" alt="" href="ace" target="_self">
</a>
<a style="position:absolute; top:178px; left:1193px; width:195px; height:441px;" title="" alt="" href="arl" target="_self">
</a>
<a style="position:absolute; top:263px; left:1392px; width:270px; height:374px;" title="" alt="" href="plateros" target="_self">
</a>
<a style="position:absolute; top:328px; left:1674px; width:203px; height:368px;" title="" alt="" href="atp" target="_self">
</a>
<a style="position:absolute; top:1009px; left:773px; width:196px; height:347px;" title="" alt="" href="horno" target="_self">
</a>
<a style="position:absolute; top:965px; left:971px; width:196px; height:350px;" title="" alt="" href="bajos" target="_self">
</a>
<a style="position:absolute; top:851px; left:1173px; width:228px; height:422px;" title="" alt="" href="brl" target="_self">
</a>
<a style="position:absolute; top:964px; left:1409px; width:271px; height:378px;" title="" alt="" href="fregaderos" target="_self">
</a>
<a style="position:absolute; top:1031px; left:1688px; width:273px; height:317px;" title="" alt="" href="btp" target="_self">
</a>
Mil gracias por adelantado!