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

Bild mit Maus verschieben, vergrössern und verkleinern

klwild

Neues Mitglied
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
 

Anhänge

  • html-forum-mainpage.png
    html-forum-mainpage.png
    76,5 KB · Aufrufe: 1
  • html-forum-mainpage-smartphone.png
    html-forum-mainpage-smartphone.png
    1.007,6 KB · Aufrufe: 1
  • html-forum-wordpress-iframe-mainpage.png
    html-forum-wordpress-iframe-mainpage.png
    17,1 KB · Aufrufe: 1
Zuletzt bearbeitet:

Sclero2004

Mitglied
Vielleicht habe ich einen gravierenden Fehler gemacht, das es im Smartphone geht und auf der Desktopseite nicht.
Du hast zwar Fehler gemacht, aber daran liegt es nicht, dass es auf dem Desktop nicht geht. Desktop und Mobile sind verschiedene Welten und auf dem Mobile wird das Panning und Zooming unterstützt, auf dem Desktop jedoch nicht.

Ich bin für jeden Vorschlag dankbar.
Das wundert mich, dass Du das schreibst, denn von den Empfehlungen in deinem früheren Thread hast Du das meiste nicht um gesetzt.
 

klwild

Neues Mitglied
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?
 

Sclero2004

Mitglied
Hier vermisse ich noch die Umsetzung:

1. Dieses usemap="“#gridmap“" im iframe-Tag macht zwar nichts kaputt, macht aber auch keinen Sinn.
2. Nach wie vor ist das Bild innerhalb der Links absolut positioniert und nicht das a-href-Tag. Es funktioniert zwar so, aber ist verwirrend, wenn man sich das im Seiteninspektor ansieht: "Wo ist jetzt das a-href-Tag?"

Gravierend ist jedoch folgendes:
3. Du bist zwar auf die Empfehlung eingestiegen, das mit einer (angestaubten) Imagemap umzusetzen, hast das aber nicht konsequent durch gezogen. Sieh dir hier an, wie es richtig ist:
D. h. im map-Tag gibt es area-Tags, von diesen ist jedoch in deinem HTML nichts zu sehen. Statt dessen die a-href-Tags mit den absolut positionierten Bildern. Dann macht jedoch das map-Tag und der Verweis darauf im img-Tag keinen Sinn, Du kannst es genau so gut weg lassen. Sieht sich jemand anders, wie ich, das im Seiteninspektor an, ist ebenfalls die Verwirrung komplett, weil man zunächst die area-Tags sucht und fragt "Was ist das jetzt für eine Imagemap?".
Auf der anderen Seite ist es jedoch gut, dass Du nicht auf Imagemap umgestiegen bist, denn dann würdest Du mit dem Panning und Zooming, das Du jetzt einbauen willst, in arge Schwierigkeiten geraten, weil bei einem gezoomten Bild alle Verweise mit den area-Tags nicht mehr passen würden. Es hat schon seinen Grund, dass Selfhtml von einer Verwendung von Imagemap abrät und dies bestätigt das.
 
Zuletzt bearbeitet:

klwild

Neues Mitglied
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!
 

Sclero2004

Mitglied
Nicht weiter suchen, ich schrieb doch:
Auf der anderen Seite ist es jedoch gut, dass Du nicht auf Imagemap umgestiegen bist, denn dann würdest Du mit dem Panning und Zooming, das Du jetzt einbauen willst, in arge Schwierigkeiten geraten, weil bei einem gezoomten Bild alle Verweise mit den area-Tags nicht mehr passen würden. Es hat schon seinen Grund, dass Selfhtml von einer Verwendung von Imagemap abrät und dies bestätigt das.
Möglicher Weise hast Du das nicht gelesen, weil ich mein Posting editiert hatte.

Also die Imagemap vergessen, nur das HTML so umstellen:
Code:
<body>
    <figure>
        <img id="grid" src="images/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="100" height="40">
        </a>
        <a href="https://gutefrage.net" target="_blank" title="gutefrage.net - ... hier kannst du fragen!"
            style="position:absolute; left:700px; top:700px;">
            <img src="./images/gutefrage.net.png" width="200" height="30">
        </a>
        <a href="https://www.exsila.ch/" target="_blank" title="Tauschen statt kaufen.">
            <img src="./images/exsila.png" width="120" height="50" style="position:absolute; left:400px; top:400px;">
        </a>
        <a href="https://www.klaus-wilde.ch/" target="_blank" title="SES-Testfirma."
            style="position:absolute; left:2000px; top:7000px;">
            <img src="./images/ses-testfirma.png" width="100" height="100">
        </a>
    </figure>
</body>
 

klwild

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

klwild

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

Sclero2004

Mitglied
Wenn Du versucht hast, das Panning und Zooming einzubauen und es nicht funktioniert, dann lade es hoch, damit man es sich ansehen kann.
 

klwild

Neues Mitglied
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.
 
Zuletzt bearbeitet:

Sclero2004

Mitglied
Was meinst Du jetzt mit CanvasExample und DivExample?
Das Problem ist, dass das Mausrad auch ein Scrollen der Seite bewirkt, das kommt sich dann mit dem Zoomen durch das Script ins Gehege. Ich überlege, wie wir das beheben können.
 
Zuletzt bearbeitet:

Sclero2004

Mitglied
Ich fürchte, mit dem Canvas sind wir auf der falschen Spur. Lass das weg und wende das PanZoom direkt auf das figure an:
Code:
PanZoom("figure");
 

Sclero2004

Mitglied
Hast Du mein Posting #16 gelesen? Lass auch das div weg und wende das PanZoom direkt auf das figure an. So habe ich es selbst getestet und es hat funktioniert.

Ein weiteres Problem ist, dass das Javascript panzoom.min.js nicht gefunden wird. Untersuche mal, ob Du es überhaupt hoch geladen hast.
 

klwild

Neues Mitglied
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.
 

Anhänge

  • mainpage.png
    mainpage.png
    39 KB · Aufrufe: 2

Sclero2004

Mitglied
Er lädt das panzoom.js nicht, das liegt daran, dass bei dem schließenden figure-Tag darüber die spitze Klammer fehlt:
Code:
        </figure
    
  <script src="panzoom.js"></script>
  <script src="main.js"></script>

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:
Code:
  this.getScrollDirection = function (e) {
    if (e.ctrlKey) {
      e.preventDefault();
      var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
      if (delta < 0)
        self.applyScale(-self.increment, e.offsetX, e.offsetY)
      else
        self.applyScale(self.increment, e.offsetX, e.offsetY);
    }
  }

  ele.addEventListener('DOMMouseScroll', this.getScrollDirection, false);
  ele.addEventListener('wheel', this.getScrollDirection, false);
}

Damit funktioniert es bei mir einwandfrei.
 
Oben