Bild mit Maus verschieben, vergrössern und verkleinern

Sclero2004 · 25 Juli 2023

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 · 26 Juli 2023

Danke, kann ich mir die Arbeit sparen. Danke.

Sclero2004 schrieb:
</figure>

Kopfsschuss

Sclero2004 schrieb:
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

msi · 26 Juli 2023

Du solltest zwischendurch auch mal in die Konsole des Brwoser sehen, da steht nämlich:

Laden fehlgeschlagen für das <script> mit der Quelle "https://hunderttausend-zuger-unternehmen.ch/wp-content/_mainpage/panzoom.js".

Sclero2004 · 26 Juli 2023

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 · 26 Juli 2023

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.

Sclero2004 · 26 Juli 2023

Kann man bestimmt, ich werde es mir ansehen ...

Sclero2004 · 26 Juli 2023

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

klwild · 4 August 2023

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"/>




<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

Sclero2004 · 4 August 2023

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 · 7 August 2023

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.

Sclero2004 · 7 August 2023

Wenn ich mir das hier ansehe:

https://hunderttausend-zuger-unternehmen.ch

kann ich sehr weit hinein zoomen, bis die Rechtecke ganz groß und verschwommen sind.

allerletzte Frage!

Daran glaube ich noch nicht

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 · 8 August 2023

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 · 8 August 2023

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 · 11 August 2023

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 · 11 August 2023

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

Bild mit Maus verschieben, vergrössern und verkleinern

Sclero2004

Mitglied

klwild

Neues Mitglied

Anhänge

msi

Mitglied

Sclero2004

Mitglied

klwild

Neues Mitglied

Anhänge

Sclero2004

Mitglied

Sclero2004

Mitglied

Anhänge

klwild

Neues Mitglied

Anhänge

Sclero2004

Mitglied

klwild

Neues Mitglied

Anhänge

Sclero2004

Mitglied

klwild

Neues Mitglied

Sclero2004

Mitglied

Sclero2004

Mitglied

klwild

Neues Mitglied

Anhänge

Neueste Beiträge