Mapa de imagen con rollover

[Mappanare]

Buenos días,

No sé programar en java, 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!

[Xerelo]

Eso no es java, y es muy fácil encontrar información sobre ello

https://www.google.es/webhp?sourceid...llover%20image

http://helplogger.blogspot.com.es/20...ct-change.html

[Mappanare]

Pues ya ves si tengo poca idea, que pensaba que era Java!! Entonces qué lenguaje es??

Tengo mil links donde pone cómo hacer un cambio de imagen en una única imagen, pero no sé cómo debo hacerlo para que funcione en el mapa...

He intentado añadir este código:

<a href="URL ADDRESS"><img src="URL OF THE FIRST IMAGE GOES HERE" onmouseover="this.src='URL OF THE SECOND IMAGE GOES HERE'" onmouseout="this.src='URL OF THE FIRST IMAGE GOES HERE'" /></a>

que es el que pone en el link que me has proporcionado, Xerelo, pero claro, lo he hecho así:

<a style="position:absolute; top:678px; left:394px; width:380px; height:725px;" title="Columna" alt="" href="columnas" target="_self"href="URL ADDRESS"><img src="URL OF THE FIRST IMAGE GOES HERE" onmouseover="this.src='URL OF THE SECOND IMAGE GOES HERE'" onmouseout="this.src='URL OF THE FIRST IMAGE GOES HERE'" />
</a>

Y no funciona... Supongo que me dejo muchas cosas por el camino, tan fácil no debe de ser...

Alguien más podría ayudarme, please??

Gracias!!

[Profesor_Falken]

Buenas,

El lenguaje es Javascript. Existe un foro en forosdelweb especifico para ese lenguaje y quizas ahi te puedan ayudar mejor.
http://www.forosdelweb.com/f13/

El ejemplo que has cogido deberia funcionar. Eso si, donde pone URL OF THE FIRST IMAGE GOES HERE y URL OF THE SECOND IMAGE GOES HERE tienes que poner las URLs de las imagenes, claro esta.

Un saludo

[Mappanare]

Copio lo que he puesto, a ver qué he hecho mal...

<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"
<img src="
http://files.123inventatuweb.com/acens8631/image/doc050515-001.jpg
" onmouseover="this.src='
http://files.123inventatuweb.com/acens8631/image/catalogoicon.jpg
'" onmouseout="this.src='
http://files.123inventatuweb.com/acens8631/image/doc050515-001.jpg
'" />
>
</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>

Sólo lo he hecho con una referencia del mapa y con una imagen que no tiene nada que ver, pero era para probar...

Gracias de todas formas!!