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

Bild mit Maus verschieben, vergrössern und verkleinern

klwild

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>
Zum Vergrößern anklicken....

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

body {
position: relative;
}

#grid {
width: 2000px;
height: 2000px;
}
Zum Vergrößern anklicken....

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:
Das wundert mich, dass Du das schreibst, denn von den Empfehlungen in deinem früheren Thread hast Du das meiste nicht um gesetzt.
Zum Vergrößern anklicken....

Ich habe alle Empfehlungen, die funktioniert haben, implementiert. Habe ich noch etwas vergessen?
 
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>
Zum Vergrößern anklicken....

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 ">";
};
Zum Vergrößern anklicken....

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!
 
Habe das HTML umgestellt (localhost) ohne Datenbank Abfrage passen es dann aber später an. Die ImageMap ist jetzt obsolete.
 
Der erste Versuch ist fehlgeschlagen und es hat sich nichts getan und ich muss tiefer einsteigen
 
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:
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
Danke, kann ich mir die Arbeit sparen. Danke.
Sclero2004 schrieb:
</figure>
Zum Vergrößern anklicken....
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:
Zum Vergrößern anklicken....
... 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:
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
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>
Zum Vergrößern anklicken....

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

Gruss Klaus
 

Anhänge

  • mainpage2.png
    mainpage2.png
    194,1 KB · Aufrufe: 1
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
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.
 
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
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben