• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Bild mit Maus verschieben, vergrössern und verkleinern

Sclero2004

Mitglied
Natürlich gibt es auch den Code dazu aber das ist ganz etwas Anderes: Es handelt sich um Leaflet, das wird dazu benutzt um Landkarten von Openstreetmap anzuzeigen, d. h. für deinen Zweck nicht geeignet. Und wenn Du in den Code hinein siehst, erkennst Du auch, dass es ein wenig kompliziert ist, um einiges komplizierter als das Skript, das wir jetzt haben. Besser bei diesem bleiben, wir sind ja kurz vor dem Ziel.
 

klwild

Neues Mitglied
Danke, kann ich mir die Arbeit sparen. Danke.
Kopfsschuss

Auch für das Problem dass sich Scrollen und Zoomen beim Mausrad ins Gehege kommen, habe ich eine Lösung: Wir zoomen mit gedrückter Strg-Taste. Ändere die letzten Zeilen in panzoom.js so:
... ich arbeite daran. Ich denke, mit der Erfahrung, wird das was!

Ich habe aber noch ein Problem, was gelöst werden muss. (Screenshot) - Langsam glaube ich das meine Kenntnisse schwinden oder ich mittlerweile zu verbohrt in das Problem bin.

M.b. Ich teste das immer mit: https://hunderttausend-zuger-unternehmen.ch/wp-content/_mainpage/mainpage.php
 

Anhänge

  • mainpage0.png
    mainpage0.png
    12,9 KB · Aufrufe: 2
Zuletzt bearbeitet:

Sclero2004

Mitglied
Immerhin passiert ja jetzt einiges beim Mausrad. Mache als nächstes die Änderung aus Posting #19 in panzoom.js. Dann kann man nur noch mit gedrückter Strg-Taste zoomen.
Und beim Panning ist wahrscheinlich das gleiche angebracht: Verschieben nur noch mit gedrückte Strg-Taste, dann bekommt man keine Probleme, dass der Klick auch den Link aufruft.
 

klwild

Neues Mitglied
Danke bereits gemacht. Funktioniert einwandfrei, leider sind meine Javascript Kenntnissen nicht so weit her.

Kann man auch einen Anfangswert des zooming machen? Das wäre toll. Danach kenne ich dann wieder aus wen JS erledigt ist.
 

Anhänge

  • mainpage0.png
    mainpage0.png
    550,2 KB · Aufrufe: 1

Sclero2004

Mitglied
Ich habe das jetzt implementiert mit dem Anfangswert für Zoom. Der Ursprung, "origin", dabei ist das Zentrum des Bildes, daher rutschten unsere drei Testlinks zunächst aus dem Fenster. Ich habe es jetzt erst Mal so eingerichtet, dass die linke obere Ecke beim Einstellen des Anfangswertes fixiert ist. Du musst dann dieses Javascript verwenden:
Code:
        const
            // Anfangswert für Zoom:
            scale = 6,
            // Umschließende Box des figure-Elementes
            // ermitteln, damit Höhe und Breite zur Verfügung
            // stehen:
            ele = document.querySelector('figure'),
            box = ele.getBoundingClientRect(),
            // Verschiebung berechnen, mit der das Bild
            // an der linken oberen Ecke fixiert ist:
            transX = box.width * (scale - 1) / 2,
            transY = box.height * (scale - 1) / 2;
        PanZoom("figure", {
            initMatrix: 'matrix(' + scale + ', 0, 0, ' + scale + ', ' + transX + ', ' + transY + ')',
            // min/max scale
            minScale: 0.1,
            maxScale: 8,
            // increment step
            increment: 0.05,
            // whether to zoom linearly when using increment
            liner: false
        });
Ich musste leider auch im panzoom.js ändern, das hänge ich mal an, die Endung habe ich auf "txt" geändert.

Übrigens, dieses riesengroße Bild ist eine Herausforderung für den Browser, meiner ist ein paar Mal wegen Speichermangel abgestürzt :oops:
 

Anhänge

  • panzoom-strg-init.txt
    4,1 KB · Aufrufe: 2

klwild

Neues Mitglied
Hallo Ulrich

Ich bin wieder zurück zur <figure> und panzoom Version zurückgegangen. Alles andere war schlimmer!

Ich habe alles von Thread #27 eingebaut und das Bild grid.png viel kleiner gemacht, aber mit der gleichen Pixel Grösse.

Der aktuelle Code sieht nun so aus:

<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0 user-scalable=yes maximum-scale=2">

<link rel="stylesheet" href="main.css" type="text/css"/>

<!--<script type="text/javascript" src="panzoom.js"></script>-->
<!--<script type="text/javascript" src="main.js"></script>-->

<title>Hunderttausend Zuger Unternehmen</title>
</head>
<body>

<figure class="panzoom" style="border: 1px solid black; background-color: white;">
<img id="grid" src="grid.png" usemap="#grid">

<a href='https://www.murer-reisen.ch' target='_blank' style='position:absolute; left:200px; top:200px;' title='Wir reisen nicht, um dem Leben zu entfliehen, sondern damit uns das Leben nicht entflieht.'><img src='./images/murer-reisen.png' width='100px' height='40px'></a><a href='https://gutefrage.net' target='_blank' style='position:absolute; left:7000px; top:8000px;' title='gutefrage.net - ... hier kannst du fragen!'><img src='./images/gutefrage.net.png' width='200px' height='30px'></a><a href='https://www.exsila.ch/' target='_blank' style='position:absolute; left:400px; top:400px;' title='Tauschen statt kaufen.'><img src='./images/exsila.png' width='120px' height='50px'></a><a href='https://www.evz.ch/' target='_blank' style='position:absolute; left:6000px; top:3000px;' title='Zäme für Zug.'><img src='./images/evz-zug.png' width='120px' height='50px'></a>
</figure>

<script src="panzoom.js"></script>
<script src="main.js"></script>

</body>
</html>

Leider werden nur zwei Bilder angezeigt, obwohl mehrere definiert sind.

Gruss Klaus
 

Anhänge

  • mainpage2.png
    mainpage2.png
    194,1 KB · Aufrufe: 1

Sclero2004

Mitglied
Guten Morgen Klaus,
Du hast das Bild auf 2000px x 2000px herunter skaliert (Zeile 5 in main.css), deshalb liegen die Positionen der Links, die Du nicht findest, weit außerhalb.

Ich bin wieder zurück zur <figure> und panzoom Version zurückgegangen. Alles andere war schlimmer!
Gute Entscheidung. Auf der einen Seite muss man manchmal den Mut haben, etwas aufzugeben, wenn es klar ist, dass man in der Sackgasse ist, aber häufig bringt es nicht weiter, bei einer kleinen Schwierigkeit zu einem neuen Skript umzuschwenken. Panning und Zooming funktionieren ja einwandfrei mit gedrückter Strg-Taste.
 

klwild

Neues Mitglied
Danke. Das hat funktioniert.

Letzte, allerletzte Frage! Was zoomen bedeute, ist mir klar, aber kann man das gezoomte Bild nicht grösser anzeigen oder geht das gar nicht. So käme ziemlich nah an mein Ziel, dass man wenigstens von den kleinen Bildern etwas sieht.

Ansonsten <figure> mit panzoom perfekt für mein vorhaben.
 

Anhänge

  • mainpage.png
    mainpage.png
    35,3 KB · Aufrufe: 1

Sclero2004

Mitglied
Wenn ich mir das hier ansehe:
kann ich sehr weit hinein zoomen, bis die Rechtecke ganz groß und verschwommen sind.

allerletzte Frage!
Daran glaube ich noch nicht :wink: Wir hatten ja fest gestellt, dass das so nicht so sehr benutzerfreundlich ist weil es schwer ist, ein bestimmtes Unternehmen aufzufinden. Was ich mir vorstellen könnte: Ein Suchfeld wo man einige Buchstaben eingibt und dann kommt eine Liste mit Unternehmen, die passen. Klickt man drauf, wird die Stelle im Raster angefahren und groß gezoomt, so dass das Rechteck des Unternehmens gut sichtbar ist.
 

klwild

Neues Mitglied
Ist es nicht möglich das volle Bild mit allen anzeigen anzuzeigen, danach kann man dann zoome oder was auch immer machen. Damit wäre die Benutzer Freundlichkeit "TOP", was dann die User machen ist Ihre Sache.
 

Sclero2004

Mitglied
Klar kann man das machen, aber dann kann man ja gar nichts erkennen. Aber wenn Du es so möchtest, zeige ich es dir. Aber heute nicht mehr.
 

Sclero2004

Mitglied
Guten Morgen Klaus,
das ist ein wenig komplizierter und ich war die ganze Zeit mit anderen Dingen beschäftigt, deshalb konnte ich dies noch nicht erledigen. Ich hoffe aber, dass ich es bald angehen kann.
 

klwild

Neues Mitglied
Danke Ulrich. Du bist ja nicht mein privater Programmierer und ich werde das gesamte Projekt einstampfen.
 

Anhänge

  • wartungsmodus2.png
    wartungsmodus2.png
    730,6 KB · Aufrufe: 3
Oben