Yo tb e estado un ratillo trasteando ahora .... y viendo el code de caricatos y exandole un poco de imaginacion ....
Código PHP:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script type="text/javascript">
var x1 = 10; var x2 = 0;
var y1 = 0; var y2 = 0;
var cuadradito = document.createElement("div");
cuadradito.style.position = "absolute";
cuadradito.style.borderWidth = "1px";
cuadradito.style.borderStyle = "solid";
cuadradito.style.borderColor = "#106fa7";
var play = 0;
function start() {
play = 1;
}
function stop() {
play = 0;
}
function draw(obj) {
if(play) {
cuadradito.style.top = "50px";
cuadradito.style.left = "10px";
cuadradito.style.width = x1++;
cuadradito.style.height = y1++;
obj.parentNode.appendChild(cuadradito);
} else {
return false;
}
}
</script>
</head>
<body>
<div id="contenedor" style="position: relative; margin: 0px; padding: 0px">
<img src="" style="width: 500px; height: 500px; position: absolute;" onmousedown="start();" onmouseup="stop();" onmousemove="draw(this);">
</div>
</body>
</html>
Lo que sucede es que los datos habria que actualizarlos y solo funciona en Firefox de momento, en IE me da error la linea de IMG .... pero bueno, lo e exo en 1 minuto asi que si se estudia detenidamente ....
Donde se incrementa x1 e y1 habria que ir captando la posicion del mouse y hacer la diferencia y actualizar la capa creada via JS ... de esa manera el rectangulo se adaptaria a la posicion del mouse.