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

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

                  Einklappen

                  Themen: 56.375   Beiträge: 428.051   Mitglieder: 27.717   Aktive Mitglieder: 80
                  Willkommen an unser neuestes Mitglied, Oldiebumser.

                  Online-Benutzer

                  Einklappen

                  670 Benutzer sind jetzt online. Registrierte Benutzer: 2, Gäste: 668.

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

                  Die neuesten Themen

                  Einklappen

                  • daniel5959
                    Antwort auf Hallo, ein Neuer!
                    Hallo,

                    bei den Websites Nr. 1 und 3 sind mir rechtliche Probleme aufgefallen - Hinweise an die Mailadressen der Betreiber verschickt.

                    Allerdings bin ich kein Jurist und habe deshalb auch nicht alle möglichen rechtlichen Fehlerquellen überprüft.

                    Optisch sind...
                    Gestern, 18:55
                  • TheBablegum
                    Antwort auf Meine Webseite, eure Meinung!
                    Danke für ihre Meinung, ich werde versuchen dies umzusetzen.
                    Natürlich ist mir klar das man Geld investieren muss, dass geht allerdings erst wenn man genug Geld hat
                    Gestern, 16:11
                  • arnego2
                    Antwort auf Meine Webseite, eure Meinung!
                    Webseiten die noch nicht fertig sind ins Netz zu stellen ohne ihre Indexierung zu verhindern ist grob Fahrlässig, die Suchmaschinen sehen das nicht gern den es gibt Mittel und Wege die Bots am Indexieren zu hindern.

                    Na ja eventuell sind diejenigen die Geldnebenbei verdienen wollen weniger...
                    Gestern, 14:21
                  • hubix
                    Antwort auf Hallo, ein Neuer!
                    Wow, krass, wie die Zeit vergeht!

                    Von den Foren habe ich keines mehr. Aber dafür sind hier und da neue Homepages und auch 2 Online-Shops dazu gekommen...

                    Für unseren Taekwondo-Verein:
                    Kampfsport Neustadt

                    Im Aufbau ein Blog über die grieschiche Urlaubsinsel...
                    Gestern, 09:00
                  • arnego2
                    Antwort auf hreflang Tags
                    2 Domains eins für Französisch eins für Deutsch.
                    Bei den Franzosen bin ich recht sicher das ihnen eine voll Französische Seite mehr gefallen würde als eine mit Deutschen geteilte. Das meinte ich mit dem Eigensinn der Menschen.

                    Eine Webseite muss dem User gefallen, ihm was abzunehmen,...
                    24.03.2019, 16:13

                  Kostenlose Homepage bei Jimdo!

                  Einklappen

                  Jimdo

                  Die neuesten Beiträge

                  Einklappen

                  • daniel5959
                    Antwort auf Hallo, ein Neuer!
                    Hallo,

                    bei den Websites Nr. 1 und 3 sind mir rechtliche Probleme aufgefallen - Hinweise an die Mailadressen der Betreiber verschickt.

                    Allerdings bin ich kein Jurist und habe deshalb auch nicht alle möglichen rechtlichen Fehlerquellen überprüft.

                    Optisch sind...
                    Gestern, 18:55
                  • TheBablegum
                    Meine Webseite, eure Meinung!
                    Mooin,
                    ich betreibe nun seit geraumer Zeit meine eigene Webseite zum Thema Paidmailer und Werbemöglichkeiten.
                    Da ich noch relativ weit am Anfang stehe und das meine erste Webseite ist, suche ich auch immer wieder Meinungen und Verbesserungsvorschläge.
                    Sei es jetzt zum Layout, der...
                    24.03.2019, 15:30
                  • TheBablegum
                    Antwort auf Meine Webseite, eure Meinung!
                    Danke für ihre Meinung, ich werde versuchen dies umzusetzen.
                    Natürlich ist mir klar das man Geld investieren muss, dass geht allerdings erst wenn man genug Geld hat
                    Gestern, 16:11
                  • arnego2
                    Antwort auf Meine Webseite, eure Meinung!
                    Webseiten die noch nicht fertig sind ins Netz zu stellen ohne ihre Indexierung zu verhindern ist grob Fahrlässig, die Suchmaschinen sehen das nicht gern den es gibt Mittel und Wege die Bots am Indexieren zu hindern.

                    Na ja eventuell sind diejenigen die Geldnebenbei verdienen wollen weniger...
                    Gestern, 14:21
                  • hubix
                    Antwort auf Hallo, ein Neuer!
                    Wow, krass, wie die Zeit vergeht!

                    Von den Foren habe ich keines mehr. Aber dafür sind hier und da neue Homepages und auch 2 Online-Shops dazu gekommen...

                    Für unseren Taekwondo-Verein:
                    Kampfsport Neustadt

                    Im Aufbau ein Blog über die grieschiche Urlaubsinsel...
                    Gestern, 09:00
                  • Atlan
                    hreflang Tags
                    Hallo,
                    habe immer noch ein Problem mit den hreflang Tags

                    unsere Seite: https://www.*****.com, besteht aus dem Deutschen Teil unter *****.com und dem französischen Teil unter *****.com/fr/.
                    -----------
                    <!DOCTYPE html>
                    <html lang="de">
                    ...
                    23.03.2019, 16:41
                  • arnego2
                    Antwort auf hreflang Tags
                    2 Domains eins für Französisch eins für Deutsch.
                    Bei den Franzosen bin ich recht sicher das ihnen eine voll Französische Seite mehr gefallen würde als eine mit Deutschen geteilte. Das meinte ich mit dem Eigensinn der Menschen.

                    Eine Webseite muss dem User gefallen, ihm was abzunehmen,...
                    24.03.2019, 16:13
                  • Fragman
                    Ausgabe als Link
                    Hallo...

                    habe eine Datenbank mit Songtexten mit Ausgabe auf einer Webseite. Es gibt eine Vorauswahl der Titel nach Buchstaben.
                    Angezeigt wird dann eine Liste der Titel und des Interpreten.
                    Wie mache ich aus der Ausgabe der Titel einen Link der dann den entsprechenden Text anzeigt??...
                    21.03.2019, 21:05
                  • Sempervivum
                    Antwort auf Ausgabe als Link
                    Danke für den Hinweis, PHP und Datenbanken sind weniger meine Stärke. Wenn man eine ID verwendet, wird das Ganze dann wesentlich einfacher.
                    24.03.2019, 14:22
                  • Rudolfo
                    Antwort auf Online Speicherplatz / Storage / Cloud gesucht!
                    Also ich bin auch ein überzeugter Cloud-Nutzer. Deswegen würde ich dir die Ratgeber von G Data empfehlen. Dieser zeigt alle Angebote, wichtige Information und erklärt auch ein paar Hintergründe. Ich bin selber auch durch den Ratgeber auf die Option der Cloud aufmerksam geworden und er hat mich überzeugt....
                    ☁ Fotos, Videos, Dokumente: Einfach in die Cloud laden und teilen.☀ Wir zeigen Ihnen, wie sie funktioniert und wie im Cloud-Speicher alles sicher bleibt! ☁
                    24.03.2019, 14:20
                  Lädt...
                  X