div/img mit Regler auf Bild scrollen

  • Guten Tag zusammen,

    allein euch das Problem zu erklären, stellt mich schon vor ein Problem ^^

    Ich habe zwei sehr lange Flächen, welche ich online als Bild darstellen muss (A: 9000x300px | B: 30.000x120px).

    A: Bei Bild A war das für mich kein Problem, da das in real eine gerade Fläche ist. Das Bild habe ich einfach in einen div mit horizontaler scrollbar gepackt.

    B: Mit Bild B würde ich das am liebsten genauso machen, allerdings hat Bild B in real eine Form wie eine Tartanbahn um einen Sportplatz. Hier würde ich gerne diese Form als kleines Bild unter dem div (wie in A) darstellen, und auf dieser Form hätte ich gerne einen "Positionsanzeiger", der sich im besten fall so verschieben lässt, oder mit Pfeilen drunter, Hauptsache man weiß wo ich bin.

    Ich hoffe ihr habt mein Problem verstanden, und könnt mir sagen wie ich so etwas hinbekomme, oder her bekomme? Ich denke ich bin mit diesem Problem aber generell bei JS richtig, oder?

    Liebe Grüße

    Edit: Theoretisch wäre es sogar besser, wenn man bei B wie bei A eine horizontale scrollbar hätte, aber eine "Minimap", die auf der Form anzeigt wo man ist. Sprich, die Steuerung nach wie vor über die scrollbar.

  • Das ist kein allzu großes Problem. Was meinst Du denn in diesem Zusammenhang mit "Bild"? Hast Du schon Grafiken von diesen Flächen bzw. bei B von der ovalen Bahn oder soll das erst modelliert werden?

    Häufig ist es hilfreich, wenn man weiß, in welchem Zusammenhang eine Aufgabe steht.

  • Eigentlich hatte ich diese Info weggelassen, weil ich dachte es kompliziert die Sache an sich ^^ Aber ich kann es natürlich mal sagen: Es geht um Werbung bzw Werbeplätze für Sponsoren auf einem Sportgelände.

    Bild A ist ein Zaun vor dem Gelände, der ist gerade, da ist die Darstellung kein Problem, damit der Sponsor gerade weiß wo er ist. Natürlich wäre es auch dort schön, eine Minimap zu haben.

    Bild B soll die Bandenwerbung im Stadion an sich werden. Wenn du möchtest kann ich dir mal den Entwurf zu Bild A schicken?

  • Zitat

    Wenn du möchtest kann ich dir mal den Entwurf zu Bild A schicken?

    Gern, poste es ruhig mal. Interessanter wäre allerdings B weil Du ja schreibst, dass die Lösung für A kein großes Problem ist. Bedeutet das, dass es sich um Grafiken handelt, die schon vorhanden sind bzw. sein werden, also jpg oder png, oder ... und wo nur noch das Scrolling bzw. die Positionsanzeigen hinzu kommen soll?

  • Ich habe noch ein wenig darüber nachgedacht und ich glaube, jetzt verstehe ich es besser: Das Bild B willst Du genau wie Bild a in einem scrollbaren Container anzeigen und zusätzlich möchtest Du zur Orientierung für den Benutzer solch eine Minimap unter dem großen Bild anzeigen, wo man auf dem Oval die Position des sichtbaren Ausschnittes erkennen kann?

  • Genau so ist es ;)


    Hier ist für Bild A der erste Versuch: http://

    Bild B wird nicht ganz so hoch, aber wesentlich länger. Es wäre schön wenn ich/wir/du das auch für Bild A hinbekommen würden. Nur hab ich da noch keine Ahnung wie ich das genau machen soll. Am liebsten würde ich das Stadion / Zaun Bild aus Google Maps oder einer OS-Quelle nehmen, und da diese Minimap drüber legen. Wie aufwendig ist das?

  • Guten Morgen und frohe Ostern!

    Erst mal klären, wie Du dir das mit dieser Minimap vorstellst: Eine ganz einfache Grafik kann man auf einfachem Wege mit HTML und CSS erzeugen, ich habe hier mal eine Demo gemacht, zunächst ohne Slider und Animation:

    https://jsfiddle.net/Sempervivum/yon4qfxc/2/

    Der grüne Punkt würde darin die Position angeben. U. U. müsste dieser etwas länglich sein, weil der Bildausschnitt je eine gewisse Breite hat. Für den Kreisbogen habe ich auch eine Demo gemacht:

    https://jsfiddle.net/Sempervivum/x4g06njk/

    Ich nehme an, wenn Du von Google Maps sprichst, stellst Du dir ein Satellitenbild vor. Dafür kenne ich als Quellen nur Google und Bing. Es gibt ja auch Openstreetmap aber das bietet, AFAIK, nur einfache Karten an. Technisch ist das auch kein Problem aber dann kommen die Lizenzfragen ins Spiel, u. U. braucht man einen Key und da bin ich jetzt nicht im Bilde wie der aktuelle Stand ist. Möglicher Weise ist es einfacher, wenn man ein statisches Bild in einem iFrame anzeigt.

  • Guten Morgen, und ebenfalls frohe Ostern!

    Mich ärgert gerade das mir dein erstes Beispiel nicht selber eingefallen ist. Soweit hätten meine Kenntnisse eigentlich gereicht, aber einfach den Rahmen eines div´s zu verwenden - so kreativ war ich nicht.

    Bei deinem zweitem Link bin ich allerdings komplett raus, aber das wäre in Kombination mit dem ersten Beispiel so ziemlich genau das was ich meinte. Aber kann man das dann auch an die Scrollbar eines div´s hängen?

    Kann man die Funktion von Link 2 mit der Grafik aus Link 1 kombinieren? Google Maps fällt als Grafik leider aus, das müsste man über die API machen, und ich glaube das ist viel zu aufwendig.

    Ist vielleicht etwas unhöflich zu fragen, aber ich tue es trotzdem mal: Könntest du mir das helfen fertig zu stellen? Gibt es hier dann eine Kaffeekasse oder sowas? Offensichtlich ist das für dich nicht so ein hexenwerk wie für mich^^

    Auf jeden Fall schon mal Danke Danke Danke für all deine Mühen bis hierhin.

  • Zitat

    Aber kann man das dann auch an die Scrollbar eines div´s hängen?

    Selbstverständlich, statt an das input-Event kann man das Javascript auch an das scroll-Event eines scrollbaren Containers hängen:

    https://jsfiddle.net/Sempervivum/o8ra72nk/3/

    Zitat

    Kann man die Funktion von Link 2 mit der Grafik aus Link 1 kombinieren?

    Selbstverständlich, man muss ja zu dem rechten Kreisbogen nur die schmalen Rechtecke oben und unten und den linken Kreisbogen hinzu fügen:

    https://jsfiddle.net/Sempervivum/w5Lpzgnc/1/

    Dann braucht es noch ein paar Fallunterscheidungen um je nach Scrollposition den Anzeiger in das richtige Element zu positionieren.

    Ich bin gern bereit, dich dabei zu unterstützen, kann ja einiges über d3.js dabei lernen. Aber erst Mal klären, ob das Beispiel in dem Fiddle oben deinen Anforderungen entspricht.

  • Guten Morgen!

    Hammer! Ich habe versucht die Position anzeigen zu lassen, indem ich bei d3.arc() einen Wert eingegeben habe. Aber der Positionsanzeiger ist (unabhängig vom Wert) extrem lang. Wie kann ich diesen variieren? Und: Ist es arg umständlich die "Startposition" noch zu ändern?

    Für das Rechteck brauche ich eigentlich keine Minimap. Das wäre zwar schön gewesen, aber ohne die screenshots von Google Maps ist das denke ich mehr Verwirrung als Hilfe :)

  • Zitat

    der Positionsanzeiger ist (unabhängig vom Wert) extrem lang. Wie kann ich diesen variieren?

    Die Länge des Anzeigers ist nicht durch einen festen Wert definiert sondern stellt sich proportional nach dem Seitenverhältnis des Bildes ein. D. h. seine Länge ist im Verhältnis zum Umfang des Ovals genau so groß wie der Schieber der Scrollbar im Verhältnis zu ihrer gesamten Breite, so dass genau der sichtbare Bereich des Bildes angezeigt wird. Mein Bild ist noch nicht besonders lang gestreckt, deshalb ist der Anzeiger relativ lang. Verwende ich ein Platzhalter-Bild mit der Größe, die Du früher angegeben hast, 30000x120, sieht es gleich ganz anders aus:

    https://jsfiddle.net/Sempervivum/pwhfv8xm/1/


    Die Startposition lässt sich relativ leicht ändern, indem man die Positionen pos1, pos2, pos3, pos4 anpasst. Ich werde auch dafür eine Demo machen. Wo möchtest Du die Startposition denn haben?

  • Das ist GENAU das, was ich brauche. Nur schaffe ich es nicht einzubinden. Hast du eine Ahnung woran das liegen könnte? Ich habs ja bis jetzt eigentlich nur kopiert :D


    Edit: Vielleicht zur besseren Fehlerbeschreibung: Die Minimap ist nicht sichtbar. Ich weiß nicht ob es damit zu tun hat, aber mir wird auch "ERROR: Parsing error: The keyword 'const' is reserved" ausgegeben.

  • Das konntest Du auch nicht wissen, weil es im jsfiddle ein wenig versteckt ist: Das Skript benutzt d3.js und das musst Du einbinden:

    Code
    1. <script src="https://d3js.org/d3.v6.min.js">

    Oben in dem head-Abschnitt.

    Und das Einbinden des Skriptes script.js nach dem HTML, vor dem schließenden </body>.

    (Die Wortwahl mit "pano" passt für deine Anwendung wahrscheinlich nicht mehr so, aber erst Mal sehen, dass es so funktioniert).


    Und dann musst Du das HTML genau so lassen, weil das Skript auf die Elemente mit der ID zugreift:

    Code
    1. <!-- <div class="zaun">
    2. <img src="zaun_cplatz_300px.jpg" alt="TV 1861 Amberg">
    3. </div> -->
    4. <div id="pano-outer">
    5. <img id="pano-img" src="zaun_cplatz_300px.jpg">
    6. </div>
    7. <svg width="600" height="300"></svg>
  • Guten Morgen! Das mit dem externen script hatte ich zwar vermutet, aber nachdem ich im Fiddle nichts gefunden habe, hab ich mich bei der Fehlersuche dort auf dem Holzweg gefühlt.

    Ich hab die Minimap mal integriert, die Farbe des grünen Positionanzeigers auf blau (Vereinsfarben) geändert und auch den Begriff "pano" ausgetauscht, und es sieht so aus, als hätte ich nichts kaputt gemacht ^^

    Vielen vielen vielen lieben Dank dir bei dieser massiven Hilfe! Ich werde die Tage vermutlich noch ein bisschen versuchen die größe der Minimap anzupassen, und sollte ich dort scheitern, dann weiß ich ja wo ich dich finde ;) Nochmals: Vielen vielen Dank!

    Edit: Wenn ich die Seite lade, funktioniert alles. Wenn ich sie dann erneut lade, ist der Positionsanzeiger weg. Woran kann das liegen?

  • Besser nicht editieren, weil man dann keine Nachricht bekommt, dass es etwas Neues gibt.


    Der Grund für den Fehler ist, dass das load-Event für das Bild schon feuert, bevor wir den Eventlistener dafür registriert haben. Dies kann passieren, wenn das Bild schon im Cache ist, denn dann geht das Laden sehr schnell.


    Lösung indem man das src-Attribut erst setzt, nachdem der Listener registriert wurde: