WinFuture-Forum.de: Javascript Mausposition Innerhalb Eines Elements - WinFuture-Forum.de

Zum Inhalt wechseln

Nachrichten zum Thema: Entwicklung
Seite 1 von 1

Javascript Mausposition Innerhalb Eines Elements


#1 Mitglied ist offline   Skiller 

  • Gruppe: aktive Mitglieder
  • Beiträge: 164
  • Beigetreten: 06. September 05
  • Reputation: 0
  • Geschlecht:Männlich
  • Wohnort:Negenborn

geschrieben 10. Mai 2008 - 22:53

Hi,

gibt es eigentlich eine Möglichkeit mit Javascript die Mausposition innerhalb eine Objektes festzustellen?

Beispiel: Ich habe einen 300x500 größen <div>. Sobald der User mit der Maus über den Div herüber fährt möchte ich die Position im Element also x und y von der oberen linken Kante herausfinden.

mfg skiller

Dieser Beitrag wurde von Skiller bearbeitet: 10. Mai 2008 - 22:53


Eingefügtes Bild
0

Anzeige



#2 Mitglied ist offline   K050V4 

  • Gruppe: aktive Mitglieder
  • Beiträge: 788
  • Beigetreten: 13. August 04
  • Reputation: 0
  • Geschlecht:Männlich
  • Wohnort:Stuttgart
  • Interessen:(X)HTML<br />CSS2+<br />PHP 4/5<br />MySQL 5<br />Symfony 1.2+<br />JavaScript / AJAX<br />jQuery<br />C++<br />C#<br />Java<br />...

geschrieben 10. Mai 2008 - 23:04

Du liest die Mausposition innerhalb des Fenster aus und subtrahierst davon die absolute Position deines DIV -Containers ab.

? :wink:

Zitat

"In der Welt des Erkennbaren ist die Idee des Guten die höchste." - Platon

Spritify! Easy CSS-Sprite-Generator | Albanisch Deutsch Wörterbuch
0

#3 Mitglied ist offline   Skiller 

  • Gruppe: aktive Mitglieder
  • Beiträge: 164
  • Beigetreten: 06. September 05
  • Reputation: 0
  • Geschlecht:Männlich
  • Wohnort:Negenborn

geschrieben 10. Mai 2008 - 23:11

Beitrag anzeigenZitat (K050V4: 11.05.2008, 00:04)

Du liest die Mausposition innerhalb des Fenster aus und subtrahierst davon die absolute Position deines DIV -Containers ab.

? :wink:


Hast du villeicht dazu nen beispiel?

Eingefügtes Bild
0

#4 Mitglied ist offline   K050V4 

  • Gruppe: aktive Mitglieder
  • Beiträge: 788
  • Beigetreten: 13. August 04
  • Reputation: 0
  • Geschlecht:Männlich
  • Wohnort:Stuttgart
  • Interessen:(X)HTML<br />CSS2+<br />PHP 4/5<br />MySQL 5<br />Symfony 1.2+<br />JavaScript / AJAX<br />jQuery<br />C++<br />C#<br />Java<br />...

geschrieben 10. Mai 2008 - 23:19

Tut mir leid, aber JS ist nicht meine Stärke.
Das hier hat mir Google ausgespuckt:
function mouse_pos(evt)
{
	if(!evt) evt = window.event;
	var pos = { left: evt.clientX, top:evt.clientY };

	var b = (window.document.compatMode && window.document.compatMode == "CSS1Compat") ?
	window.document.documentElement : window.document.body || null;

	if (b)
	{
		pos.left += b.scrollLeft;
		pos.top +=  b.scrollTop;
	}
	return pos;
}


Dann könntest du die Position deiner DIV-Box auslesen und in einer Variable speichern und dann eben verarbeiten...

Würde dir gern helfen, aber hab echt kein Plan von JS :wink:

Zitat

"In der Welt des Erkennbaren ist die Idee des Guten die höchste." - Platon

Spritify! Easy CSS-Sprite-Generator | Albanisch Deutsch Wörterbuch
0

#5 Mitglied ist offline   Skiller 

  • Gruppe: aktive Mitglieder
  • Beiträge: 164
  • Beigetreten: 06. September 05
  • Reputation: 0
  • Geschlecht:Männlich
  • Wohnort:Negenborn

geschrieben 10. Mai 2008 - 23:47

Habs jetzt schon hinbekommen, naja jedenfalls im FF. Der IE will nicht.

Hier mein Quelltext:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>

	<script type="text/javascript">

	var docEl = (
							 typeof document.compatMode != "undefined" && 
							 document.compatMode		!= "BackCompat"
							)? "documentElement" : "body";

	function init_mousemove() {
			if(document.layers) document.captureEvents(Event.MOUSEMOVE);
			document.onmousemove =	dpl_mouse_pos;
	}

	function dpl_mouse_pos(e) {

			var xPos	=  e? e.pageX : window.event.x;
		var yPos	=  e? e.pageY : window.event.y;


		if (document.all && !document.captureEvents) {
				xPos	+= document[docEl].scrollLeft;
				yPos	+= document[docEl].scrollTop;
			}
			
			posx = xPos - document.getElementById('pic').offsetLeft;
			posy = yPos - document.getElementById('pic').offsetTop;

			if (document.layers) routeEvent(e);
	}
	</script>

</head>
<body onload="init_mousemove()">
Text Text Text Text Text Text Text <br>
<img id="pic" src="Sonnenuntergang.jpg" alt="Test" onclick="alert(posx+'/'+posy)">
</body>
</html>


Eingefügtes Bild
0

#6 Mitglied ist offline   Skiller 

  • Gruppe: aktive Mitglieder
  • Beiträge: 164
  • Beigetreten: 06. September 05
  • Reputation: 0
  • Geschlecht:Männlich
  • Wohnort:Negenborn

geschrieben 13. Mai 2008 - 15:33

Hat villeicht jemand noch ne Idee warum der IE das net will?

So wie ich das sehe liegt das Problem wohl am: document.getElementById('pic').offsetLeft.

Dieser Beitrag wurde von Skiller bearbeitet: 13. Mai 2008 - 15:40


Eingefügtes Bild
0

Thema verteilen:


Seite 1 von 1

1 Besucher lesen dieses Thema
Mitglieder: 0, Gäste: 1, unsichtbare Mitglieder: 0