Mapa HTML manejado por javascript

[Koden]

Saludos.

Vereis, estoy tratando de implementar un mapa HTML de tal modo que al pinchar sobre un area se invoque a una función en JavaScript que dibuje una capa (div) translúcido sobre el área de la imagen, y de su mismo tamaño.

El problema que se me viene a la mente (y sobre el que no he encontrado información) es... ¿Cómo transformo las coordenadas del área en píxels para la capa?

Muchísimas gracias de antemano a todos por la información y un saludo.

[Koden]

Indicar además (lo olvidé en el primer mensaje) que todas las áreas a resaltar son rectangulares, para poder crear su capa asociada.

[Koden]

Al final he hecho una función AJAX que al pinchar una zona, graba en base de datos las coordenadas y calcula en función de ellas el tamaño de la capa y su distancia al top y left de la página, pero...

¿Cómo podría hacer para que al cargar nuevamente el script me ejecutase un nuevo evento onLoad para cargar la capa sobre el mapa?

Muchas gracias de antemano por cualquier tipo de ayuda y un saludo.

[caricatos]

Hola:

Tal como dices, si grabas esas coordenadas en una base de datos, también podrías leer la base de datos, y generar ese "onload" según las coordenadas que ya tengas grabadas.

Te paso un link donde desde imágenes con colores planos, se pueden obtener otras figuras: Capturar áreas en imágenes

Saludos

[Koden]

El problema es que la web está en AJAX.

En una de las secciones que carga mediante AJAX tengo una parte con el citado mapa.

Al pinchar sobre este actualizo el mapa y no la sección que lo contiene (ni mucho menos la aplicación, dado que el usuario puede navegar libremente por las pestañas y ni siquiera tiene por qué entrar a la sección del mapa) y de ahí los problemas que estoy teniendo al cargar la capa con javascript sobre la imagen, dado que no puedo usar (o al menos eso creo) el evento onload de una manera normal.

Por cierto, comentaros a los moderadores, que si creéis que el foro correcto para este mensaje es el de AJAX no tengáis ningún reparo en moverlo, yo lo puse en este porque entendí que el problema en concreto lo tenía en javascript, al intentar añadir ese nuevo evento onload en un pequeño script cargado por AJAX.

Caricatos, he estado viento tu script, pero no es exactamente lo que buscaba, dado que las áreas de la imagen que debo usar ya las tengo predefinidas, y solo tendría que pintar con javascript una capa sobre unas coordenadas ya preestablecidas, aunque de todos modos, muchas gracias por tu ayuda.

Un saludo.

[caricatos]

Hola:

La verdad es que no acabo de entender, ¿el onload lo quieres aplicar a una pestaña?... Las peticiones Ajax, también podrían consultar los cambios en esa base de datos... con un count(*) (tal vez con condiciones where adicionales) a la base de datos, en el primer onload, y en las peticiones Ajax posteriores, se verifican las diferencias con ese primer valor.

Además, si envías las coordenadas, también puedes recibir como respuesta las características de esa capa que vas a superponer (en el post que referencié antes se hace eso)

Intenta explicar más detalladamente el problema... Tal vez sea de Ajax, pero supongo que sobre todo parece que es cuestión de conceptos.

Saludos

[Koden]

Hm...

He debido explicarme mal, te comento la situación.

Tengo un formulario que tiene que procesar muchos datos.


Los datos están estructurados en una cabecera (fija para toda la página y que se actualiza por AJAX) y otros datos agrupados por secciones (la visualización de estas secciones se hace en la misma zona de la página y las secciones se van cargando mediante AJAX navegando por las pestañas, que harían de menú)

El caso es en que en una de estas secciones (la octava en concreto) muestro una imagen mapeada. Esa imagen debería actualizarse con un click sin moverse de la sección: es decir, que navegando en esa sección debería hacer click sobre la imagen y esta devolverme la misma imagen con una capa pintada sobre el área del mapa donde he hecho click.

Al hacer el click invoco a una función en AJAX que guarda las coordenadas del área del mapa, y me regresa la imagen (contenida en una capa que es la que actualizo mediante AJAX) ya procesada, pues en la primera llamada a la sección me carga la imagen mapeada y en la segunda me cargaría otro script que solo contendría la imagen anterior y el script en Javascript que me dibujaría la capa sobre la imagen, y ahí es donde estaría mi problema.

No se si me he explicado bien, si quieres puedo ponerte el código de las llamadas que empleo.

Saludos y muchas gracias por tu ayuda, caricatos.

[caricatos]

Hola:

Si cuando actualizas datos, podificas esa imagen, tan solo añadiendo un parámetro fantasma a su url, bastaría para que el navegador no ponga la imagen de la caché...

la_imagen.src = "imagen.gif?fantasma=" + Math.random();

Lo demás que necesitases podrías obtenerlo con la petición Ajax.

Saludos

[Koden]

Gracias por tu ayuda, caricatos, he conseguido gracias a tus consejos hacer que pinte cuadrados rojos al pinchar sobre la imagen...

El problema que me surje ahora es que no he calculado correctamente las coordenadas de las capas... Porque lejos de pintármelos sobre la imagen, me los pinta sobre zonas del documento, pero eso es otra historia.

Muchas gracias por tu ayuda!

[caricatos]

Hola:

Creo que ya el problema es de estilos... también está resuelto en la página que te referencié antes... una capa con las mismas medidas de la imagen y posicionamiento relativo, y tanto esa imagen principal como los recuadros que pongas (superpongas), con posicionamiento absoluto y los estilos left y top a 0 + las coordenadas que has calculado.

Saludos

[Koden]

Muchísimas gracias por tu ayuda, caricatos.

Al final lo he conseguido.

[Koden]

Disculpas por anticipado a los moderadores por reflotar el tema (no se si lo adecuado habría sido haber abierto uno nuevo)

Veréis, al final por diversos cambios en el script que andaba haciendo, he optado por declarar el mapa desde DOM.

El problema es que estoy intentando poner un onclick en las areas del mapa, y no para de darme errores.

Cada uno de las áreas las defino así:

Código PHP:

  a1 = m1.appendChild(document.createElement("area"));
a1.setAttribute("shape","rect");
a1.setAttribute("coords","25,3,70,10");
a1.style.cursor="pointer";
if(a1.addEventListener) {
    a1.addEventListener('click', createLesionLayers(img1, a1.coords, div1), false);
} else if (a1.attachEvent ) {
    a1.attachEvent('onclick', createLesionLayers(img1, a1.coords, div1));
} else {
    a1.onclick = function () {createLesionLayers(img1, a1.coords, div1)};
}  
   

Pero en firefox me dice esto:

Error: uncaught exception: [Exception... "Could not convert JavaScript argument" nsresult: "0x80570009 (NS_ERROR_XPC_BAD_CONVERT_JS)" location: "JS frame :: (archivo) :: createMaps :: line 1395" data: no]

Y en explorer simplemente "Tipo Incorrecto"

¿Sabeis si hay algo que esté pasando por alto?


Gracias de antemano a todos por vuestra ayuda y un saludo a todos.