Position des Mauscurser´s mit php rausfinden?
lima-city → Forum → Programmiersprachen → PHP, MySQL & .htaccess
allgemeine syntax
beliebigen stelle
benutzer
bild
button
dokument
eintragung
ermittlung
formularfeld
funktion
gemeinsam nutzen
gesamte bild
grafik
heimatort
image
karten
mauszeiger
objekt
syntax
test
-
hallo.
hatt gestern in einem beitrag eine seite gesehen, wo man sein heimatort eintragen konnte. nun sollte man erst seine daten eingeben, und unten war dann eine dtl. karte. hat man nun die position auf der karte angeklickt wo man herkommt, wurde das formular abgeschickt. also das pic war der submit button.
woher weis das script nun, wo der user das bild angeklickt hat? um es in eine datenbank zu speichern?
w?re ?ber eine antwort sehr gl?cklich, danke
mfg -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
schau doch mal bei PHP-einfach.de vorbei, ich weiss den Script nicht auswendig, aber es gibt ihn!
-
Da PHP auf dem Server l?uft, bekommt das PHP-Script nicht so ohne Weiteres mit, wo sich der Mauszeiger befand, als der Benutzer die Karte angeklickt hat. Man kann aber mit JavaScript die Mausposition ermitteln und diese Information dann z.B. mit einem versteckten Formularfeld an den Server schicken.
Die JavaScript-Funktionen zur Ermittlung der Mauszeiger-Position:
http://de.selfhtml.org/javascript/objekte/event.htm
Objekt-relative MS-Syntax:
http://de.selfhtml.org/javascript/objekte/event.htm#offset_x_y
Allgemeine Syntax (Bildschirmkoordinaten):
http://de.selfhtml.org/javascript/objekte/event.htm#screen_x_y
MfG
alopex -
Da PHP auf dem Server l?uft, bekommt das PHP-Script nicht so ohne Weiteres mit, wo sich der Mauszeiger befand, als der Benutzer die Karte angeklickt hat. Man kann aber mit JavaScript die Mausposition ermitteln und diese Information dann z.B. mit einem versteckten Formularfeld an den Server schicken.
Die JavaScript-Funktionen zur Ermittlung der Mauszeiger-Position:
http://de.selfhtml.org/javascript/objekte/event.htm
Objekt-relative MS-Syntax:
http://de.selfhtml.org/javascript/objekte/event.htm#offset_x_y
Allgemeine Syntax (Bildschirmkoordinaten):
http://de.selfhtml.org/javascript/objekte/event.htm#screen_x_y
MfG
alopex
jo, hab mich dann f?r das entschieden
<html> <head> <title>Test</title> <script type="text/javascript"> function Coords () { alert("Stelle im Button: " + window.event.offsetX + "/" + window.event.offsetY); } </script> </head> <body> <form action=""> <input type="button" value="Klick doch mal auf mich drauf" onClick="Coords()"> </form> </body> </html>
doch wie kann ich das nun mit javascript und php gemeinsam nutzen?`
sagen wir, ich will, das per bild-submit-button dort die koords genommen werden. beim dr?cken aber auf eine andere seite geht, wo dann die eintragung und auch die ermittlung der koords passieren soll. das soll dann alles in eine mysqldb eingetragen werden. das eintragen und so, kein problem, aber wie bekomme ich auf einer n?chsten seite, die position, wo auf der vorigen gedr?ckt wurde, und das am besten gleich in php-basis? man kann doch javaS variablen in php variablen ?bertragen, oder?
mfg -
?> <html> <head> <title>Test</title> </head> <map name="linkto"> <area coords="0,0,100,100" target="_top" shape="rect" onClick="javascript:linkcoords()"/> </map> <script type="text/javascript"> <!-- function linkcoords() { top.location = "http://www.xyz.vv/x.php?pos_x=" + window.event.offsetX + "&pos_y=" + window.event.offsetY; } //--> </script> <body> einfach ein Bild mit ner imagemap ?ber das gesamte bild..<br> <image src="bild.jpg" height="100" width="100" usemap="" </body> </html> <?php
MfG Asmodeus
//edit: das gibt dann einen link mit den X-Coords als $_GET['pos_x'] und den Y-Coords als $_GET['pos_y'] -
?> <html> <head> <title>Test</title> </head> <map name="linkto"> <area coords="0,0,100,100" target="_top" shape="rect" onClick="javascript:linkcoords()"/> </map> <script type="text/javascript"> <!-- function linkcoords() { top.location = "http://www.xyz.vv/x.php?pos_x=" + window.event.offsetX + "&pos_y=" + window.event.offsetY; } //--> </script> <body> einfach ein Bild mit ner imagemap ?ber das gesamte bild..<br> <image src="bild.jpg" height="100" width="100" usemap="" </body> </html> <?php
MfG Asmodeus
//edit: das gibt dann einen link mit den X-Coords als $_GET['pos_x'] und den Y-Coords als $_GET['pos_y']
Wenn man die genauen Curser-Positionen gar nicht braucht, sondern nur einen Bereich, kann man nat?rlich auch gleich und NUR Image-Maps (http://de.selfhtml.org/html/grafiken/verweis_sensitive.htm#definieren) verwenden und das EVENT-Objekt sein lassen. Einfach so wie oben eine javascript-funktion ?ber der jeweiligen area setzen.
z.B.:
<html>
<head>
<title>Test</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
</head>
<!-- Die Image-map kann an einer beliebigen Stelle im Dokument stehen. Hier steht es mal oben im Head. N?heres zu Image-Maps unter http://de.selfhtml.org/html/grafiken/verweis_sensitive.htm#definieren //-->
<map name="linkto">
<area shape="rect" coords="?,?,?,?" href="javascript:void(0);" onClick="linkcoords(1)">
<area shape="rect" coords="?,?,?,?" href="javascript:void(0);" onClick="linkcoords(2)">
<area shape="rect" coords="?,?,?,?" href="javascript:void(0);" onClick="linkcoords(3)">
<area shape="rect" coords="?,?,?,?" href="javascript:void(0);" onClick="linkcoords(4)">
<area shape="rect" coords="?,?,?,?" href="javascript:void(0);" onClick="linkcoords(5)">
</map>
<script language="JavaScript" type="text/javascript">
<!-- Das veraltete language-Attribut f?r ?ltere Browser
function linkcoords(zahl)
{
// hier lauter Moeglichkeiten, den Bereich zu speichern und zum testen in einer alert-Box(http://de.selfhtml.org/javascript/objekte/window.htm#alert) auszugeben
document.cookie = zahl;
ausgewahlterbereich = zahl;
top.location.href = "http://www.xyz.vv/x.php?bereich=" + zahl;
document.diefoam.derdiedasinput.value = zahl;
alert(zahl); // zum testen
}
//-->
</script>
<body>
einfach ein Bild mit ner imagemap ?ber das gesamte bild..<br>
<image src="bild.jpg" height="100" width="100" usemap="#linkto">
<form name="diefoam">
<input type="hidden" name="derdiedasinput">
</form>
</body>
</html> -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
