nicht angemeldet UdoKl.
MudGuard
Rolf B
klawischnigg
Rolf B
Rolf B
Felix Riesterer
UdoKl.
Rolf B
UdoKl.
klawischnigg
JürgenB
Hallo, ich bin nicht unbedingt der Webprogrammierer und hätte ein kleines Problem zu lösen. Wäre nett, wenn mir jemand kurz helfen könnte, ist bestimmt ganz simpel.
Auf einer Seite wird u.a. eine Grafik dargestellt. Beim Submit werden die Inhalte der Input-Elemente an den Server gesendet, bisher alles mit meinem HTML-Verständnis machbar.
Ich möchte nun gern eine Erweiterung vornehmen. Der User soll auf die angezeigte Grafik klicken und dabei das Submit auslösen (wäre über einen grafischen Button denkbar). Ich möchte in diesem Fall aber zusätzlich die Position der Maus an den Server übergeben und dort auswerten können.
Durch die Position wird Serverseitig die Grafik angepasst und die Seite neu aufgebaut.
Also, wie kann ich die Position des Klicks (z. B. in zwei unsichtbaren Elementen) an den Server übergeben?
Vielen Dank schon mal. Udo
Hi,
Ich möchte nun gern eine Erweiterung vornehmen. Der User soll auf die angezeigte Grafik klicken und dabei das Submit auslösen (wäre über einen grafischen Button denkbar).
nutze ein input type="image" mit name-Attribut, dann wird name.x und name.y übertragen.
cu,
Andreas a/k/a MudGuard
Hallo MudGuard,
keine eigenständigen Image-Buttons verwenden, die sind nicht responsiv!
Rolf
Hi there,
keine eigenständigen Image-Buttons verwenden, die sind nicht responsiv!
Welche Rolle spielt Deiner Meinung nach die Responsivität beim Feststellen der Mausposition...?
Hallo klawischnigg,
Welche Rolle spielt Deiner Meinung nach die Responsivität beim Feststellen der Mausposition...?
Bei einer responsiven Webseite, die ihre Maße in em angibt, variiert die Größe des Imagebuttons mit dem Font. Die Position bekommst Du aber idiotischerweise in Pixel, nicht in Prozent der Bildgröße.
Rolf
Hallo Udo,
um an die Klick-Koordinaten zu kommen, kann man einen Image-Button (<input type="image">) oder ein <area>-Element verwenden. Wiki: Auslösen von Benutzeraktionen - input type="image"
Aber Vorsicht: Ein eigenständiges input mit type="image" oder eine area sind etwas, was man nicht tun sollte. Du kannst mit den Koordinaten nur dann etwas anfangen, wenn das Element eine feste Größe hat. Und das möchte dein Besucher nicht, deine Besucher möchten mit großer Wahrscheinlichkeit eine Seite, die sich an die Größe ihres Bildschirms anpasst, also responsiv ist.
Und: Koordinaten sind nicht immer das, was Du eigentlich willst. Wenn Du in einem Bild darauf reagieren willst, dass ein bestimmter Bildbereich geklickt wird, ist eine responsive Imagemap, wie Matthias sie im Wiki dargestellt hat, eleganter.
Allerdings hat Matthias hat sein Beispiel auf a Elemente aufgebaut. Für einen Form-Submit ist das ungünstig, Buttons sind besser, wenn auch etwas mühsamer, weil man sie als foreignObject verpacken muss. Du hast zwei Möglichkeiten: Zeige im SVG ein Bild und lege foreignObjects mit Buttons darin darüber. Den Buttons nimmst Du mit CSS Rand und Hintergrund weg. Oder zeige in einem leeren SVG foreignObjects mit Image-Buttons darin an.
Dem SVG kannst Du dann eine beliebige Größe geben, die Klick-Koordinaten bekommst Du im Koordinatensystem der Viewbox des SVG.
Oder, wenn Du auf ein Bild mehrere Buttons an geeignete Stellen legst, kannst Du ihnen name- und value-Attribut geben und einfach an Hand des Submit-Buttons unterscheiden, wohin geklickt wurde. Koordinaten sind nicht unbedingt nötig.
Beispielsweise kannst Du, wenn dein Bild ein Seitenverhältnis 2:3 hat, dies tun:
<form ...>
Inhalte
<svg class="imageButton" viewBox="0 0 200 300">
<foreignObject>
<input type="image" name="..." src="..." alt="..." />
</foreignObject>
</svg>
</form>
Im CSS brauchst Du noch
.imageButton {
width: 5em; /* Beispielsweise */
}
.imageButton :is(foreignObject, input[type=image]) {
width: 100%; height: 100%;
}
Damit ist der Image-Button so groß wie die Viewbox des SVG-Elements (Wert 3 und 4 des viewBox-Attributs). Hier musst Du leider hinnehmen, dass die gewünschte Bildgröße als magische Zahl in der Viewbox auftaucht. Bei mehreren Image-Buttons müsstest Du den foreignObject Elementen passende Größen zuweisen.
Je nach method im Form und je nachdem, ob das input type="image" Element ein name-Attribut hat, bekommst Du die Koordinaten auf unterschiedliche Weise.
method="GET" - als GET Parameter in der URL
method="POST" - als POST-Parameter im Post-Inhalt
ohne Name - Parameternamen sind x und y
mit Name - Parameternamen sind name.x und name.y
Rolf
Lieber UdoKl.,
was genau willst Du eigentlich erreichen, wofür Du Mauskoordinaten übertragen willst? Diese Information wäre so elend wichtig gewesen, damit man Dich sinnvoll und gut beraten kann...
Mit JavaScript ist es denkbar, die aktuellen Mauskoordinaten ständig in einem versteckten Eingabefeld abzulegen, damit sie beim Senden der Formulardaten mit übertragen werden. Dafür könnte man das Event mousemove verwenden.
Was diese Koordinaten allerdings so wirklich aussagen, ist sehr fraglich. Du kannst Dir noch nicht einmal sicher sein, ob die Koordinaten-Werte aufgrund anderer Schriftgrößen oder Zoom-Werte des Browsers stark von dem abweichen, was Du als Werte erwartet hättest. Und wenn Du dann wissen willst, welche Position in einem Bild angeklickt wurde, stellt sich die Frage, warum auf den Klick hin überhaupt etwas passieren soll, denn Bilder sind keine interaktiven Elemente!
Wenn Du anklickbare Flächen definierst, egal mit welcher Technik, dann können automatisierte Prozesse diese verwenden, falls Du die Koordinaten als Beweis für einen menschlichen Benutzer angedacht hast. Aber wenn genau das Deine ursprüngliche Absicht war, was machen dann Benutzer ohne Maus? Also Benutzer von Touchgeräten oder noch anderen Eingabemöglichkeiten (Sprachsteuerung...)?
Liebe Grüße
Felix Riesterer
Vielen Dank für die Hinweise! Ganz kurz zum eigentlichen Hintergrund meines Anliegens.
Es handelt sich um eine einfache interne Webseite für Mitarbeiter. Ich habe dazu einen Webserver programmiert, welcher die Seiten generiert. Bisher alles nur halb so schlimm, so lange es mein rudimentäres Wissen dazu hergibt, alles mit einfachen Urschleim-HTML/CSS.
Ich erstelle in dem Fall eine Seite mit eingebetteter Grafik, der User soll an eine ihm passende Stelle klicken. Die Abmaße der Grafik kenne ich dabei immer. Der Webserver soll nun per POST/GET die geklickte Position (in Variablen) erhalten, malt intern einen dicken Punkt an die gewählte Stelle und sendet die Seite neu. Die Seite fordert das img nach und bekommt es aktualisiert (mit Punkt).
Über den Webserver habe ich die Erstellung in meiner Hand, ich muss nur auf das reagieren, was der Client sendet.
Hallo UdoKl.,
Der Webserver (…) malt intern einen dicken Punkt an die gewählte Stelle
Okay, damit ist die Überlegung, mit Area oder Image-Buttons Klickzonen zu errichten, hinfällig. Aber…
Die Abmaße der Grafik kenne ich dabei immer.
Äh, nein. Du kennst die Größe der Grafik, wie sie gespeichert ist (die intrinsische Größe), aber wie groß sie im Browser dargestellt wird, das weißt Du nur, wenn Du auf Responsivität verzichtest und die Größe des img-Elements in px fest vorgibst. Und das sollte man nicht tun.
Oder vielleicht Jein... Bei einer Intranetseite kann man ggf. die User-Hardware als bekannt voraussetzen. Mindestbildschirmgröße, Pixeldichte der Bildschirme, aber ist das so? Kannst Du das garantieren? Kann sich jemand mit dem Handy ins Intranet verbinden und deine Seite abrufen? Hast Du die Viewportangabe im <head>, um auf kleinen Viewports nicht die width:960px-Emulation der Mobilbrowser zu bekommen?
Deswegen mein Vorschlag, das Ganze als Image-Button in ein SVG zu kapseln. Dann kannst Du das SVG nach Belieben skalieren, bekommst aber die Klick-Koordinaten normiert auf die Viewbox des SVG. Den Fetten Punkt brauchst Du dann auch nicht mit Imagick o.Ä. ins Bild zu klecksen, sondern kannst ihn als gefüllten <circle> einfach im SVG drüberlegen.
Was natürlich bedeutet, dass Du die Koordinaten dazu pro User speichern musst. Aber immerhin weißt Du dann im Programm, wo der Punkt ist und kannst das weiterverarbeiten. Bei einem Punkt, den Du mit ImageMagick ins Bild schmierst, ist das nicht so.
Natürlich kannst Du meine Bedenken als irrelevant für Dich abtun. Je nach Details des Anwendungsfalls sind sie das eventuell auch.
Rolf
Hallo Rolf, das klingt logisch, vielen Dank! Ich werde mich mit dem Thema SVG befassen. Es wird garantiert mit dem Handy zugegriffen und dann müsste ich mir Umrechnungen überlegen. Aber zumindest habe ich damit einen Ansatz. Danke! Udo
Hi there,
Ich werde mich mit dem Thema SVG befassen. Es wird garantiert mit dem Handy zugegriffen und dann müsste ich mir Umrechnungen überlegen.
Nur interessehalber - wie greifst Du von einem Handy auf eine Mausposition zu???
Hallo,
Nur interessehalber - wie greifst Du von einem Handy auf eine Mausposition zu???
das click-Event funktioniert auch beim Fingergrabbeln, sonst
https://wiki.selfhtml.org/wiki/JavaScript/Tutorials/Mouse_and_More
Heute würde ich nur noch das pointer-Event verwenden. Wenn Multi-Touch nicht benötigt wird, kann man auf den Umweg über pointereventcache verzichten und direkt event.clientX/Y nehmen.
Gruß
Jürgen