Beiträge von Sempervivum

Sempervivum · Vor 15 Stunden

Zitat

Das ganze habe ich mit multer realisiert.

Da muss ich jetzt passen, weil ich keine Kenntnisse habe, was node.js und multer betrifft. In jedem Fall brauchst Du die URL des Bildes, um es in dem Container anzeigen zu können. Da diese wahrscheinlich dynamisch ist, d. h. sich von Bild zu Bild ändert, muss es einen Weg geben, sie vom Server-Skript zurück zu bekommen.

Sicher findet sich jemand, der dich bei multer unterstützen kann.

Sempervivum · Vor 15 Stunden

PS: Da habe ich u. U. etwas zu kurz gedacht: Du hast ja ein Formular mit einem Submit und willst das Bild auch nach dem Abschicken des Formulars anzeigen. In dem Fall musst Du auf das Bild zurück greifen, das dann auf dem Server gespeichert wurde. Aber u. U. bist Du noch gar nicht so weit, denn Du schreibst:

Zitat

Momentan habe ich auch einen Webserver aufgebaut. Brauche ich den Server um die Bilder hochzuladen?

Ja, Du brauchst den Webserver und ein PHP-Skript um das hochgeladene Bild auf dem Server zu speichern.

Sempervivum · Vor 15 Stunden

Dann dürfte es sehr einfach sein:

Code

<script>
var loadFile = function(event) {
var reader = new FileReader();
reader.onload = function(){
var output = document.getElementById('output'),
// den zweiten Container fuer die Anzeige des Bildes bereitstellen
output2 = document.getElementById('page-content');
output.src = reader.result;
output.style.height = "100px";
output.style.width = "auto";
// img-Tag mit dem gelesenen Bild in den zweiten Container eintragen
output2.innerHTML += '<img src="' + reader.result + '">';
};
reader.readAsDataURL(event.target.files[0]);
};
</script>

Alles anzeigen

Ungetestet, aber eigentlich kann da nicht viel schief gehen.

Sempervivum · Vor 17 Stunden

Zitat

Momentan kann ich nämlich das Bild, welches ich auswähle im Server speichern und das Bild als preview anzeigen lassen.

Wenn Du das Bild als Preview anzeigst, hast Du ja sicher eine Quelle und zeigst es in einem img-Tag an. Mit derselben Quelle und einem weiteren img-Tag kannst Du es dann auch in dem div-Container anzeigen. Etwa so:

Code

document.getElementById('id-des-div').innerHTML = '<img src="' + deineBildquelle + '">';

Wenn Du damit nicht zum Ziel kommst, dann poste deinen Code oder besser die URL der Seite, wenn Du sie online hast.

Sempervivum · Vor 20 Stunden

Zitat

es scheint als könnte man es nur in Verbindung mit einer echten Tabellenstruktur verwenden?

Das trifft zu. Ich habe jsGrid schon mehrmals eingesetzt und wollte es dir auf den ersten Blick empfehlen, aber dann hatte ich gesehen, dass deine Struktur nicht tabellenförmig ist.

Edit: Genau genommen weniger die Struktur der Daten, die ist sicher tabellenförmig, sondern die Darstellung.

Sempervivum · Donnerstag, 09:52

Das wird z. B. hier beschrieben, wie es geht:

https://wiki.selfhtml.org/wiki…imedia_und_Grafiken/audio

Sempervivum · Mittwoch, 09:54

Das sollte kein Problem sein, wenn Du zunächst das Ergebnis der Datenbankabfrage komplett erzeugst, etwa bei PDO mit fetchAll und dann die Indizes vertauschst:

Code

$result = [
['a1', 'a2', 'a3', 'a4'],
['b1', 'b2', 'b3', 'b4'],
['c1', 'c2', 'c3', 'c4'],
];
var_dump($result);
// Ergebnis der Datenbankabfrage in $result
echo '<table>';
for ($i = 0; $i < count($result[0]); $i++) {
echo '<tr>';
for ($j = 0; $j < count($result); $j++) {
echo '<td>' . $result[$j][$i] . '</td>';
}
echo '</tr>';
}
echo '</table>';

Alles anzeigen

So getestet.

Sempervivum · 25. Mai 2020

Interessante Idee und man findet einige Anleitungen, wie man das machen kann. Ich fürchte nur, dass man dabei Zugriff auf den Inhalte des iFrame braucht, womit wir wieder dort wären, wo wir mit anderen Ansätzen auch waren: Dies wird durch die SOP blockiert.

Ich habe jedoch noch eine andere Idee: Du hattest da ja zwei HTML-Seiten, wo man die SPS visualisieren oder konfigurieren konnte. Wenn man davon den Quelltext analysiert, könnte man u. U. den Code herausziehen, um den Status direkt von der SPS auszulesen. Poste doch mal den HTML- und Javascript-Code der Visualisierungs-Seite. U. U. besser als PN weil man nicht weiß, ob der Hersteller damit einverstanden ist, wenn man dies öffentlich macht.

Sempervivum · 23. Mai 2020

Dann wird es wohl nicht anders gehen, als dass einer der neu dazukommenden eine Lösung postet, die ready-for-copy&paste ist. Forenregeln und Eigeninitiative - egal.

Sempervivum · 23. Mai 2020

Zitat

Was generell noch fehlt:

- Das ganze Bild soll ein Hyperlink sind

- Das Bild soll sich ähnlich wie der Text skalieren

Zitat

ich habe das jetzt nochmal versucht und es kommt echt nichts gewolltes bei raus. Das ist echt schade, weil ich bei google auch nichts konkretes finde

Wenn Du nichts von dem umsetzt, was ich dir bisher geschrieben habe, kann es auch nicht funktionieren.

Sempervivum · 22. Mai 2020

Das ist jetzt ein generelles Problem, dass das Seitenverhältnis des Bildes nicht mit dem der Zelle übereinstimmt. Da hast Du zwei Möglichkeiten:

1. Akzeptieren, dass seitlich oder oben und unten leerer Raum entsteht

oder

2. Akzeptieren, dass vom Bild etwas abgeschnitten wird, damit es den Container vollständig ausfüllt.

Einstellen kannst Du das mit object-fit:

https://wiki.selfhtml.org/wiki…haften/Anzeige/object-fit

Sempervivum · 22. Mai 2020

Ich habe jetzt dieses CSS hinzu gefügt:

Code

#grid-container figure {
margin: 0;
padding: 0;
position: relative;
}
#grid-container figure figcaption {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

Alles anzeigen

um den Text auf das Bild zu legen. Sieht jetzt bei mir so aus:

grid-centered-figcaption.png

Das blaue ist das figure-Element. Wie Du siehst, ist die Box mit dem Text darin zentriert. Nur das Bild füllt das figure nicht aus.

Sempervivum · 22. Mai 2020

Ja, das mit Row und Column konnte ich leider nicht testen, weil mir das vollständige Grid fehlt. Hast Du das online, dass man es sich live ansehen kann?

Sempervivum · 22. Mai 2020

Dafür habe ich vor einiger Zeit eine Demo gemacht, dort kannst Du ablesen, wie es geht:

https://jsfiddle.net/Sempervivum/k84scz1a/25/

Die zweite Lösung passt auf deinen Fall.

Sempervivum · 22. Mai 2020

Zitat

das Bild füllt mehr als den vorgegebenen Bereich aus.

So passt sich das Bild an den verfügbaren Platz an:

HTML

<!DOCTYPE html>
<html lang="de">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<title>Zoom image</title>
<meta name="viewport" content="initial-scale=1.0, width=device-width">
<style>
#grid-container {
display: grid;
}
#dasTeamBild {
filter: grayscale(50%);
z-index: 1;
}
#dasTeam:hover+a>#dasTeamBild {
filter: blur(2px);
overflow: hidden;
transition-duration: 0.2s;
transform: scale(1.1);
z-index: -20;
}
#dasTeam {
font-family: 'Raleway', sans-serif;
font-size: 5vw;
color: white;
border: 2px solid black;
z-index: 4;
overflow: hidden;
}
#grid-item-team {
grid-column-start: 1;
grid-column-end: 4;
grid-row-start: 11;
grid-row-end: 19;
}
#grid-container figure a {
display: inline-block;
overflow: hidden;
width: 100%;
height: auto;
}
#grid-container figure a img {
width: 100%;
height: auto;
}
</style>
</head>
<body>
<div id="grid-container">
<figure id="grid-item-team">
<figcaption id="dasTeam"> Fertige Projekte</figcaption>
<a href="test20.html">
<img id="dasTeamBild" src="images/catimage13.png" alt="alternativer_text">
</a>
</figure>
</div>
</body>
</html>

Alles anzeigen

Sempervivum · 22. Mai 2020

Zitat

Es funktioniert nicht, also die figcaption wird über dem Bild angezeigt ... Ich möchte die figcaption ja vor dem Bild haben bzw auf dem Bild

Anscheinend möchtest Du, dass der Text das Bild überdeckt?

Sempervivum · 22. Mai 2020

Ach so, an den Link hatte ich gar nicht mehr gedacht: Statt des div ein a-href-Tag verwenden:

Code

<div id="grid-container">
<figure id="grid-item-team">
<figcaption id="dasTeam"> Fertige Projekte</figcaption>
<a href="das-linkziel.html">
<img id="dasTeamBild" src="images/catimage13.png" alt="alternativer_text">
</a>
</figure>
</div>

Und das CSS natürlich auch anpassen:

Code

#grid-container {
display: grid;
}
#dasTeamBild {
filter: grayscale(50%);
z-index: 1;
}
#dasTeam:hover+a>#dasTeamBild {
filter: blur(2px);
overflow: hidden;
transition-duration: 0.2s;
transform: scale(1.1);
z-index: -20;
}
#dasTeam {
font-family: 'Raleway', sans-serif;
font-size: 5vw;
color: white;
border: 2px solid black;
z-index: 4;
overflow: hidden;
}
#grid-item-team {
grid-column-start: 1;
grid-column-end: 4;
grid-row-start: 11;
grid-row-end: 19;
}
#grid-container figure a {
overflow: hidden;
}

Alles anzeigen

Sempervivum · 22. Mai 2020

Ich danke auch. Mir ist noch nicht ganz klar, wie Du dir das vorstellst: Text und Bild sollen in einer Zelle des Grid stehen? Ich würde eher empfehlen, sie in verschiedenen Zellen anzuordnen, dann würde das ganze übersichtlicher. Oder alternativ die Zelle als figure-Tag und darin den Text als figcaption und das Bild in einem extra Container, damit das overflow: hidden; wirksam werden kann. Etwa so:

Code

#grid-container {
display: grid;
}
#dasTeamBild {
filter: grayscale(50%);
z-index: 1;
}
#dasTeam:hover+div>#dasTeamBild {
filter: blur(2px);
overflow: hidden;
transition-duration: 0.2s;
transform: scale(1.1);
z-index: -20;
}
#dasTeam {
font-family: 'Raleway', sans-serif;
font-size: 5vw;
color: white;
border: 2px solid black;
z-index: 4;
overflow: hidden;
}
#grid-item-team {
grid-column-start: 1;
grid-column-end: 4;
grid-row-start: 11;
grid-row-end: 19;
}
#grid-container figure div {
overflow: hidden;
}

Alles anzeigen

Code

<div id="grid-container">
<figure id="grid-item-team">
<figcaption id="dasTeam"> Fertige Projekte</figcaption>
<div>
<img id="dasTeamBild" src="images/catimage13.png" alt="alternativer_text">
</div>
</figure>
</div>

Sempervivum · 22. Mai 2020

Leider finde ich die IDs aus deinem CSS in deinem HTML nicht wieder.

Sempervivum · 22. Mai 2020

Ein Foto verwenden?

Beiträge von Sempervivum

Bilder und Texte in Body hochladen

Bilder und Texte in Body hochladen

Bilder und Texte in Body hochladen

Bilder und Texte in Body hochladen

Frage zur UX Entscheidung

Frage zu Musik

Tabellenausgaben nebeneinander

HTML-Seite um auf Webvisualisierungsseiten von zwei SPS zu wechseln

CSS Grid - Images mit Text und Zoom bei hover

CSS Grid - Images mit Text und Zoom bei hover

CSS Grid - Images mit Text und Zoom bei hover

CSS Grid - Images mit Text und Zoom bei hover

CSS Grid - Images mit Text und Zoom bei hover

CSS Grid - Images mit Text und Zoom bei hover

CSS Grid - Images mit Text und Zoom bei hover

CSS Grid - Images mit Text und Zoom bei hover

CSS Grid - Images mit Text und Zoom bei hover

CSS Grid - Images mit Text und Zoom bei hover

CSS Grid - Images mit Text und Zoom bei hover

Wie kann man den Mond realistischer gestalten?