Also das ist gan
z einfach mit Javascript bzw. JQuery möglich (Ich werde JQUERY benutzen):
Da Jquery ja eigentlich nicht in Javascript an sich existiert, musst du es erstmal einbinden um es benutzen zu können.
HTML:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
Das kommt oben in deinen <head> z.B.
Als nächstes komm UNTEN als letztes Element des bodys nun das <script> tag.
In dieses kommt nun dein Jquery-Code.
Als nächstes bindest du die Bilder ein:
HTML:
<img id="rot" src="pfad/zum/roten/Bild.png" alt="">
<img id="gelb" src="pfad/zum/gelben/Bild.png" alt="">
Da diese aber ja NOCH nicht sichtbar sein dürfen, setzt du sie mit CSS auf display: none;
Code:
<style>
img {
display: none;
}
</style>
Jetzt zum Jquery:
1. Du erstellst 2 Funktionen (eine für jedes Bild).
Code:
function rot() {
...
}
function gelb() {
...
}
Jetzt musst du einfach nur noch mit Jquery das display: none; auf display: block oder unset etc. ändern.
Code:
function rot() {
$("#rot").css("display", "block");
}
function gelb() {
$("#gelb").css("display", "block");
}
Als letztes eben die buttons anpassen:
HTML:
<button onclick="rot()">
<button onclick="gelb()">
Edit:
Wenn du noch einen Button haben willst, um die Bilder auszublenden, dann einfach noch einen Funktion:
Code:
<button onclick="hide()">
<script>
function hide() {
$("#rot, #gelb").css("display", "none");
}
</script>
