Tengo 3 dudas algo complicadas que me impiden acabar el programa:
1-El programa dibuja recuadros por toda la pantalla del navegador y quiero limitarlos al tamaño de la imagen casitas.png de 294x179.
2-Los recuadros solo se dibujan en direccion a los ejes positivos (se expanden a +x y +y) y al mover el cursor a -x o -y se produce un efecto rebote.
3-Parece que no envio correctamente las coordenadas que me da el javascript mediante el formulario post. Que me falla?
Gracias de antemano y a ver quien es el campeón que me soluciona alguno de los puntos jejeje. Un saludo!
Código:
<?php
#include("conexion.php");
if (isset($_POST['guardar']) && $_POST['guardar'] == "true") {
// Hay que guardar los datos recibidos.
$ax = addslashes($_POST['Show0']);
$ay = addslashes($_POST['Show4']);
$bx = addslashes($_POST['Show1']);
$by = addslashes($_POST['Show5']);
$datos_validos = true;
if (strlen($ax) || strlen($ay) || strlen($bx) || strlen($by) <= 0) $datos_validos = false;
if ($datos_validos == true) {
$sql = "INSERT INTO marcado " .
"(ax, ay, bx, by) " .
"VALUES (" .
"$ax, $ay, $bx, $by" .
")";
mysql_query($sql);
}
}
?>
<html>
<head></head>
<body>
<script> vic=0; </script>
<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/
var zxcObj;
var zxcEvt=0;
function zxcMseDown(event){
if (zxcObj){ return; }
document.Show.Show0.value=(zxcMse(event)[0]);
document.Show.Show4.value=(zxcMse(event)[1]);
zxcObj=zxcStyle('DIV',{position:'absolute',overflow:'hidden',left:zxcMse(event)[0]+'px',top:zxcMse(event)[1]+'px',width:'2px',height:'2px',border:'solid black 1px'});
zxcObj.pos=[zxcMse(event)[0],zxcMse(event)[1]]
document.getElementsByTagName('BODY')[0].appendChild(zxcObj);
}
function zxcStyle(zxcele,zxcstyle,zxctxt){
if (typeof(zxcele)=='string'){ zxcele=document.createElement(zxcele); }
for (key in zxcstyle){ zxcele.style[key]=zxcstyle[key]; }
if (zxctxt){ zxcele.appendChild(document.createTextNode(zxctxt)); }
return zxcele;
}
function zxcMseUp(event){
if (!zxcObj){ return; }
document.Show.Show1.value=(zxcMse(event)[0]);
document.Show.Show5.value=(zxcMse(event)[1]);
zxcObj=false;
}
function zxcDrag(event){
document.Show.Show2.value=(zxcMse(event)[0])+' | '+(zxcMse(event)[1]);
if (!zxcObj){ return; }
var zxcw=Math.abs(zxcMse(event)[0]-zxcObj.pos[0])+1;
var zxch=Math.abs(zxcMse(event)[1]-zxcObj.pos[1])+1;
zxcStyle(zxcObj,{width:zxcw+'px',height:zxch+'px'});
}
function zxcMse(event){
if(!event) var event=window.event;
if (document.all){ return [event.clientX+zxcDocS()[0],event.clientY+zxcDocS()[1]]; }
else { return[event.pageX,zxcMseY=event.pageY]; }
}
function zxcDocS(){
var zxcsx,zxcsy;
if (!document.body.scrollTop){ zxcsx=document.documentElement.scrollLeft; zxcsy=document.documentElement.scrollTop; }
else { zxcsx=document.body.scrollLeft; zxcsy=document.body.scrollTop; }
return [zxcsx,zxcsy];
}
function zxcPos(zxc){
zxcObjLeft = zxc.offsetLeft;
zxcObjTop = zxc.offsetTop;
while(zxc.offsetParent!=null){
zxcObjParent=zxc.offsetParent;
zxcObjLeft+=zxcObjParent.offsetLeft;
zxcObjTop+=zxcObjParent.offsetTop;
zxc=zxcObjParent;
}
return [zxcObjLeft,zxcObjTop];
}
function zxcEventAdd(zxco,zxct,zxcf){
if (zxco.addEventListener){ zxco.addEventListener(zxct, function(e){ zxco[zxcf](e);}, false); }
else if (zxco.attachEvent){ zxco.attachEvent('on'+zxct,function(e){ zxco[zxcf](e); }); }
else {
var zxcPrev=zxco['on'+zxct];
if (zxcPrev){ zxco['on'+zxct]=function(e){ zxcPrev(e); zxco[zxcf](e); }; }
else { zxco['on'+zxct]=zxco[zxcf]; }
}
}
function zxcAddEvt(zxcobj,zxcfun,zxcevt){
if (zxcobj[zxcevt+'add']){ return; }
zxcobj['zxcaddEvt'+zxcEvt]=window[zxcfun];
zxcobj[zxcevt+'add']=true;
zxcEventAdd(zxcobj,zxcevt,'zxcaddEvt'+zxcEvt);
zxcEvt++;
zxcObj=document.getElementById('map');
}
zxcAddEvt(document,'zxcDrag','mousemove')
zxcAddEvt(document,'zxcMseDown','mousedown')
zxcAddEvt(document,'zxcMseUp','mouseup')
/*]]>*/
</script>
<form name="pointform" method="post">
<div id="pointer_div" onclick="point_it(event)" style = "background-image:url('casitas.png');width:294px;height:179px;">
</form>
<form name=Show id=Show style="position:absolute; left: 610px; top: 500px;visibility:visible;top:200px;left:10px;" method="post" action="marcar.php">
<input type="hidden" name="guardar" value="true">
aX:<input type="text" size=10 name="Show0">
aY:<input type="text" size=10 name="Show4">
bX:<input type="text" size=10 name="Show1">
bY:<input type="text" size=10 name="Show5">
<input size=10 name=Show2 >
<br>
<br>
<input type="submit" value="Marcar y modificar">
</form>
</body>
</html>
