Javascript Positionsberechnung

Leute, ich werde wahnsinnig... seit 2 Tagen fluche ich über dieses dämliche Javascript, welches ich für die Arbeit hier brauche.
Ich versuchs mal zu erklären (es klingt kompliziert, bin ich mir sicher ")

Ich habe einen Cursor (50x50px großes Quadrat) um den Mauszeiger, dessen Mittelpunkt genau in der Mitte liegt (sprich bei 25x25 Pixel). Damit will ich auf einem hochgeladenen Thumbnail gerne einen Bereich markieren, der dann anhand eines PHP-Scripts ausgeschnitten und zu einem Thumbnail in entsprechender Größe geschnitten wird.
Wenn ich nun die Positionen 0x0 an dem Bild wählen will, kriege ich, weil die Bilder auch immer eine andere Breite haben, immer falsche Positionen raus.
Siehe: #1 - #2

Die Werte im Textfeld (wo jeweils "Errechneter Wert" drüber steht), sind wie folgt aufgebaut:

Code:

Position "Left";Position "Top";Größe des Quadrates

Wie bringe ich ihn nun dazu, den Wert "Position Left" richtig zu berechnen? Der Top-Wert stimmt auf den px genau.
Hier mal die komplette Klasse, welche ich dafür verwende:

Code:

piccut = {
	x: '',
	y: '',
	c_w: 50,
	c_h: 50,
	xmouse: 50,
	ymouse: 50,

	pcMouse: function (e) {
		picborder = document.getElementById("pb");
		if(!e) e = window.event;
		piccut.xmouse = (e) ? e.clientX + document.documentElement.scrollLeft : e.pageX + e.clientX;
		piccut.ymouse = (e) ? e.clientY + document.documentElement.scrollTop: e.pageY + e.clientY;
		picborder.style.left = ( piccut.xmouse - (piccut.c_w / 2) ) + "px";
		picborder.style.top = ( piccut.ymouse - (piccut.c_h / 2) ) + "px";
	},	
	
	show_cursor: function()
	{
		picborder = document.getElementById("pb");
		picborder.style.display = "";
	},
	
	hide_cursor: function()
	{
		picborder = document.getElementById("pb");
		window.setTimeout("picborder.style.display = \"none\";this.b_v = false",1000);
	},

	set_cursor_val: function()
	{
		picborder = document.getElementById("pb");
[i]		pl = parseInt( (parseInt(document.body.offsetWidth)  - parseInt(document.getElementById("ppic").width) ) - (parseInt(document.getElementById("ppic").width) / 4));
		ph = parseInt( ((parseInt(document.body.offsetHeight) - 30) - parseInt(document.getElementById("ppic").height)));
		
		pl = ( this.xmouse - pl ) - ( this.c_w / 2 ) + ((300 - parseInt(document.getElementById("ppic").width) ) / 2);
		ph = (( this.ymouse - ph ) - ( this.c_h / 2 )) + 27;[/i]
		
		opener.document.getElementById("picpart").value = pl  + ";" + ph + ";" + this.c_w;
		
		picborder2 = document.getElementById("pb2");
		picborder2.style.width = this.c_w + "px";
		picborder2.style.height = this.c_h + "px";
		picborder2.style.left = ( piccut.xmouse - (piccut.c_w / 2) ) + "px";
		picborder2.style.top = ( piccut.ymouse - (piccut.c_h / 2) ) + "px";
		picborder2.style.display = "";

	},
	
	enlarge_cursor: function()
	{
		if ( this.c_w < 150 && this.c_h < 150 )
		{
			this.c_w += 20;
			this.c_h += 20;
		}
		this.res_cursor();
	},
	
	reduce_cursor: function()
	{
		if ( this.c_w > 50 && this.c_h > 50 )
		{
			this.c_w -= 20;
			this.c_h -= 20;
		}
		this.res_cursor();
	},
	
	res_cursor: function()
	{
		picborder = document.getElementById("pb");
		picborder.style.width = this.c_w + "px";
		picborder.style.height = this.c_h + "px";
	}
}
var ns = document.layers; 
var ie = document.getElementById; 
(ns) ? window.captureEvents(Event.MOUSEMOVE) : 0;
(ns) ? window.onMouseMove = piccut.pcMouse : document.onmousemove = piccut.pcMouse;
document.getElementById("pb").style.display = "none";
document.getElementById("pb2").style.display = "none";

Die Berechnung habe ich mal kursiv markiert. Definitiv stimmt die Mausposition, das hab ich geprüft ( mit alert() ).

Ich hoffe, dass ich jetzt nichts vergessen habe, es nicht zu schwer zu verstehen ist und mir einfach nur jemand helfen kann, ich bin total am verzweifeln...
Wenn Fragen auftreten: her damit, ich antworte

 

Es ist ein reines internes script.
Mal sehen, vllt kann ich das "Grundgerüst" der HTML mal nachbilden... sollte doch iwie machbar sein...
Hätte da dran auch mal denken sollen, zumal ich an die richtige Datei erst Montag wieder komme..

 

Könnte den Code nun "bereitstellen" ... Helferleins, meldet euch

 

Ehm, hier kann ich melden, dass ich es Donnerstag doch schon geschafft hab. Habs in meinem WE-Stress doch irgendwie verpennt, bescheidzugeben. War eig. ganz easy *g* Ich poste morgen für die Interessenten mal den Code.

Danke trotzdem für die Hilfe ;D

 

Versprochen wars, nur leider immer vergessen (wie immer, typisch Spacey ), hier aber nun das Resultat:

Code:

piccut = {
	// Variablendeklaration
	x: '', // Position Maus X
	y: '', // Position Maus Y
	c_w: 50, // Standardcursorbreite
	c_t: 50, // Standardcursorhöhe
	xmouse: 50, // Standardmausposition X
	ymouse: 50, // Standardmausposition Y
	b_v: false, // Mouseover
	pos: new Array(), // Positionsarray

	// Funktionen
	
	// pcMouse: Liest die Position aus und gibt bei "onmouseover" die Werte an die Funktion calc_pos() weiter.
	// e ist der Eventhandler
	pcMouse: function (e)
	{
		picborder = document.getElementById("pb");
		if(!e) e = window.event;
		piccut.xmouse = (e) ? e.clientX + document.documentElement.scrollLeft : e.pageX + e.clientX;
		piccut.ymouse = (e) ? e.clientY + document.documentElement.scrollTop: e.pageY + e.clientY;
		picborder.style.left = ( piccut.xmouse - ( piccut.c_w / 2 ) ) + "px";
		picborder.style.top = ( piccut.ymouse - ( piccut.c_t / 2 ) ) + "px";
		if ( piccut.b_v == true )
		{
			piccut.calc_pos();
			document.getElementById("poss").value = piccut.pos[0] + " x " + piccut.pos[1];
		}
	},	

	// show_cursor: Zeigt den Cursor an
	show_cursor: function()
	{
		picborder = document.getElementById("pb");
		picborder.style.display = "";
		this.b_v = true;
	},

	// hide_cursor: Versteckt den Cursor	
	hide_cursor: function()
	{
		picborder = document.getElementById("pb");
		//window.setTimeout("picborder.style.display = \"none\";this.b_v = false",1000); // Wenn der Auswahlkasten flackert nur alle 1 Sekunden ausblenden lassen (1 Sek = 1000ms)
		picborder.style.display = "none";
		this.b_v = false;
		document.getElementById("poss").value = "";
	},

	// set_cursor_val: Beim Klick aufs Bild wird der markierte Bereich mit rotem Rahmen markiert und die Positionen an's Hauptfenster weitergegeben
	set_cursor_val: function()
	{
		picborder = document.getElementById("pb");
		
		opener.document.getElementById("picpart").value = piccut.pos[0]  + ";" + piccut.pos[1] + ";" + this.c_w;
		
		picborder2 = document.getElementById("pb2");
		picborder2.style.width = this.c_w + "px";
		picborder2.style.height = this.c_t + "px";
		picborder2.style.left = ( piccut.xmouse - ( piccut.c_w / 2 ) ) + "px";
		picborder2.style.top = ( piccut.ymouse - ( piccut.c_t / 2 ) ) + "px";
		picborder2.style.display = "";

	},
	
	// enlarge_cursor: Vergrößert den Cursor
	enlarge_cursor: function()
	{
		picsize = document.getElementById("ppic");
		if ( this.c_w < picsize.width && this.c_t < picsize.height )
		{
			this.c_w += 20;
			this.c_t += 20;
			if ( this.c_w > picsize.width || this.c_t > picsize.height )
			{
				// Border größer als Bildbreite/-höhe, um 5 px verkleinern, bis er kleiner ist
				while ( this.c_w > picsize.width || this.c_t > picsize.height )
				{
					this.c_w -= 5;
					this.c_t -= 5;
				}
			}
		}
		this.res_cursor();
	},
	
	// reduce_cursor: Verkleinert den Cursor
	reduce_cursor: function()
	{
		if ( this.c_w > 50 && this.c_t > 50 )
		{
			this.c_w -= 20;
			this.c_t -= 20;
		}
		// Wenn Cursor durch kleinere stufige Erhöhung kleiner als 50 wird.
		if ( this.c_w < 50 || this.c_t < 50 )
		{
			this.c_w = 50;
			this.c_t = 50;
		}
		this.res_cursor();
	},
	
	// res_cursor: Führt die Größenänderung durch. Wird aufgerufen durch enlarge_cursor() oder reduce_cursor()
	res_cursor: function()
	{
		picborder = document.getElementById("pb");
		picborder.style.width = this.c_w + "px";
		picborder.style.height = this.c_t + "px";
		document.getElementById("curs").value = this.c_w + " x " + this.c_t;
	},
	
	// calc_pos: Positionsberechnung für Cursor
	// Höhenangabe muss angepasst werden, wenn Texte hinzugefügt werden, abgeändert werden o.ä.
	// Genutzt wird der offset-Wert des Bodys und mit Höhe/Breite des Bildes zur Mauszeigerposition verrechnet.
	calc_pos: function()
	{
		// pl = Position left
		// pt = Position top
		pl = parseInt( ( ( parseInt(document.body.offsetWidth) - 119) - parseInt(document.getElementById("ppic").width) ) );
		pt = parseInt( ( ( parseInt(document.body.offsetHeight) - 122) - parseInt(document.getElementById("ppic").height) ) );
	
		// Ergebnisse von Nachkommastellen befreien und in die Variablen speichern
		pl = Math.floor( ( piccut.xmouse - pl ) - ( piccut.c_w / 2 ) + ( ( 300 - parseInt(document.getElementById("ppic").width) ) / 2 ) );
		pt = Math.floor( ( ( piccut.ymouse - pt ) - ( piccut.c_t / 2 ) ) + 27);
		
		this.pos = new Array(pl, pt); // Werte in Array speichern
	},
	
	get_imagesize: function()
	{
		piw = document.getElementById("ppic").width;
		pih = document.getElementById("ppic").height;
		document.getElementById("pics").value = piw + " x " + pih;
	}
}
// Generierung des Layers/Elements für die Mauszeigerpositionsberechnung und Weitergabe an die Funktion pcMouse der piccut-Klasse
var ns = document.layers; 
var ie = document.getElementById; 
(ns) ? window.captureEvents(Event.MOUSEMOVE) : 0;
(ns) ? window.onMouseMove = piccut.pcMouse : document.onmousemove = piccut.pcMouse;

// Cursorwert und Bildwerte in Textfelder eintragen
piccut.res_cursor();
piccut.get_imagesize();

Dazu mal das Script "drumherum", bzw. das komplette Fenster, so wie es das Bild einbindet/anzeigt. Hier ist dann gleichzeitig auch das Bild schon hochgeladen und wird in einer Miniansicht angezeigt:

Code:

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head>
  <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
  <title>Titel ;)</title>
  <link rel="stylesheet" href="/template/hp_shop.css" type="text/css" />
</head>
<body>
<h2>Bild zurechtschneiden</h2>
<table width="95%" align="center" class="border">
  <tr>
    <th colspan="2">Zuschnittbereich wählen</th>
  </tr>
  <tr>
    <td colspan="2">&nbsp;</td>
  </tr>
  <tr>
    <td align="left"><a>Bereich wählen</a></td><td align="right"><strong>Bereich ausschneiden</strong></td>
  </tr>
  <tr>
    <td align="center" colspan="2">
      <br />
      <form method="post" action="">
        <img src="../images/admin/9adde3_IMG_0024.JPG" id="ppic" alt="" class="b" onmousemove="piccut.show_cursor()" onmouseout="piccut.hide_cursor()" onclick="piccut.set_cursor_val()" />
        <input type="hidden" name="picval" value="../images/admin/9adde3_IMG_0024.JPG" />
      </form>
	  <br />
	  <table border="0" cellspacing="4" cellpadding="4">
	    <tr>
		  <td align="center">Bildgröße&nbsp;</td>
		  <td align="center">&nbsp;Cursorposition&nbsp;</td>
		  <td align="center">&nbsp;Cursorgröße</td>
		</tr>
		<tr>
		  <td align="center"><input type="text" readonly="readonly" id="pics" size="7" /></td>
		  <td align="center"><input type="text" readonly="readonly" id="poss" size="7" /></td>
		  <td align="center"><input type="text" readonly="readonly" id="curs" size="7" /></td>
		</tr>
      </table><br />
	  <br /><a onclick="piccut.enlarge_cursor()" style="cursor: hand;">Vergrößern</a>&nbsp;<a onclick="piccut.reduce_cursor()" style="cursor: hand;">Verkleinern</a>
	  <br />
	</td>
  </tr>
  <tr>
    <td colspan="2"><small><strong>Diese Funktion funktioniert nur Fehlerfrei mit dem Internet Explorer!</strong></small></td>
  </tr>
</table>
<div class="picchborder" id="pb"></div>
<div class="picchborder2" id="pb2"></div>
<script language="JavaScript" type="text/javascript" src="/template/admin/shop_piccut.js"></script>
<script language="JavaScript" type="text/javascript">
// Ausblenden der beiden Positions-Rahmen (schwarz und rot)
document.getElementById("pb").style.display = "none";
document.getElementById("pb2").style.display = "none";
</script>
</body>
</html>

Und ein Part des Stylesheets (Rahmendefinitionen, Table, etc):

Code:

h2 { 
	color: black;
	background-color: transparent;
	font: bold 18px Verdana, Arial, Helvetica, Sans-Serif;
	text-align: right;
	border-bottom: 1px dotted gray;
	letter-spacing: 1px;

} 

.border { 
	font: normal 12px Verdana, Arial, Helvetica, Sans-Serif;
	padding: 4px;
	border: 0;
	border: 1px solid gray;
} 
th { 
	background-color: silver;
	color: black;
	padding: 0;
	margin: 0;
	height: 18px;
	font: bold 12px Verdana, Arial, Helvetica, Sans-Serif;
} 
td { 
	margin: 0;
	padding: 0;
} 

form { 
	margin: 0;
} 

.picchborder {
	position: absolute;
	border: 1px solid black;
	background-color: transparent;
	color: black;
	width: 50px;
	height: 50px;
	z-index: 2;
}
.picchborder2 {
	position: absolute;
	border: 1px solid red;
	background-color: transparent;
	color: black;
	width: 50px;
	height: 50px;
	z-index: 1
}
img.b {
	border: 1px solid gray;
}

Sollte alles wichtige sein für die Anzeige.
Vllt mag es wer testen. Beachtet, dass ihr ein 550 x 580 großes Popup im Internet Explorer öffnen müsst, da diese Funktion nur darauf zugeschnitten wurde (wir nutzen nur den IE in der Firma).
Bitte habt Verständnis dafür, da ich mehr davon nicht rausgeben darf, da es ja Eigentum der Firma ist