Problema urgente con zonas interactivas

[swit]

Hola,

Necesito hacer el efecto que se muestra en el mapa de esta web:

3w.hafele.com/index_es.asp?area=1 (no me deja postear webs)

pero, x lo q veo, està hecho en .asp y yo tengo q trabajar en html. No sé si es posible hacer algo así en html, llevo toda la tarde dándole vueltas, y no hay manera.

Básicamente quiero un mapa, al cual le asigno unas zonas interactivas poligonales. Al ponerme encima de cada zona interactiva, quiero q la imagen cambie mostrándose otra imagen con la zona en otro color. Como una imagen de sustitución però pudiendo dar forma al botón. Y pudiendo poner tantos botones como quiera.

Luego, al hacer click sobre cada botón deberá ir a un punto de la misma página a través d una ancla.

Ya sé q sería mucho más fácil hacer esto en flash, pero el cliente lo quiere en html para modificarlo luego él... pq dice q sabe manejar dreamweaver.......

Aver si m pueden echar una mano!!

Muchas gracias de antemano!!

[bookmaster]

Si le echas un ojo al código de ese "efecto" puedes ver que está echo con mapas de imágenes, y jugando con los eventos del ratón onmouseover, onmouseout, etc... que son los que se encargan de cambiar la imagen o mandar a la página que indica.

Extracto del código:

Código html:

<area onmouseover="hiLite('map0', map2.src)" onmouseout="hiLite('map0', map1.src)" alt="America" href="/index_es.asp?area=1" shape="poly" coords="109,210,102,206,106,166,98,148,99,137,85,129,70,123,62,99,55,85,48,74,41,75,35,82,28,82,22,70,32,60,45,59,57,61,62,56,62,49,84,41,111,37,121,38,138,35,154,40,152,49,150,57,141,65,129,75,122,88,109,102,100,110,103,120,108,131,122,140,137,152,134,165,127,171,123,180,117,186" />
 

Te dejo un enlace en la que puedes ver información sobre ello:
Sobre las coordenadas: http://www.desarrolloweb.com/articulos/753.php
Sobre las acciones: http://www.htmlpoint.com/javascript/corso/js_11.htm

[swit]

Gracias por responder.

Si, estoy al tanto de lo q m comentas del código, de echo estuve intentando modificarlo. Así como el código de la función para vincular las imágenes correctas.. Pero no funciona.

No se si será porque esa web está hecha en asp, como ya comenté. Pq cuando intento copiar la web a mi ordenador para verla con detenimiento, si la publico ya no funciona el efecto, aun copiando las imagenes necesarias y demas..

[caricatos]

Hola:

Aquí puedes ver algo: Creación de áreas en imágenes...no solo puedes copiar la página, sino que la misma genera los áreas y los tags...

Saludos

[swit]

ya intente tu web caricatos.. pero no me sirve, porque necesito que el area resaltada sea mas perfecta.. no tan poligonal, entonces lo que necesito, es q el mapa de imagen actue como un boton, el cual al posicionarme encima, cambie la imagen en su totalidad, pero al salir de ese boton, vuelva a cambiar toda la imagen como la inicial..

he usado esta funcion:

Código:

<script type="text/javascript">
function mostrar(cosa, estado) {
// document.images[cosa].style.visibility = (estado) ? 'visible':'hidden';
 document.getElementById(cosa).style.visibility = (estado) ? 'visible':'hidden';
}
var mapa = 'mapa';
var mapa1 = 'mapa1';
var mapa2 = 'mapa2';
</script>

y luego más adelante tengo el resto:

Código:

<div id="contenedor_de_imagenes">
<img src="images/distribucion.jpg" name="mapa" border="0" id="mapa" usemap="#mapa" style="visibility:visible; position:absolute" />
<a href="#barcelona"><img src="images/distribucion1.jpg" name="mapa1" border="0" id="mapa1" usemap="#mapa1" style="visibility: hidden; position:absolute"></a>
<a href="#malaga"><img src="images/distribucion2.jpg" name="mapa2" border="0" id="mapa2" usemap="#mapa2" style="visibility: hidden; position:absolute"></a>
</div>

<map id="mapa" name="mapa">
<area onmouseover='mostrar("mapa1", true)' onmouseout='mostrar("mapa1", false)'shape="poly" coords="568,141,545,150,535,164,517,168,508,157,506,136,513,139,519,125,518,109,533,103,531,112,542,117,547,113,553,125,548,132,556,139,567,141" href="#barcelona" alt="Barcelona" />
<area onmouseover='mostrar("mapa2", true)' onmouseout='mostrar("mapa2", false)' shape="poly" coords="202,449,188,441,208,415,237,399,247,415,272,427,238,427,233,440,215,439," href="#malaga" alt="Málaga" />
<area onmouseover='mostrar("mapa", true)' onmouseout='mostrar("mapa", true)' shape="rect" coords="4,5,644,477" href="#" />
</map>

De esta manera funciona, pero me parpadea la imagen cuando estoy encima de cualquier mapa de imagen.. Los links deben ir a anclas.

Haber si con el código podeis ayudarme mejor, ¡muchas gracias!

[swit]

nada? nadie?