Ankündigung

Einklappen
Keine Ankündigung bisher.

mit javascript die Koordinaten ausgeben

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • mit javascript die Koordinaten ausgeben

    Hallo

    Wie kann ich machen, dass mir javascript die Koordinaten auf einem Bild ausgibt, wenn man irgendwo auf dieses Bild klickt?

    Also der Null-Punkt sollte in der linken oberen Ecke sein und beim Klick soll die Anzahl pixel rechts und unterhalb dieser Ecke ausgebenen werden.


  • #2
    Benutz lieber ne Imagemap?

    Kommentar


    • #3
      geht leider nicht so gut.

      Weil es sich dabei um ein ziemlich grosses Bild handelt, und ich ja die genau Koordinate bräuchte. Und somit müsste ich ja das ganue Bild in einzelne Pixels "unterteilen".

      Gäbe also bei meinem Bild 36'000 Zeilen Code. Diesen Code könnte ich zwar problemlos mit php erstellen lassen, doch hat der Browser danach relativ lange, bis er dies gelesen hat.

      Kommentar


      • #4
        dann spiel doch mal mit

        - window.inner[Width|Height]
        - screen.inner[Width/Height]
        - event.client[X/Y]

        herum. Damit sollte sich schon was basteln lassen, wenn du das Bild in einen absolut positionierten div packst, oder so in der Art. Hast du schon irgendeinen Ansatz?

        Gruss

        Kommentar


        • #5
          das hier sollte ein gerüst für den anfang sein..

          PHP-Code:
          <?php

              $img_absolut
          "m:/debian.gif";
              
          $img_relativ"debian.gif";

              
          $infosgetimagesize($img);

              
          $breite$infos[0];
              
          $hoehe=  $infos[1];

              unset(
          $infos$img);

          ?>
          <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
          <html>
          <head><title>test</title>
          <script language="JavaScript" type="text/javascript"><!--

          function getPos(e) {
              alert(e.clientX +","+ e.clientY);
          }

          --></script>
          <style type="text/css"><!--

          body {
              margin:0; padding:0;
          }

          div#bild {
              position:absolute;
              top:0;
              left:0;
              width:<?= $breite?>px;
              height:<?= $hoehe?>px;
              background-image:url('<?= $img_relativ?>');
          }

          --></style>
          </head>

          <body>

          <div id="bild" onclick="getPos(event);"></div>

          </body>
          </html>
          Gruss

          Kommentar

          Lädt...
          X