Tengo que hacer un aplicativo el cual a una imagen "original" se le sobrepongan imagenes descriptivas, las cuales deben ser arrastradas hasta la imagen original. Que s epuedan guardar los cambios y consultarlos posteriormente.
Entonces la cosa graficamente deberia ser asi...
Imagen Original
Imagen Resultante
Primero que todo alguien sabe si ya hay una aplicacion que haga esto? para no reinventar la rueda...
Si no.. entonces les cuento como lo estoy haciendo..
Para arrastrar los objetos (DIVS) estoy utilizando una clase llamada 'dom-drag.js' (http://youngpup.net/projects/dom-drag/) con la cual puedo arrastrar las imagenes por toda la pantalla.
Un primer problema es que solo se deberia poder arrastrar los objetos dentro de la imagen 'original' para lo cual puse todo dentro de un Frame. Asimismo puedo seguir las coordenadas del puntero sobre la imagen original, esto me va a servir para guardar las coordenadas de la sobreposicion de imagenes y luego guardarlas en la base de datos (con AJAX-PHP-MySQL), sin embargo mi problema concreto es que no se como capturar esas corrdenadas de los DIVs sobrepuestos en otra imagen.
La aplicacion tiene un formulario que se relaciona con las imagenes sobrepuestas, cuando un usuario escibe en un campo de texto, entonces la imagen de sobreposicion "aparece" para poder ser arrastrada.
Bueno menos carreta y mas codigo:
Código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Documento sin título</title> <script type="text/javascript" src="utils/drag.js"></script> <script language="javascript"> function muestra(){ if(document.formmod.uno.value!=''){ document.getElementById("imuno").style.visibility='visible'; document.getElementById("fila_uno").bgColor="#FFFFFF"; } else{ document.getElementById("imuno").style.visibility='hidden'; document.getElementById("fila_uno").bgColor=""; } if(document.formmod.dos.value!=''){ document.getElementById("imdos").style.visibility='visible'; document.getElementById("fila_dos").bgColor="#FFFFFF";} else{ document.getElementById("imdos").style.visibility='hidden'; document.getElementById("fila_dos").bgColor=""; } if(document.formmod.tres.value!=''){ document.getElementById("imtres").style.visibility='visible'; document.getElementById("fila_tres").bgColor="#FFFFFF";} else{ document.getElementById("imtres").style.visibility='hidden'; document.getElementById("fila_tres").bgColor="";} if(document.formmod.uno.value!='') document.getElementById("imuno").style.visibility='visible'; else{ document.getElementById("fila_dos").bgColor="";} } function asd(){ window.alert(document.getElementById('paisaje').top); } function mouseMove(e) { document.getElementById("ejeX").value = (document.all)? event.x+document.getElementById('zxc').left : e.screenX, document.getElementById("ejeY").value = (document.layers)? event.y+document.body.scrollTop : e.pageY } function init() { if (!document.all) document.captureEvents(Event.MOUSEMOVE); document.onmousemove = mouseMove; } </script> <style type="text/css"> <!-- body { background-color: #999999; } --> </style></head> <body > <form name="formmod" method="post"> <table width="600" border="1" align="center" onkeydown="muestra()"> <tr><td colspan="2" align="center"><table border="0" width="100%" cellpadding="0" cellspacing="0"> <tr><td align="center" > <IFRAME src="zzfoto.php" width="482" height="420" hspace="0" frameborder="0" name="marco" id="marco" align="center" marginheight="0" marginwidth="0" longdesc="0" scrolling="auto"> </IFRAME> </td></tr> <tr><td></td></tr> </table></td></tr> <tr><td><input type="checkbox" />1</td><td><textarea name="uno" cols="60" ></textarea></td> <td id="fila_uno" align="center"><div style="visibility:hidden" id="imuno" > <img src="images/uno.gif" style="position: relative" id="uno"></div></td></tr> <script type="text/javascript"> Drag.init(document.getElementById("uno"),null,null,null,null,null,1,1);//object, oRoot, minX, maxX, minY, maxY, bSwapHorzRef, bSwapVertRef, fXMapper, fYMapper </script> <tr><td><input type="checkbox" />2</td> <td><textarea name="dos" cols="60" ></textarea></td> <td id="fila_dos"><div style="visibility:hidden" id="imdos"> <img src="images/dos.gif" style="position: relative" id="dos"></div></td></tr> <script type="text/javascript"> Drag.init(document.getElementById("dos")); </script> <tr><td><input type="checkbox" />3</td> <td><textarea name="tres" cols="60" ></textarea></td> <td id="fila_tres"><div style="visibility:hidden" id="imtres"> <img src="images/tres.gif" style="position: relative" id="tres"></div></td></tr> <script type="text/javascript"> Drag.init(document.getElementById("tres")); </script> <tr><td colspan="2" align="center"><input type="submit" /></td></tr> </table></form> </body> </html>
zzfoto.php:
Código PHP:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<script language="javascript">
function mouseMove(e) {
document.getElementById("ejeX").value = (document.all)? event.x+document.body.scrollLeft : e.pageX
document.getElementById("ejeY").value = (document.all)? event.y+document.body.scrollTop : e.pageY
}
function init() {
if (!document.all) document.captureEvents(Event.MOUSEMOVE);
document.onmousemove = mouseMove;
}
</script>
</head>
<body onload="init()"><table border="0" cellpadding="0" cellspacing="0" width="100%" ><tr><td align="center" valign="top" >
<img src="images/paisaje.jpg" />
</td></tr>
<tr><td>Eje X <input type="text" id="ejeX" value="0" size="4">
<br>Eje Y <input type="text" id="ejeY" value="0" size="4"></td></tr>
</table>
</body>
</html>
Gracias a todos por el tiempo que les tome..
Chaop!
