Recuadro al pasar el ratón por encima

[Karla_vs]

Hola buenos días a tod@as.

Estoy haciendo una aplicación para controlar los desperfectos de un coche.
Mi idea es que salga un plano del coche a la izquierda y a la derecha, la lista de desperfectos.

Para que quede mejor, he decidido intentar hacer que cuando pases el ratón por encima de la descripción del desperfecto (en la lista de la derecha), aparezca un recuadro en el dibujo del coche indicando donde se encuentra dicho desperfecto.

Hasta ahí todo bien pero me surge una duda.
Las posiciones del recuadro van a variar, el usuario puede quitar y poner nuevas.
¿Como puedo guardar yo en una base de datos la posición del recuadro?
Sobretodo cuando el usuario marque un nuevo desperfecto que cuando vuelva a entrar vea donde lo puso.

¿Alguien me puede orientar un poquito?

Muchas gracias!!!

[kamasaki]

Es un poco complicado, por lo que dices es lo más parecido a los recuadros que se utilizan para recortar imágenes.

Yo haría lo siguiente, pondría un div id=recuadro sobre el div del coche y al darle al botón correspondiente, leería la posición x, y, anchura y altura del style de este div recuadro y lo pasaría mediante ajax a php donde guardaría este último en la tabla sql esos valores.

[Annoying]

Pues imaginando que todos los recuadros de descripción irán dentro de una capa en común, podrías guardar la posición top y left del recuadro, y a la hora de guardar en bdd, borrarías todos los recuadros anteriores y guardarías los nuevos.

Para obtener los recuadros bastaría con hacer en javascript

Código Javascript:

var capaMadre = document.getElementById("capacontenedoraderecuadros");
if(capaMadre.hasChildNodes){
 

y recorrer los nodos hijos de capaMadre, por ejemplo con

Código Javascript:

var objId = document.getElementById(capaMadre.childNodes[n].id);
 

y a partir de ahí, obtienes las propiedades que desees guardar

Código Javascript:

objId.style.top