Ankündigung

Einklappen
Keine Ankündigung bisher.

Responsive Grafik mit Hotspots

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

  • Responsive Grafik mit Hotspots

    Hallo

    Wie kann man eine Grafik (Kartenausschnitt) mit Hotspots darauf, so gestalten, dass sich die Hotspots entsprechend der Grösse der Karte auch anpassen. Die Grösse und der Punkt, an dem sich die Hotspots befinden, sollten sich der Grösse der Karte anpassen.

    Früher habe ich im Dreamweaver eine statische Karte auf einer Seite gehabt und die Hotspots direkt auf der Karte eingetragen. Aber das waren noch Zeiten, wo man noch mit Tabellen gearbeitet hat.

    Danke für jeden Hinweis oder Erklärung.

    Gruss Day-Walker

  • #2
    Das ist kein Problem, wenn Du die Größe und die Position der Hotspots konsequent relativ zur Größe der Grafik definierst. Ich habe früher mal etwas ähnliches gemacht:
    http://webentwicklung.ulrichbangert....rte-hunde.html

    Kommentar


    • #3
      Hallo Sempervivum

      Danke für den Tipp. Das heisst, die Position finden der Hotspots ist ein "ausprobieren", wenn man den genauen Punkt treffen möchte. Bei sehr vielen Hotspots eine Menge Arbeit.

      Gruss Day-Walker

      Kommentar


      • #4
        Nein, ausprobieren musst Du es nicht, auch dafür habe ich damals etwas vorbereitet:
        http://webentwicklung.ulrichbangert....draggable.html
        Wenn Du die Hundeköpfe mit der Maus verschiebst, wird dir links unten die Position angezeigt.

        Kommentar


        • #5
          Hallo Sempervivum

          Vielen Dank für Deine Hilfe. Werde mal Dein Beispiel unter die Lupe nehmen und versuchen, es auf mein Projekt anzuwenden.

          Gruss Day-Walker

          Kommentar


          • #6
            Hallo Sempervivum

            Melde mich zurück. Hab Deinen Beispiel Code (mit Anzeige Posistion) genommen und versucht, ihn an meine Bedürfnisse anzupassen. Hat leider nicht so geklappt, wie ich wollte.

            Wichtig für mich, sind folgende Punkte:

            1. Maximale Breite de Bildes 1400px
            2. Unten und Oben kommt noch Text (darum separater Container)

            Ich bin noch nicht der Profi und habe noch einige Lücken, was mein Wissen angeht. Mit JavaScript kenne ich mich leider noch gar nicht aus.

            Die Karte wird angezeigt und auch die zwei "Points" und es lässt sich schön vergrössern und verkleinern. Aber ich kann die "Points" nicht verschieben und auch die Position wird mir nicht angezeigt. Die Karte wird auch grösser aus die 1400px.

            Sorry, wenn ich bei Dir nochmals nachfrage, aber vielleicht ist es nur was kleines.

            Vielen Dank für Deine Hilfe.

            Hier mal der Code:

            <!DOCTYPE HTML>

            <html>

            <head>
            <title>Unsere Standorte</title>

            <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
            <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
            <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
            <style>
            .section_karte {
            width-max: 1400px
            position: relative;
            margin: 0;
            padding: 0;
            }
            #swissmap {
            width: 100%;
            height: auto;
            }
            a {
            display: inline-block;
            width: 5%;
            position: absolute;
            }
            img {
            width: 100%;
            height: auto;
            pointer-events: none;
            }
            #point01 {
            left: 40%;
            top: 20%;
            }
            #point02 {
            left: 60%;
            top: 40%;
            }
            </style>
            </head>
            <body>
            <div class="section_karte">
            <img id="swissmap" src="images/schweiz.jpg" />
            <a class="point" id="point01" href="https://de.wikipedia.org/wiki/Golden_Retriever">
            <img src="images/point_kl.gif" />
            </a>
            <a class="point" id="point02" href="https://de.wikipedia.org/wiki/Langhaarcollie">
            <img src="images/point_kl.gif" />
            </a>
            <span id="output"></span>
            <script>
            $("#worldmap").on("load", function () {
            $(".point").draggable({
            drag: function (event, ui) {
            // var w = $(this).width();
            // var h = $(this).height();
            var w = $("#swissmap").width();
            var h = $("#swissmap").height();
            var top = Math.floor(ui.position.top);
            var left = Math.floor(ui.position.left);
            $("#output").html(
            "top: " + top + "px " + (top / h * 100).toFixed(2) + "%<br>"
            + "left: " + left + "px " + (left / w * 100).toFixed(2) + "%");
            }
            });
            });
            </div>
            </script>
            </body>
            </html>

            Gruss Day-Walker

            Kommentar


            • #7
              Der Kernpunkt ist, dass Du innerhalb der script-Tags ein HTML-Tag notiert hast, nämlich das </div> ganz am Ende. Das führt zu einem Syntaxfehler, das Skript wird nicht ausgeführt und die Punkte lassen sich nicht verschieben.
              Außerdem musst Du im Script die selbe ID verwenden, die Du deinem Bild gegeben hast, nämlich "swissmap". Weiter unten hast Du das schon richtig gemacht.:
              Code:
              </div>
              <span id="output"></span>
              <script>
              $("#swissmap").on("load", function () { // Hier musst Du die ID deines Bildes übergeben
              $(".point").draggable({
              drag: function (event, ui) {
              // var w = $(this).width();
              // var h = $(this).height();
              var w = $("#swissmap").width(); // Hier war es schon richtig
              var h = $("#swissmap").height(); // HIer auch
              var top = Math.floor(ui.position.top);
              var left = Math.floor(ui.position.left);
              $("#output").html(
              "top: " + top + "px " + (top / h * 100).toFixed(2) + "%<br>"
              + "left: " + left + "px " + (left / w * 100).toFixed(2) + "%");
              }
              });
              });
              // Hier wurde das </div> geloescht
              </script>
              Und mit deinem CSS bist Du schon auf dem richtigen Wege, nur dass es max-width statt width-max heißen muss

              Kommentar


              • #8
                Super, jetzt funktioniert es, vielen Dank. Flüchtigkeitsfehler, auf die ich eigentlich selber hätte kommen müssen.
                Und wenn ich das Ganze jetzt richtig verstanden habe, kann ich mit diesem Script mir jetzt alle Koordinaten der Punkte notieren und dann mit dem ersten Script alle so einbinden.

                Gruss Day-Walker

                Kommentar


                • #9
                  Genau, das zweite Skript ist nur ein Werkzeug, um die Positionen der Punkte festzulegen. Die erste Seite braucht gar kein Javascript.

                  Kommentar

                  Die neuesten Themen

                  Einklappen

                  • arnego2
                    Antwort auf Wer kann mir diese Homepage bauen?
                    Je nach Version Ja, Standort Vorteil.
                    Sollte er allerdings die Shopping cart Variante haben wollen wird es teurer....
                    Gestern, 20:48
                  • Testie
                    Antwort auf Wer kann mir diese Homepage bauen?
                    180€ für eine Webseite mit 18 Unterseiten so wie es der Kunde wünscht? really?
                    Gestern, 19:51
                  • arnego2
                    Antwort auf Wer kann mir diese Homepage bauen?
                    Du kannst völlig umsonst eine Webseite bauen oder zusammenstellen es gibt hunderte von Angeboten zum selber machen die sogar das Domain oder ein Subdomain mit einschließen. Nur sollte man sein Geschäft (wenn es den eins werden wird) nicht auf billig aufbauen. Nach etwas aussehen muss eine Webseite...
                    Gestern, 14:41
                  • Ramsauer27
                    Antwort auf Wer kann mir diese Homepage bauen?
                    1. Die Videos sind meine eigene, wurden von mir erstellt. Server muss ich mir erst anschauen.
                    2. Ja damit meine ich das er Zugriff zu den Kontent bekommt für den er bezahlt hat. Direkt nach der Bezahlung.
                    3. Das eine was auf der Seite auffindbar ist der Free Kontent. Nachdem Sie bezahlt...
                    Gestern, 10:04
                  • Andre1
                    Antwort auf Wetter App funktioniert nicht mehr
                    Nein das ist die Standard MSN App. Also die, welche vom Anfang an drauf war, ist.

                    Liebe Grüße
                    Andre
                    18.01.2019, 23:33

                  Kostenlose Homepage bei Jimdo!

                  Einklappen

                  Jimdo

                  Die neuesten Beiträge

                  Einklappen

                  • Ramsauer27
                    Wer kann mir diese Homepage bauen?
                    Hallo Leute!

                    Ich brauche eure Hilfe. Ich brauche jemanden der mir eine Homepage bauen kann die folgendes macht, da ich mich selbst damit einfach 0 auskenne.
                    Ich erstelle ein Video Trainings Kurs den Ich über E-Commerce verkaufe.

                    Dazu brauche Ich:
                    1. Plattform...
                    18.01.2019, 20:14
                  • arnego2
                    Antwort auf Wer kann mir diese Homepage bauen?
                    Je nach Version Ja, Standort Vorteil.
                    Sollte er allerdings die Shopping cart Variante haben wollen wird es teurer....
                    Gestern, 20:48
                  • Testie
                    Antwort auf Wer kann mir diese Homepage bauen?
                    180€ für eine Webseite mit 18 Unterseiten so wie es der Kunde wünscht? really?
                    Gestern, 19:51
                  • arnego2
                    Antwort auf Wer kann mir diese Homepage bauen?
                    Du kannst völlig umsonst eine Webseite bauen oder zusammenstellen es gibt hunderte von Angeboten zum selber machen die sogar das Domain oder ein Subdomain mit einschließen. Nur sollte man sein Geschäft (wenn es den eins werden wird) nicht auf billig aufbauen. Nach etwas aussehen muss eine Webseite...
                    Gestern, 14:41
                  • Ramsauer27
                    Antwort auf Wer kann mir diese Homepage bauen?
                    1. Die Videos sind meine eigene, wurden von mir erstellt. Server muss ich mir erst anschauen.
                    2. Ja damit meine ich das er Zugriff zu den Kontent bekommt für den er bezahlt hat. Direkt nach der Bezahlung.
                    3. Das eine was auf der Seite auffindbar ist der Free Kontent. Nachdem Sie bezahlt...
                    Gestern, 10:04
                  • Andre1
                    Wetter App funktioniert nicht mehr
                    Hallo an alle,

                    ich habe seit ca. 3 tagen meinen Laptop erneuern müssen. Nachdem er dann die neuen Updates gemachte hatte (Windows 10, Version 1809) ging meine Wetter App nicht mehr richtig. Die zeigt zwar im "Vollfenster" die richtige Stadt an aber im Startmenü nur Berlin, egal...
                    10.01.2019, 21:08
                  • Andre1
                    Antwort auf Wetter App funktioniert nicht mehr
                    Nein das ist die Standard MSN App. Also die, welche vom Anfang an drauf war, ist.

                    Liebe Grüße
                    Andre
                    18.01.2019, 23:33
                  • arnego2
                    Antwort auf Wetter App funktioniert nicht mehr
                    Nun das es sich um die Wetter app dreht ist klar, gibt es nur eine davon oder 25 000? Ist die App auf Deutsch dann gibt es vielleicht nur 15.
                    Windows 64 war im Anfangsbetrag nicht zu erkennen. Die Windows 10, Version 1809 gibt es in 32 und 64 bit....
                    18.01.2019, 22:07
                  • swissc
                    Neue Mobile Upload Seite
                    Hallo zusammen, würde gerne eine Website auf einem PC bei mir zuhause so Bereitstellen das auf diesem eine Webseite hauptsächlich über Handy also Mobile zu besuchen ist und mit der och fotos uploaden kan und diese so sortieren sowie archivieren wie im backand eingetragen. Zbsp. Gebe ich über das...
                    18.01.2019, 02:55
                  • arnego2
                    Antwort auf Neue Mobile Upload Seite
                    Kannst du das auch geordnet Punkt für Punkt darstellen?
                    Wer soll abloaden können? Und von wo, von dir Zuhaus oder von überall?...
                    18.01.2019, 21:56

                  homepage-forum.de - Hilfe für Webmaster! Statistiken

                  Einklappen

                  Themen: 56.317   Beiträge: 427.802   Mitglieder: 27.630   Aktive Mitglieder: 66
                  Willkommen an unser neuestes Mitglied, Carter.

                  Online-Benutzer

                  Einklappen

                  502 Benutzer sind jetzt online. Registrierte Benutzer: 3, Gäste: 499.

                  Mit 1.625 Benutzern waren am 17.03.2018 um 19:52 die meisten Benutzer gleichzeitig online.

                  Lädt...
                  X