per Button 2 Bilder in 2 <div > einfügen

super47 · 9. Dezember 2020

Hallo Zusammen,

seit Tagen fummel ich da rum:)

ich will 2 bilder in 2 div anzeigen ...............vorbelegt sind jeweils ein bild.

mit zwei Button will ich jeweils bild 1 oder bild 2 durch andere Bilder ersetzen.

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>forum html-seminar</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<style>
#bild_1 {
float:left;
background-color: #FFFF00;
border: thick solid #0033FF;
height: 100px;
width: 60px;
}
#bild_2 {
float:right;
background-color: #FF3333;
border: thick solid #0033FF;
height: 100px;
width: 60px;
}
</style>
<body>
<input name="bild_1" type="button" value="Bild 1">
<input name="bild_2" type="button" value="Bild 2">
</br>
<div id=bild_1>
<img src="PNG/E_01.png">
</div>
<div id=bild_2>
<img src="PNG/H_02.png">
</div>
</body>
</html>

Alles anzeigen

Bild 1 in DIV 1 = Karo Ass Bild 2 in DIV 2 = Herz Bauer (vorbelegt beim Seitenstart)

durch klicken der button soll jeweils ein anders Bild in die DIV eingefuegt werden.

und dauerhaft bleiben auch bei reload der seite .

ich habe mit formular javascript und PHP versucht , aber ich finde da den weg nicht.

wuerde mir bitte jemand meine code erweitern abändern etc , so dass das script funktioniert.

bitte keine link .....lies da oder da , ich google seit tagen und finde bzw kapiere nichts

mit 74 Jahren bin nimmer so fit wie schon mal

danke gruss roland

PS: ich habe mir fast alles mit den DVD von hier angeeignet

Sempervivum · 9. Dezember 2020

Da ist man jetzt aber in einer Zwickmühle, weil die Forenregeln fordern, dass man nicht zu viele fertige Lösungen postet.

Ich mache mal einen Kompromiss und zeige dir, wie Du das Bild mit Javascript tauschen kannst.

Zunächst trage beim img-Tag das andere Bild als data-Attribut ein:

Code

<img class="changeable" src="PNG/E_01.png" data-other-img="PNG/E_02.png">
<img class="changeable" src="PNG/H_02.png" data-other-img="PNG/H_01.png">
<script>
// Jetzt tausche ich die Bilder aus
const images = document.getElementsByClassName('changeable');
for (let i = 0; i < images.length; i++) {
// Aktuelles Bild bereit stellen
let theimg = images[i];
theimg.src = theimg.dataset.otherImg;
}
</script>

Alles anzeigen

Wie Du das Ganze jetzt durch einen Buttonclick machen kannst, dafür gibt es hier einen Einstieg:

https://www.javascript-kurs.de…ript-addEventListener.htm

Versuche, dich mit addEventListener vertraut zu machen und den Code zu erweitern.

super47 · 9. Dezember 2020

Hi danke,

Code

<? if (isset($_POST['druecken'] )) {?>
<style type="text/css">
.button
{
}
</style>
<?
echo '<div id="zentrum" align="center">';
echo $_GET['erg_8']."</br>";
echo '</div>';
echo "<tr>
<td><img src='PNG/$_GET[gedrueckt1]'></td>
<td><img src='PNG/$_GET[gedrueckt2]'></td>
</tr>";
}else{
echo "<tr>
<td><img src='PNG/$_GET[stock1]'></td>
<td><img src='PNG/$_GET[stock2]'></td>
</tr>
";
}

Alles anzeigen

so hatte ich das geloest .....aber beim reload sieht man wieder die Stock Bilder, statt die gedrueckt Bilder.

http://www.net-skat.de/zocker/…%20KD%20PA&geber=Lizzy-sr

Zitat

rechts unten submitbutton [druecken] wechselt oben die bilder,

in der mitte submitbutton [1 2 oder 3] lädt ander bilder in den div in der mitte.
oben werden aber wieder kreuz 7 und Karo bauer angezeigt.
beim seiten neu laden oder aktualisieren ist wieder das gleiche .....immer der alte Zustand wieder.

ich kann nur funktionierenden code nachvollziehen. ??

drum habe ich ja erwähnt. dass irgendwelche links nichts bringen !!

da koennten wir jetzt umfangreich und tagelang diskutieren ...

eingesetzt woll das in einer umfangreichen Anwendung.

Hier habe ich das so gehalten dass das etwa in paar zeilen erledigt ist.

ich werd jemand suchen der das gegen bezahlung erledigt.

gruss roland

PS: bin aber schon leicht sauer !

m.scatello · 9. Dezember 2020

super47 schrieb:

.aber beim reload sieht man wieder die Stock Bilder

Wenn du das per PHP lösen willst, musst du dir in einer Session merken, dass die Bilder getauscht wurden.

Beispiel:

PHP

<?php
session_start();
if (isset($_POST['druecken']) && ! isset($_SESSION['getauscht']))
{
$_SESSION['getauscht'] = true;
// Bilder nach dem Klick
}
else
{
// Bilder vor dem Klick
}
?>

Alles anzeigen

super47 · 9. Dezember 2020

Hi

ich wusste da war was mit session, aber halt nicht obs hilft ........abe so ist das ja einfach

ich fummel das mal rein .

danke , das Leben ist lebenswert

gruss roland

super47 · 10. Dezember 2020

Hi ich (die Nervensäge) bins nochmal.

Beitrag scatello (visuell)

PHP

<?php session_start();
echo '<form action="" method="post" name="test">';
echo "</br>";
print_r($_POST); #beim druecken GET-Variablen
echo "</br>";
print_r($_SESSION); #beim druecken GET-Variablen
echo "</br>";
echo '<input name="druecken" type="submit" value="Tauschen">';
echo '<input name="testen" type="submit"value="Seite Neu Laden [F5]">';
if (isset($_POST['druecken']) && ! isset($_SESSION['getauscht'])) {
$_SESSION['getauscht'] = true;
}
if ($_SESSION['getauscht'] == true) {
echo '</br>// Bild getauscht<img src="PNG/P_04.png">';
}else{
echo '</br>// Bild beim Start <img src="PNG/E_01.png">' ;
}
echo '</form>';
?>

Alles anzeigen

so habe ich jetzt den CODE zum funktionieren gebracht

Zitat

if ($_SESSION['getauscht'] == true) hat da gefehlt ( oder als bekannt vorrausgesetzt )

ich bin da boese auf dem schlauch gestanden.

ich wollte das mit zwei formulare loesen aber ich habe da kein Land gesehen

es würde micht aber totzdem interessieren ob das mit zwei formulare geht anstatt mit session

jetzt kann ich endlich an meinem Projekt weitermachen, da ist noch genug kompliziertes zu lösen

Danke nochmal , auch an Sempervivium

gruss roland Alias super47

m.scatello · 10. Dezember 2020

super47 schrieb:

so habe ich jetzt den CODE zum funktionieren gebrach

Der aber nicht gerade schön ist

PHP

<?php
session_start();
error_reporting(E_ALL);
ini_set('display_errors', true);
if (isset($_POST['druecken']) && ! isset($_SESSION['getauscht']))
$_SESSION['getauscht'] = true;
?>
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bild tauschen</title>
</head>
<body>
<form action="" method="post" name="test">
<input name="druecken" type="submit" value="Tauschen">
<input name="testen" type="submit"value="Seite Neu Laden [F5]">
</form>
<p>
<?php
if (isset($_SESSION['getauscht']))
echo '<img src="PNG/P_04.png">';
else
echo '<img src="PNG/E_01.png">';
?>
</p>
</body>
</html>

Alles anzeigen

super47 · 12. Dezember 2020

guten morgen,

erst mal Danke

für mich ist erst mal wichtig dass code funktioniert, optimal ist natuerlich code (schoen schreiben), dann ist dieser wesentlich besser lesbar (begreifbar)

jetzt gibts da aber immer noch grundlegendes problem:

Zitat

meine anwendung startet:
zeige Spiel 1 und oeffnet eine webseite (Kartenadresse ueber GET)
dann
zeige Spiel 2 und oeffnet eine webseite (Kartenadresse ueber GET)

wenn jetzt der browser noch offen ist, werden die karten beim Aufruf der Webseite (Spiel 2) getauscht. die session ist ja noch aktiv.

Alles anzeigen

kann man das irgendwie scripten?

danke gruss roland alias super47

m.scatello · 12. Dezember 2020

super47 schrieb:

für mich ist erst mal wichtig dass code funktioniert

Das ist leider die falsche Einstellung. Natürlich ist es wichtig, dass das Script funktioniert, aber genauso wichtig ist es, dass der Code lesbar ist. Gerade als Anfänger sollte man darauf achten, denn nur so lassen sich Fehler leichter finden.

Und so richtig schlau werde ich aus deiner Problembeschreibung nicht.

super47 · 12. Dezember 2020

Hi

Zitat

Das ist leider die falsche Einstellung. Natürlich ist es wichtig, dass das Script funktioniert, aber genauso wichtig ist es, dass der Code lesbar ist. Gerade als Anfänger sollte man darauf achten, denn nur so lassen sich Fehler leichter finden.
das habe ich doch genau so bestätigt

also die webseite wird gestartet.

bilder getauscht und die Session wurde angelegt.

ich schliesse die seite aber nicht den browswer.

mein programm startet wieder die seite mit andern GET variablen.

dann sind die karten getauscht. weil die session noch steht.

also muss ich den browswer erst schliessen ?

ich versuche grad per script jeder seite beim aufruf andere session einrichten.

danke gruss roland alias super47

m.scatello · 12. Dezember 2020

Was hast du immer mit GET? Da werden nirgendwo GET-Variablen benutzt.

Und ja, eine Session bleibt solange bestehen, bis sie gelöscht wird oder der Browser geschlossen wird.

Du könntest in der Session einen Timestamp speichern, mit dem du vergleichen kannst, ob ein neues Bild angezeigt werden soll.

super47 · 12. Dezember 2020

Hi schau dir mal den Link an

da mal hin und herklicken siehste dann auch das GET ist da erklärt.

Erklärbeispiel incl. GET (aus meiner Anwendung ]

jede Seite hat so neue Session, so kann ich auch mehrere spiele nebenanander Vergleichen.

das mit timestamp habe ich nicht verstanden .......hmmmmmmmmmm

gruss roland alias super47

m.scatello · 12. Dezember 2020

Auf dieser verlinkten Seite wird per URL, also im Script in $_GET zu finden, Werte übergeben, aber nicht bei dir! Daher hat dein Script mit Get-Variablen nichts am Hut. Und danke, dass du mir Get erklären möchtest, aber ich denke, im Gegensatz zu dir weiß ich, was das ist.

Ansonsten bin ich hier raus!

super47 · 12. Dezember 2020

die werte .......werden an die webseite per GET uebergeben ...............darin eben Spielnummer und dies nehme ich dann als session.

drum der link Erklärbeispiel incl. GET (aus meiner Anwendung ]

ind dem simple beispiel gehts ja um sessions ...........aber die werte kommen in der Anwendung per GET ......wie sonst sollen die werte in die webseite kommen ??

gruss roland

m.scatello · 12. Dezember 2020

In dem Script, dass du hier gepostet hast, wird nicht auf $_GET zugegriffen!!!

super47 · 13. Dezember 2020

Hi , ich versteh die aufregung nicht !

im beispiel...........gebe ich die karten vor: z. b. P_08 ...........usw

dann habe ich erwähnt dass in meiner Anwendung die Kartenwerte u. a per Get

an die Webseite uebergeben werden.

Code

Auszug aus der Anwendung:
<div style="left:0px; top:270px; z-index:2;"><img src="PNG/<? echo $_GET['links_d_1']?>"></div>
<div style="left:30px; top:240px; z-index:2;"><img src="PNG/<? echo $_GET['links_d_2']?>"></div>
<div style="left:60px; top:210px; z-index:2;"><img src="PNG/<? echo $_GET['links_d_3']?>"></div>
<div style="left:90px; top:180px; z-index:2;"><img src="PNG/<? echo $_GET['links_d_4']?>"></div>
<div style="left:120px; top:150px; z-index:2;"><img src="PNG/<? echo $_GET['links_d_5']?>"></div>

also keine Panik !

der entscheidende Hinweis kam doch von Dir SESSION einsetzen.

drum nochmal Danke

gruss roland

per Button 2 Bilder in 2 <div > einfügen

Ähnliche Themen

Dynamische Pagination

Mega Menü, Funktionen einfügen?