croppe billede - trække firkant hen over billede

Her er et ufærdigt script:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Marker billede</title>
<script type="text/javascript">
m_nede = false;

function musned() {
  m_nede = !m_nede;
  if (m_nede) {
    obj = document.getElementById("markoer");
    obj.style.width = "0px";
    obj.style.height = "0px";
    obj.style.left = event.clientX;
    obj.style.top = event.clientY;
  }
}

function bevaeg() {
  if (m_nede) {
    obj = document.getElementById("markoer");
    obj.style.width = Math.abs(event.clientX - parseInt(obj.style.left, 10));
    obj.style.height = Math.abs(event.clientY - parseInt(obj.style.top, 10));
  }
}

</script>
</head>
<body>
<img src="billede.gif" style="width: 300px; height: 200px;" onclick="musned();" onmousemove="bevaeg();" />
<div id="markoer" onclick="musned();" style="position: absolute; left: -100px; top: -100px; width: 0px; height: 0px; background-color: #999999; border: 1px solid black; filter: alpha(opacity=30); -moz-opacity: 0.1"></div>
</body>
</html>

Det virker kun, når man klikker på billedet og trækker musen nedad mod højre. Hvis man trækker op mod venstre, fungerer det ikke korrekt, men jeg har ikke mere tid i dag, så enten må en anden hjælpe, eller også må du vente et par dage. :)

Så begynder det at ligne noget:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Marker billede</title>
<script type="text/javascript">
m_nede = null;

function musned() {
  if (m_nede == null) {
    m_nede = new Array(event.clientX, event.clientY);
    obj = document.getElementById("markoer");
    obj.style.width = "0px";
    obj.style.height = "0px";
    obj.style.left = event.clientX;
    obj.style.top = event.clientY;
  }
  else
    m_nede = null;
}

function bevaeg() {
  if (m_nede) {
    obj = document.getElementById("markoer");
    x = event.clientX;
    y = event.clientY;
    if (x < m_nede[0])
      obj.style.left = x;
    if (y < m_nede[1])
      obj.style.top = y;
    obj.style.width = Math.abs(x - m_nede[0]);
    obj.style.height = Math.abs(y - m_nede[1]);
  }
}

</script>
</head>
<body>
<img src="billede.gif" style="width: 300px; height: 200px;" onclick="musned();" onmousemove="bevaeg();" ondragstart="return false;" />
<div id="markoer" onclick="musned();" style="position: absolute; left: -100px; top: -100px; width: 0px; height: 0px; background-color: #999999; border: 1px solid black; filter: alpha(opacity=30); -moz-opacity: 0.1"></div>
</body>
</html>

Du skal selvfølgelig også kunne sende koordinaterne videre:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Marker billede</title>
<script type="text/javascript">
m_nede = null;
koord = null;

function musned() {
  if (m_nede == null) {
    m_nede = new Array(event.clientX, event.clientY);
    obj = document.getElementById("markoer");
    obj.style.width = "0px";
    obj.style.height = "0px";
    obj.style.left = event.clientX;
    obj.style.top = event.clientY;
  }
  else {
    arr = getPos();
    koord = new Array(m_nede[0] - arr[0], m_nede[1] - arr[1], event.clientX - arr[0], event.clientY - arr[1]);
    m_nede = null;
  }
}

function bevaeg() {
  if (m_nede) {
    obj = document.getElementById("markoer");
    x = event.clientX;
    y = event.clientY;
    if (x < m_nede[0])
      obj.style.left = x;
    if (y < m_nede[1])
      obj.style.top = y;
    obj.style.width = Math.abs(x - m_nede[0]);
    obj.style.height = Math.abs(y - m_nede[1]);
  }
}

function getPos() {
  obj = document.getElementById("bill");
  temp = new Array(0, 0);
  while (obj.parent != null) {
    temp[0] += obj.offsetLeft;
    temp[1] += obj.offsetTop;
    obj = obj.parent;
  }
  return temp;
}
</script>
</head>
<body>
<img id="bill" src="billede.gif" style="width: 300px; height: 200px;" onclick="musned();" onmousemove="bevaeg();" ondragstart="return false;" /><br /><br />
<form onsubmit="if (koord != null) this.koordinater.value = koord.join(', '); else return false;">
<input type="hidden" name="koordinater" value="" />
<input type="submit" value="Send koordinater" />
</form>
<div id="markoer" onclick="musned();" style="position: absolute; left: -100px; top: -100px; width: 0px; height: 0px; background-color: #999999; border: 1px solid black; filter: alpha(opacity=30); -moz-opacity: 0.1"></div>
</body>
</html>

ser godt ud. Hvordan sender jeg koordinaterne videre til en anden side på denne måde?

<form ation="croppicture.asp?width="bredde"&height="højde" osv..........??

Undskyld ventetiden, men Ekspertens mailrobot er simpelthen så sløv for tiden...

I ovenstående script bliver koordinaterne sendt videre. Du skal bare aflæse variablen "koordinater", hvis format er som følger:
x1,y1,x2,y2
... hvor firkantens øverste venstre hjørne har koordinatet (x1,y1) og det nederste højre (x2,y2).

Du skal selvfølgelig også ændre formtagget, fx:

<form action="din_side.php" method="post" onsubmit="if (koord != null) this.koordinater.value = koord.join(', '); else return false;">

lukket.

Selv tak.