Positionen innerhalb eines Image-Elements mit jQuery ermitteln

Eine Variante mit jQuery zur Ermittlung von Koordinaten

Das Thema dieser Seite, ebenso das der beiden vorausgegangenen Seiten, hat eigentlich wenig mit dem Thema Event- und Klick-Tracking zu tun. Es sei denn wir möchten eine Landkarte mit einer Imagemap benutzen, um Benutzeraktivitäten zu verfolgen. Wenn nun doch alles unter einer gemeinsamen Übersicht gelistet wird, dann eigentlich nur aus dem Grund, weil die vorgestellten Scripts sich im weitesten Sinne auch für eine Verfolgung von Ereignissen nutzen lassen.

Übersicht Event- und Klick-Tracking:

Unterschiede und Gemeinsamkeiten der Varianten

Im Vergleich mit dem Code-Listing auf der vorausgehenden Seite wird gut ersichtlich, dass bei der Variante mit jQuery auf die erste Fallunterscheidung vollständig verzichtet werden kann, da jQuery bereits intern prüft, welche Methode in Frage kommt.
Ein weiterer Unterschied besteht darin, dass die Event-Eigenschaften layerX und layerY in der jQuery Bibliothek nicht auffindbar sind und von den Entwicklern der WebKit Engine wohl als veraltet (deprecated) angesehen werden. Siehe hierzu: bugs.jquery.com/ticket/10531

Um mit jQuery nun ein vergleichbares Resultat zu erzielen, gibt es zwei Alternativen.

Variante I:

var x = event.originalEvent.layerX;
var y = event.originalEvent.layerX;

Variante II:

var x = event.pageX - this.offsetLeft;
var y = event.pageY - this.offsetTop;

Beim nachfolgenden Script wurden beide Varianten getestet, wobei kein Unterschied feststellbar war. Ob eine Fallunterscheidung mit der Abfrage von window.event noch sinnvoll ist oder nicht, bleibt dahingestellt, schaden tut sie zumindest nicht.
Um bei einer Verwendung des Scripts innerhalb von WordPress keine schwer lokalisierbaren Fehler zu provozieren, sollten die Mantelfunktionen (Mutterfunktionen) nicht mit $, sondern mit jQuery angesprochen werden. Die inneren Funktionen (Kindfunktionen) können dann wieder, wie wohl von den meisten gewohnt, mit $ beginnen.

Code-Listing der Variante mit jQuery:

<!DOCTYPE html>
<html>

<head>
<title>Position im Element mit jQuery ermitteln</title>
<script type="text/javascript" src="http://www.example.com/jquery-1.11.0.js"></script>
</head>

<body>
<div style="text-align:center; margin-bottom: 28px">
  <img src="http://www.example.com/grafiken/demo-events.jpg"
       alt="Image" id="NeuesImage" style="position:relative"><br>
  <input type="button" value="Lade ein neues Image" id="lade_ein_neues_Image">
</div>
<div style="text-align:center">
  <textarea name="einblendung" id="einblendung" cols="58" rows="9">
  Einblendung-Koordinaten
  </textarea>
</div>

<script type="text/javascript">
"use strict";

/*-- Ein neues Bild laden --------------------------------------------------------*/

jQuery("#lade_ein_neues_Image").bind("click", function() {

    var bild = "http://www.example.com/grafiken/demo-landkarte.jpg";
    $("#NeuesImage").attr("src", bild);
    }
);

/*-- Die x- und y-Koordinaten ermitteln, an denen ein Event im Element erfolgte --*/

jQuery("#NeuesImage").bind("click", function(eve) {

    if (window.event) {
        var winls = window.event.offsetX;          // von links (IE)
        var winlo = window.event.offsetY;          // von oben
    }
    else {
        var winls = eve.pageX - this.offsetLeft;   // von links (Alle?)
        var winlo = eve.pageY - this.offsetTop;    // von oben
    }
    /*-- Die Ausgabe vorbereiten -------------------------------------------------*/

    var iweit = Math.round(this.width);
    var ihoch = Math.round(this.height);
        winls = Math.round(winls);
        winlo = Math.round(winlo);

    var imap  = "<img src=\"demo.jpg\" width=\""+ iweit +"\" ";
        imap += "height=\""+ ihoch +"\" alt=\"Demo\" usemap=\"#demo\">\n";
        imap += "<map name=\"demo\">\n";
        imap += "<area shape=\"circle\" coords=\""+ winls +","+ winlo +",8\" ";
        imap += "href=\"http://www.example.com\" alt=\"demo\" title=\"Nur ein Demo\">\n";
        imap += "</map>\n";

    $("#einblendung").text(imap);
    $("#einblendung").attr("wrap", "off");
    }
);

</script>
</body>
</html>

Das vorgestellte Script würde eine Ausgabe wie die folgende bewirken, wobei der in der Textarea ausgegebene HTML-Code als einfache Imagemap verwendet werden könnte.

Eine Textarea

Textarea mit HTML-Code für eine Imagemap

Ist ein Zeilenumbruch in einer Textarea nicht erwünscht und wird dennoch Wert auf eine valide HTML-Seite gelegt, kann leider das Attribut wrap mit dem Wert ‘off’ nicht benutzt werden und auch CSS biete hier wirklich eine Alternative. Wird dieses Attribut hingegen per JavaScript hinzugefügt (Siehe unten im Code), so kann ein HTML-Validator nicht darüber stolpern.

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *