Bild mit Maus verschieben, vergrössern und verkleinern

klwild · 21 Juli 2023

Hallo zusammen

Es geht um meine Seite: https:\\hunderttausend-zuger-unternehmen.ch bei der ich nach einiger Entwicklungsarbeit fast alles zusammen habe.

ToDo ist noch:

1. Auf dem Smartphone kann ich das Bild verschieben und das Verhältnis bleibt bestehen. Auf dem Desktop geht das verschieben nicht.
2. Auf dem Smartphone kann ich das Bild vergrössern und verkleinern und das Seitenverhältnis bleibt bestehen.

Der Aufbau der Webseite ist in WordPress gemacht und das Management zu vereinfachen und die Mainpage ist ein eingebundener iFrame aus WordPress heraus.

Die mainpage.php hat folgenden Aufbau:

<!doctype html>
<html lang="en">
<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" id="main-css" href="main.css" type="text/css"/>

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

<center>
<img id="grid" src="grid.png" usemap="#grid">
</center>

<map name="grid">

<?php
$mysqli = new mysqli("localhost", "root", "", "hunderttausend-zuger-unternehmen");
if ($mysqli->connect_errno) {
die("Verbindung fehlgeschlagen: " . $mysqli->connect_error);
}

$adds = array();

$sql = "SELECT id,
status,
name,
slogan,
link,
image,
posX, posY,
width,
height
FROM htzu_adds WHERE id > 0 AND status = 'A' ORDER BY id ASC";

$result = $mysqli->query($sql);
foreach ($result as $row) {
$adds[] = array($row["id"], $row["status"], $row["name"], $row["slogan"], $row["link"], $row["image"], $row["posX"], $row["posY"], $row["width"], $row["height"]);
};

$i = 0; // Performance: in foreach Zeilen generieren!
for($i=0; $i<count($adds); $i++) {
echo "<a href='".$adds[$i][4]."' target='_blank' title='".$adds[$i][3]."' />";
echo "<img src='".$adds[$i][5]."' width='".$adds[$i][8]."' height='".$adds[$i][9]."' style='position:absolute; left:".$adds[$i][6]."px; top:".$adds[$i][7]."px;' />";
echo "</a>";
};

$mysqli->close();

?>

</map>

</body>
</html>

... und das main.css sieht so aus:

body {
position: relative;
}

#grid {
width: 2000px;
height: 2000px;
}

Vielleicht habe ich einen gravierenden Fehler gemacht, das es im Smartphone geht und auf der Desktopseite nicht.

Ich bin für jeden Vorschlag dankbar.

Gruss Klaus

klwild · 22 Juli 2023

Das wundert mich, dass Du das schreibst, denn von den Empfehlungen in deinem früheren Thread hast Du das meiste nicht um gesetzt.

Ich habe alle Empfehlungen, die funktioniert haben, implementiert. Habe ich noch etwas vergessen?

klwild · 22 Juli 2023

Hallo sclero2004

Ich habe das "gridmap" aus dem iFrame Aufruf entfernt:

<center>
<iframe src="https://localhost/hunderttausend-zuger-unternehmen.ch/wp-content/_mainpage/mainpage.php" width="10000" height="10000" scrolling="yes" loading="auto" frameborder="1"></iframe>
</center>

und habe die Imagemap folgendermassen:

$i = 0; // Performance: in foreach Zeilen generieren!
for($i=0; $i<count($adds); $i++) {
echo "<area shape='rect' coords='".$adds[$i][6].",".$adds[$i][7].",".$adds[$i][6]+$adds[$i][8].",".$adds[$i][7]+$adds[$i][9]."' ";
echo "href='".$adds[$i][4]."' target=_blank ";
echo "title='".$adds[$i][3]."'";
echo ">";
};

umgesetzt, nur jetzt gibt es die Images nicht mehr zu sehen. Das Wiki von selfHTML sag aber das ein Image für das <aera> nicht gibt. Was nun? Ich suche aber weiter!

klwild · 22 Juli 2023

Habe das HTML umgestellt (localhost) ohne Datenbank Abfrage passen es dann aber später an. Die ImageMap ist jetzt obsolete.

klwild · 22 Juli 2023

Habe die statische Datei mainpage.php auf: https://hunderttausend-zuger-unternehmen.ch/ hochgeladen.

klwild · 23 Juli 2023

Der erste Versuch ist fehlgeschlagen und es hat sich nichts getan und ich muss tiefer einsteigen

klwild · 25 Juli 2023

Habe mal die mainpage.php hochgeladen. Habe das Beispiel von CanvasExample versucht, aber ich denke das DivExample wäre besser, aber erstmal kannst du schauen.

klwild · 25 Juli 2023

Sclero2004 schrieb:
CanvasExample und DivExample

Das sind die mitgelieferten Demos

War nicht besser. Kannst mal schauen, das ist die Div Version

klwild · 25 Juli 2023

Ups, das mit dem .min.js ist mir durch die Finger gerutscht

Habe das DIV jetzt weggelassen und alles ins FIGURE geschrieben.

Was mich wundert ist, dass, wenn ich die Maus länger auf einen Punkt halte, das Gitter mit dem Sperrzeichen kommt.

klwild · 25 Juli 2023

Ich habe etwas gefunden, was genau so funktioniert, wie es möchte. Es hat bereits jemand gemacht, also muss es auch den Code dazu geben!

https://commenthol.github.io/leaflet-rastercoords/example/index.html

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

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.

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

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.

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.

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

Neues Mitglied

Anhänge

Neues Mitglied

Neues Mitglied

Neues Mitglied

Neues Mitglied

Neues Mitglied

Neues Mitglied

Neues Mitglied

Neues Mitglied

Anhänge

Neues Mitglied

Neues Mitglied

Anhänge

Aktives Mitglied

Neues Mitglied

Anhänge

Neues Mitglied

Anhänge

Neues Mitglied

Anhänge

Neues Mitglied

Neues Mitglied

Anhänge