Klick auf einen Link öffnet Bild in einer Div Box

    Hallo zusammen,


    ich habe mal eine Frage, gibt es eine Möglichkeit ein Bild in einer Div Box zu öffnen wenn ich auf einen bestimmten Link klicke?


    Ich habe quasi 2 Div Boxen nebeneinander. In der rechten Box habe ich ein Essensrezept als Link aufgeführt, klicke ich nun auf eines drauf, soll sich in der linken Box zu dem angeklicktem Rezept ein Bild öffnen.


    Ich hoffe ich habe es einigermaßen verständlich erklären können wie ich meine =)


    Über eine Antwort würde ich mich sehr freuen

    Das geht.

    Du könntest die Bilder dann da mit Ajax reinladen , oder die src Links einfach wechseln.

    Hast du schon was erstellt , dann kann man mal genaue schauen, was du bis jetzt hast und wie es am einfachsten weiter gehen kann.

    <!DOCTYPE html>
    <html lang="de">
    <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tortentraum - Holler</title>
    <link rel="stylesheet" href="stylesheet.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Fleur+De+Leah&display=swap" rel="stylesheet">
       
    </head>
    <body class="body-content"> <div class="headline"><h1><span class="headline-attribute"><a href="index.html"><a href="index.html" class="headline-style-attribute">Tortentraum</span> - Holler</a></h1><div class="headline2">Hier findest auch Du die richtige Torte für deinen ganz besonderen Anlass</div></div>
    <div class="trennlinie"></div>
    <div class="navbar">
    <a class="navbar-header" href="#">Geburtstag</a>
    <a class="navbar-header" href="#">Hochzeit</a>
    <a class="navbar-header" href="#">Tauftorten</a>
    <a class="navbar-header" href="#">Kommunion & Konfirmation</a>
    <a class="navbar-header" href="#">Feiertage</a>
    <a class="navbar-header" href="#">Oma´s Rezepte</a>
    <a class="navbar-header" href="#">Besondere Momente</a>
    </div>
    <div class="image-container">
    <div class="rezepte">
    <ul>
    <li><a href="#" class="rezeptliste">Bärchenkuchen</a></li>
    <li><a href="#" class="rezeptliste">Blümchenkuchen</a></li> ***Rezepte***
    <li><a href="#" class="rezeptliste">Marmorkuchen</a></li>
    <li><a href="#" class="rezeptliste">Weinkuchen</a></li>
    </ul>
    </div>
    <div class="vorschau">

    ***Hier soll dann das Bild erscheinen von dem Rezept das angeklickt wurde***

    </div>
    </div>
    <div class="trennlinie"></div>
    <div class="footer-bar">
    </div>
    <div class="footer">
    Copyright © 2021 tortentraum-holler.de
    <a href="#">Datenschutz |</a>
    <a href="#">Impressum |</a>
    <a href="#">Kontakt |</a>
    <a href="#">Forum |</a>
    </div>
    </body>

    </html>

    Sind das nur die 4 Rezepte ?

    Jedes Bild hat ja ein Link.

    Den Link würde ich in ein data Attribute schreiben

    Code
    <li><a data-src="link4_zum_bild.png" href="#" class="rezeptliste">Weinkuchen</a></li>

    diesen liest du beim klick aus , und fügst ihn en den anderen Kasten wieder ein (wo vorher ein Dummy Bild war , oder noch nichts, dann muss aber Image erstellt werden)


    Bei 4 Bildern könnte man auch ohne JS arbeiten und mit :target arbeiten

    Ne es werden schon mehr Rezepte sein, im Beispiel hab ich nur jetzt mal 4 Rezepte eingefügt. Ich möchte es später quasi so machen, das ich eine Datenbank habe in der ich die Rezepte und die passenden Bilder dazu gespeichert habe. Dann mit einer Datenbankabfrage z.B unter der Rubrik Geburtstag dann alle Rezepte dazu angezeigt werden + dann das passende Bild wenn ich ein Rezept anklicke

    Ok dann wäre JS Methode schon sinnvoller.

    Sobald du dann umbaust auf Datenbank, muss sowieso wieder eine andere Methode angewendet werden .

    Ich denke da an JSON ,Ajax usw...


    Jetzt würde ich es mit den Link wechsel im img Element machen

    Sorry basti1012, ich dachte dass sich dieses Forum hier ausschließlich um Webseiten-Oberflächen befasst! Daher ich habe ich zusätzlich im PhP-Forum nachgefragt.


    Falls ich da falsch liege, tut es mir leid :(


    Herzliche Grüße Keulenkarl

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!

Benutzerkonto erstellen Anmelden