Ver Mensaje Individual
  #7 (permalink)  
Antiguo 18/02/2008, 09:15
mikeltb
 
Fecha de Ingreso: febrero-2008
Mensajes: 14
Antigüedad: 16 años, 3 meses
Puntos: 0
Re: Hacer una selección dibujando un rectángulo con el ratón

Bueno, al final lo he solucionado, de otra forma pero también me vale.

Quiero agradecer a Enea por su código y a Caricatos por su ayuda.

Ahi va el código:

<%@ Page Language="vb" AutoEventWireup="false" Codebehind="WebForm1.aspx.vb" Inherits="WebApplication3.WebForm1"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<title>WebForm1</title>
<meta content="Microsoft Visual Studio .NET 7.1" name="GENERATOR">
<meta content="Visual Basic .NET 7.1" name="CODE_LANGUAGE">
<meta content="JavaScript" name="vs_defaultClientScript">
<meta content="http://schemas.microsoft.com/intellisense/ie5" name="vs_targetSchema">

<script language="JavaScript">

var coordenadas = new Array();
var contador = 0;
var dibuja=0;
var movimiento=0;


function menor(a, b) {
var dato = (a < b) ? a : b;
return "" + dato + "px";
}

function dife(a, b) {
var dato = (a < b) ? b - a : a - b;
return "" + dato + "px";
}

var _ns4 = (document.layers) ? true : false;
var _ie = (document.all) ? true : false;
var _ns6 = (document.getElementById && !_ie) ? true : false;
var _coorX, _coorY;

if (_ns6) document.addEventListener("mousemove", mouseMove, true);
if (_ns4) {document.captureEvents(Event.MOUSEMOVE); document.mousemove = mouseMove;}
if (_ie) document.onmousemove = mouseMove;

function mouseMove(e)
{
if (_ns4||_ns6) {_coorX = e.pageX; _coorY = e.pageY;}
if (_ie) {_coorX = event.x; _coorY = event.y;}
return true;
}

function mouseX() {
return _coorX;
}

function mouseY() {
return _coorY;
}

function dibuja_seleccion(e) {

if (dibuja==2) {
x1=0;
x2=0;
y1=0;
y2=0;
dibuja=0;
cuadradito.style.left [/CENTER]
= menor(x1, x2);
cuadradito.style.top = menor(y1, y2);
cuadradito.style.width = dife(x1, x2);
cuadradito.style.height = dife(y1, y2);

}

if (dibuja==1) {
movimiento= ++ movimiento;
coordenadas[3] = mouseX();
coordenadas[4] = mouseY();
x1 = coordenadas[1];
x2 = coordenadas[3];
y1 = coordenadas[2];
y2 = coordenadas[4];



if (movimiento>1) {

cuadradito.style.left = menor(x1, x2);
cuadradito.style.top = menor(y1, y2);
cuadradito.style.width = dife(x1, x2);
cuadradito.style.height = dife(y1, y2);

cuadradito.style.position = "absolute";
cuadradito.style.borderWidth = "1px";
cuadradito.style.borderStyle = "solid";
cuadradito.style.borderColor = "#808080";

}
else {
cuadradito = document.createElement("div");
document.getElementById("capa").parentNode.appendC hild(cuadradito);
}
}
}

function coordenadas_de_inicio(e) {

if (dibuja==0) {
coordenadas[1] = mouseX();
coordenadas[2] = mouseY();
dibuja=1;
}
else{
dibuja=2;
dibuja_seleccion();
}
}

</script>
</HEAD>
<body style="MARGIN: 0px; POSITION: relative">
<div id="contenedor" style="PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; POSITION: relative">
<IMG onmousemove="dibuja_seleccion()" onmousedown="coordenadas_de_inicio()" id="capa"
style="PADDING-RIGHT: 0px; PADDING-LEFT: 350px; PADDING-BOTTOM: 0px; CURSOR: crosshair; PADDING-TOP: 0px"
height="500" src="Plano centro.jpg" width="500">

</div>

</body>
</HTML>[/LEFT]

Última edición por mikeltb; 18/02/2008 a las 09:24 Razón: Solucionado