hola gente, vengo para que por favor me solventen una duda... tengo un simple form html que me envia datos a un php y lo guarda en una base de datos, hasta acá todo perfecto. pero le agregué [URL="http://odyniec.net/projects/imgareaselect/"]este plugin jquery[/URL] que me permite seleccionar un área de una imagen y pasa los datos de
x1 x2 y1 y2 ancho y
alto y se ven en un input dentro del html. el tema es que a estas variables como verán (estan en una tabla) y las incluí como parte del form para que también me lo envie al php, entonces en el php le pido las variables pero no me las trae ni de casualidad :( la sintaxis del php es correcta por lo cual el problema está en el código que les expongo abajo, seguro no envia bien las variables de jquery pero no logro dar en la tecla, si se fijan, arriba del form, está la función jquery con el código del plugin citado, espero por favor me ayuden, si necesitan mas datos os envío. muchas gracias.
Código PHP:
<!DOCTYPE html>
<html lang="es">
<head>
<title>Gestión de Reclamos</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="css/estilos.css" />
<link rel="stylesheet" type="text/css" href="css/imgareaselect-animated.css" />
<script type="text/javascript" src="scripts/jquery.min.js"></script>
<script type="text/javascript" src="scripts/jquery.imgareaselect.pack.js"></script>
<script type="text/javascript" src="jquery-1.6.1.min.js"></script>
</head>
<body>
<div id="root">
<div id="content" class="container">
<script>
function preview(img, selection) {
if (!selection.width || !selection.height)
return;
var scaleX = 100 / selection.width;
var scaleY = 100 / selection.height;
$('#preview img').css({
width: Math.round(scaleX * 869),
height: Math.round(scaleY * 961),
marginLeft: -Math.round(scaleX * selection.x1),
marginTop: -Math.round(scaleY * selection.y1)
});
$('#x1').val(selection.x1);
$('#y1').val(selection.y1);
$('#x2').val(selection.x2);
$('#y2').val(selection.y2);
$('#ancho').val(selection.width);
$('#alto').val(selection.height);
}
$(function () {
$('#photo').imgAreaSelect({ handles: false,
fadeSpeed: 300, onSelectChange: preview });
});
</script>
<div class="frame" style="margin: 0 0.3em; width: 869px; height: 961px;">
<img id="photo" src="images/mapa01.jpg" />
</div>
</div>
<div style="float: left; width: 50%;">
Vista Previa
<div class="frame"
style="margin: 0 1em; width: 100px; height: 100px;">
<div id="preview" style="width: 100px; height: 100px; overflow: hidden;">
<img src="images/mapa01.jpg" style="width: 100px; height: 100px;" />
</div>
</div>
</div> <!-- /#content -->
</div> <!-- /#root -->
<form action="php/envio.php" method="POST">
<br> <input type="text" name="titulo" maxlength="40" required="required" placeholder="titulame" /><br>
<select name="tipo">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select><br>
<table style="margin-top: 1em;">
<thead>
<tr>
<th colspan="2" style="font-size: 110%; font-weight: bold; text-align: left; padding-left: 0.1em;">
Coordenadas
</th>
<th colspan="2" style="font-size: 110%; font-weight: bold; text-align: left; padding-left: 0.1em;">
Tamaño
</th>
</tr>
</thead>
<tbody>
<tr>
<td style="width: 10%;"><b>X<sub>1</sub>:</b></td>
<td style="width: 30%;"><input type="text" name="x1" id="x1" value="-" disabled="disabled"/></td>
<td style="width: 20%;"><b>Ancho:</b></td>
<td><input type="text" name="ancho" value="-" id="ancho" disabled="disabled"/></td>
</tr>
<tr>
<td><b>Y<sub>1</sub>:</b></td>
<td><input type="text" name="y1" id="y1" value="-" disabled="disabled"/></td>
<td><b>Alto:</b></td>
<td><input type="text" name="alto" id="alto" value="-" disabled="disabled"/></td>
</tr>
<tr>
<td><b>X<sub>2</sub>:</b></td>
<td><input type="text" name="x2" id="x2" value="-" disabled="disabled"/></td>
<td></td>
<td></td>
</tr>
<tr>
<td><b>Y<sub>2</sub>:</b></td>
<td><input type="text" name="y2" id="y2" value="-" disabled="disabled"/></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<div class="box" id="mapa"></div>
<p id="position"></p>
<textarea name="textarea" rows="12" cols="60" required="required" maxlength="2000"></textarea><br>
<input type="submit" value="Enviar"/>
</form>
</body>