Dubujar recuadros sobre una imagen

[Noide]

Hola!!

Actualemente tengo esto:
bibliopg.netai.net

El problema es que como habreis visto, dibuja recuadros por todo el navegador y mi intención seria limitar la formacion de recuadros solo sobre la image, es decir, que solo se pueda dibujar sobre la imagen sin afectar al funcionamiento del script.

Gracias de antemano!

[maycolalvarez]

no dibuja, simplemente crea div con position:absolute; y debido a ello escapan de cualquier contenedor especificado, tendrías que limitar área manualmente, calculando las coordenadas del contenedor que en este caso sería la imagen, nada sencillo

una alternativa de dibujo real con javascript sería el objeto canvas, pero por ahora es soportado por pocos navegadores, la última alternativa es flash o un shockwave similar

[David]

Se puede hacer con algunas pequeñas modificaciones.

En lugar de agregar un listener a los eventos del mouse al document, tienes que agregar el listener al div que contiene la imagen. En lugar de usar un <img /> usar CSS (background-image) para mostrar la imagen y después cambiar el script para que los cuadros sean añadidos no al tag BODY sino al div que contiene la imagen.

[Noide]

Podriais ponerme un ejemplo de la modificacion sobre mi codigo porfavor? De javascript tengo conocimientos escasos.

La opcion de calcular las areas del contenedor me parece interesante. Si me das una pauta en javascript ya me las arreglo con los calculos en PHP. La imagen esta en una DB y obtener los tamaños no seria problema.

Muchisimas gracias maycolalvarez y David!!

[Noide]

Arriba y que sepais que una, este problemita todavia no me deja dormir tranquilo. Es lo unico que me queda para acabar la aplicación T_T.

Se convertira en mi idolo/dios aquel que me lo resuelva a estas alturas xD.

Ya cambie en el original el tema de la imagen, ahora es background pero continua creando Div's por todas partes =(

[David]

Hola, Noide.

Muestra cómo has intentado aplicar lo que te comenté y en qué paso no logras avanzar. Así podremos ayudarte.

[Noide]

Aqui cuelgo la modificación: bibliopg.netai.net

Como vereis, al hacer div's por todo el navegador, no puedo apretar el submit porque dibuja sobre el y en el caso de que se llegue a apretar, como la idea del programa es guardar en la base de datos las coordenadas del último recuadro, no me guardaría las marcadas de la imagen, si no las obtenidas de apretar el submit.

También he probado funciones Jquery tales como on mouse over image -> hacer div etc, pero no ha funcionado, seguramente porque algo hago mal.

Gracias por tu atención David!!

[David]

Es que sólo hiciste una de las modificaciones sugeridas:

Se puede hacer con algunas pequeñas modificaciones.

En lugar de agregar un listener a los eventos del mouse al document, tienes que agregar el listener al div que contiene la imagen. En lugar de usar un <img /> usar CSS (background-image) para mostrar la imagen y después cambiar el script para que los cuadros sean añadidos no al tag BODY sino al div que contiene la imagen.

Con el primer punto me refiero a estas líneas:

Código:

zxcAddEvt(document,'zxcDrag','mousemove')
zxcAddEvt(document,'zxcMseDown','mousedown')
zxcAddEvt(document,'zxcMseUp','mouseup')

Y el segundo punto:

Código:

document.getElementsByTagName('BODY')[0].appendChild(zxcObj);

[Noide]

Uo que rapido!

A ver si logro entenderte:

Entonces teniendo como el div contenedor de la imagen:

<DIV id="Canvas" class="mapa" STYLE="position:absolute; top:0px; left:0px; visibility:visible">
</DIV>

Deberia de estar asi?

zxcAddEvt(Canvas,'zxcDrag','mousemove')
zxcAddEvt(Canvas,'zxcMseDown','mousedown')
zxcAddEvt(Canvas,'zxcMseUp','mouseup')

Canvas.appendChild(zxcObj);

No se porque me da la sensación de que acabo de hacer algo muy nub xD
Esque no tengo ni idea de Javascript T_T.

[David]

No "Canvas" directamente, primero debes obtener la referencia al elemento:

Código Javascript:

var dibujo = document.getElementById("Canvas");
 

Y a partir de ahí usar la variable dibujo.

[Noide]

Me deberia quedar asi entonces?

var dibujo = document.getElementById("Canvas");
dibujo.appendChild(zxcObj);

zxcAddEvt(dibujo,'zxcDrag','mousemove')
zxcAddEvt(dibujo,'zxcMseDown','mousedown')
zxcAddEvt(dibujo,'zxcMseUp','mouseup')

Ahora no me dibuja div's T_T Debo de cambiar algo mas?

Gracias por tu ayuda y perdona que sea tan pesado pero esque tengo muchísimas ganas de que funcione y celebrarlo despues de una semana de atasco.

[David]

Es que la línea de var dibujo = ... también debe estar antes de asignar los eventos.

Si sigue sin funcionar, muestra todo el código con los cambios que hiciste.

[Noide]

Sigue sin funcionar T_T.

He colgado el script con las modificaciones:
bibliopg.netai.net

Gracias por tu paciencia y ayuda David =).

[David]

El problema es que estás tratando de asignar el evento al elemento con id "Canvas" antes de que ese elemento sea creado. Debes ejecutar el código que asigna los eventos en el evento onload de la página:

Código Javascript:

window.onload = function() {
    /* Código */
}
 

[Noide]

Siii!! funciona!! jajajaja

Muchisimas gracias David!! Si pudiera te invitaba a unas cañas jajajaja!!

Te debo una!

[David]

Me alegra que haya funcionado.

Hasta la próxima.

Saludos.