Problema imagenes javascript

[atapuerkasman]

Saludos!!! Estoy atascado en una parte de mi aplicación web y quería saber si alguien puede hecharme una mano.

Tengo una pantalla principal en la que se dibuja un mapa, y me gustaría añadirle( superponerle) otras imagenes a ese mapa. Por ejemplo: tener un plano de un edificio y poder superponerle un icono de una puerta, para mostrar donde está una de las salidas.


He encontrado una manera de superponer las imagenes pero es mediante css y no me vale, ya que me interesaria poder interactuar con los iconos. Por ejemplo: que cuando pinches en el icono de la puerta te diga si está abierta o cerrada



Alguién tiene alguna idea de como podría hacerlo???? Llevo varios dias buscando y no encuentro nada

[ceSharp]

buenas,

a tus imágenes que vas a superponer les puedes añadir un position:absolute, y ya con eso y jugando con top y left puedes colocar el icono donde quieras.
y aparte, con z-index puedes poner cada imagen una delante de otra, como trabajando con capas que se muestran unas encima de otras, en función de cómo lo quieras:

Código HTML:

<img src="Imgs/1.gif" style="position:absolute;top:100px;left:20px;z-index:5" />
 

saludos.

[atapuerkasman]

Muchas gracias!!! era lo que buscaba, pero me falta algo más. Haciendolo de esa manera podría interactuar con las imagenes( me refiero a utilizar métodos como onclick y demás???). O tendría que meterlas en algun tipo de contenedor????

[atapuerkasman]

Saludos!!! ya he conseguido que funcione casi todo. Me explico: cargo el plano principal y gracias a un servlet dibujo todos los iconos que hay en ese plano(uso el servlet ya que los tengo en la base de datos y tengo que hacer los accesos). Solo tengo un pequeño problema a la hora de dibujarmelos en el mapa. Lo que hago para dibujarlos es calcular la posicion en la que se clicka con el ratón y le resto la posicion del plano. lo que intento conseguir es que las coordenadas se guarden en función de la posición del plano.

Pues funciona perfectamente con el ancho pero con el alto la funcion me devuelve valores erroneos. Os pongo el código para que le hecheis un ojo.


coordenadax= e.clientX - document.getElementById("img_plano").offsetLeft;

coordenaday=e.clientY - document.getElementById("img_plano").offsetTop;


Si pulso en el borde izquierdo del mapa coordenadax es aproximadamente =0
Pero si pulso en el borde superior, coordenaday es =260

He estado comprobando el valor de las variables y esto me viene de las siguientes llamadas:


document.getElementById("img_plano").offsetLeft; (es 300)
document.getElementById("img_plano").offsetTop; (es 40)

No entiendo porque el metodo offsetTop devuelve 40, cuando deberia devolver 200.
Luego las cuentas finales quedan:

coordenadax= clickderatonx (314) - posicionimagenx(300) 14px perfecto
coordenaday= clickderatony (355) - posicionimageny(41) 314 px fatal!!!!

si hace falta código o algo decirmelo, ya que no tengo ni idea de donde me puede venir el error.

P.D: el navegador es IE7

[atapuerkasman]

Saludos de nuevo, os comento. Con el IE7 me da el fallo que os he comentado antes. Con Netscape funciona bien pero tengo un problemilla que todavia no me aclaro al dibujar los iconos.

Yo pincho en el plano y almaceno en mi base de datos las coordenadas, TOMANDO COMO BASE LA IMAGEN[esquina superior izquierda]).

Tengo un servlet que me redibuja el plano y todos los iconos que contenga el plano. El problema que tengo es que las coordenadas guardadas en la base de datos son Respecto a la Imagen(esquina superior-izq) y si las dibujo directamente me pone el icono en las coordenadas DE LA PÁGINA.

no se si se me entiende, esta es la función que dibuja los iconos guardados para cada plano.

Código:

for (TO_Node to_Node : arraynodos) 
	out.println("<img id='"+to_Node.getIdNode()+"' src='./images/box.png' style='position:absolute;top:"+to_Node.getCoordY()+"px;left:"+to_Node.getCoordX()+
	"px;z-index:5' onmousedown='detectar_nodo(event)'> ");
				
				}

Traducido por si acaso :P:

Código:

for( cada icono del plano)
       dibujar <img id="idnodo" src="ruta/imagen.jpeg" style="position:absolute;top:'"+coordX+"';left:'"+coordY+"'">