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.413   Beiträge: 428.240   Mitglieder: 27.798   Aktive Mitglieder: 69
                  Willkommen an unser neuestes Mitglied, planaigeist.

                  Online-Benutzer

                  Einklappen

                  195 Benutzer sind jetzt online. Registrierte Benutzer: 3, Gäste: 192.

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

                  Die neuesten Themen

                  Einklappen

                  • arnego2
                    Antwort auf Suche Filehoster
                    mega und hidive Mega (nz) komplett umsonst bis 5gb glaub ich....
                    Heute, 13:42
                  • andi656
                    Suche Filehoster
                    hallo,

                    welche Anbieter gibt es momentan die günstig oder sogar kostenlos ihren Dienst anbieten?
                    Ich bin da noch etwas ratlos, da ich sowas noch nie genutzt habe und bin daher über jeden Ratschlag dankbar....
                    Heute, 10:34
                  • Sempervivum
                    Antwort auf Zusätzliche fusszeile
                    Wenn Du also beide Boxen, #footer und #bereich, untereinander anzeigen willst, brauchst Du sie ja nur nacheinander in deine HTML-Seite einzufügen. Durch
                    Code:
                    display: flex;
                    flex-direction: column;
                    werden sie dann untereinander angeordnet. Woran scheiterst Du dabei denn?
                    BTW: float_center...
                    Gestern, 22:08
                  • föni
                    Antwort auf Zusätzliche fusszeile
                    Um die Codes auseinander zu halten, hab ich diese einfach anders benannt.

                    den...
                    HTML-Code:
                    #footer {
                        width: 95%;
                    ...hab ich ja bereits mit eingepackt. Es erschein aber nicht mal einen Rahmen oder sonst was... als wäre der Code nicht da...

                    Weiss da auch nicht mehr w...
                    Gestern, 21:01
                  • Sempervivum
                    Antwort auf Zusätzliche fusszeile
                    Wenn Du den Footer über (fast) die ganze Breite haben willst, sieht dies doch vernünftig aus:
                    Code:
                    #footer {  
                     width: 95%;
                    Ich bin nur ein wenig verwirrt, weil Du zunächst vom Footer schreibst und dann von #bereich? Soll diese Box zusätzlich zum Footer angezeigt werden?
                    Gestern, 19:39

                  Kostenlose Homepage bei Jimdo!

                  Einklappen

                  Jimdo

                  Die neuesten Beiträge

                  Einklappen

                  • andi656
                    Suche Filehoster
                    hallo,

                    welche Anbieter gibt es momentan die günstig oder sogar kostenlos ihren Dienst anbieten?
                    Ich bin da noch etwas ratlos, da ich sowas noch nie genutzt habe und bin daher über jeden Ratschlag dankbar....
                    Heute, 10:34
                  • arnego2
                    Antwort auf Suche Filehoster
                    mega und hidive Mega (nz) komplett umsonst bis 5gb glaub ich....
                    Heute, 13:42
                  • föni
                    Zusätzliche fusszeile
                    Hallo Leute

                    Ich hab eine html Seite am laufen mit folgendem Code:

                    HTML-Code:
                     <!DOCTYPE HTML>
                    <html lang="de">
                    <head>
                        <link rel="icon" href="bim/favicon.ico" type="image/x-icon" />
                    <title>x.ch</title>
                    ...
                    17.05.2019, 22:00
                  • Sempervivum
                    Antwort auf Zusätzliche fusszeile
                    Wenn Du also beide Boxen, #footer und #bereich, untereinander anzeigen willst, brauchst Du sie ja nur nacheinander in deine HTML-Seite einzufügen. Durch
                    Code:
                    display: flex;
                    flex-direction: column;
                    werden sie dann untereinander angeordnet. Woran scheiterst Du dabei denn?
                    BTW: float_center...
                    Gestern, 22:08
                  • föni
                    Antwort auf Zusätzliche fusszeile
                    Um die Codes auseinander zu halten, hab ich diese einfach anders benannt.

                    den...
                    HTML-Code:
                    #footer {
                        width: 95%;
                    ...hab ich ja bereits mit eingepackt. Es erschein aber nicht mal einen Rahmen oder sonst was... als wäre der Code nicht da...

                    Weiss da auch nicht mehr w...
                    Gestern, 21:01
                  • Sempervivum
                    Antwort auf Zusätzliche fusszeile
                    Wenn Du den Footer über (fast) die ganze Breite haben willst, sieht dies doch vernünftig aus:
                    Code:
                    #footer {  
                     width: 95%;
                    Ich bin nur ein wenig verwirrt, weil Du zunächst vom Footer schreibst und dann von #bereich? Soll diese Box zusätzlich zum Footer angezeigt werden?
                    Gestern, 19:39
                  • föni
                    Antwort auf Zusätzliche fusszeile
                    Vielen Dank für Deine hilfreiche Antwort.

                    Ich hab nun den Code wie folgt ergänzt und möchte eigentlich unten gerne auch die selbe box quer (ca. 95% breit) über die Seite haben. (wie im Bild oben)

                    HTML-Code:
                    #footer {
                    width: 95%;
                    min-height: 560px;
                    margin: 0 auto;
                    ...
                    Gestern, 19:07
                  • Sempervivum
                    Antwort auf Zusätzliche fusszeile
                    Dann versuche es mit...
                    Gestern, 07:27
                  • föni
                    Antwort auf Zusätzliche fusszeile
                    Die Fusszeile sollte normal in die Seite eingebaut werden und nicht immer fix zu sehen sein....
                    Gestern, 07:13
                  • Sempervivum
                    Antwort auf Zusätzliche fusszeile
                    Soll die Fußzeile denn ganz normal in die Seite eingebettet sein oder soll sie beim Scrollen fixiert sein? In jedem Fall ist float:left der falsche Weg. Wenn ersteres zutrifft, ist es wahrscheinlich schon ausreichend, wenn Du es weglässt und beim body flex-direction:column und align-items:center hinzu...
                    Gestern, 06:27
                  Lädt...
                  X