Frage On-Click BIld einblenden

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

emiliaginner

Neues Mitglied
22 August 2017
4
0
1
18
Hallo liebe Menschen,

Ich arbeite gerade an einer Aufgabe, bei welcher ich einen Button programmieren soll. Wenn ich diesen betätige soll ein rotes bzw gelbes Bild erscheinen. Jedoch habe ich keine Ahnung wie das geht, es wäre nett wenn ich mir helfen könnt.

ich werde dazu auch noch mein momentanes skript einfügenupload_2017-8-22_13-36-44.png
 

Aaron3219

Senior HTML'ler
6 Oktober 2015
1.091
217
63
18
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.

HTML:
<script>
...
</script>
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>
 
  • Like
Reactions: emiliaginner

Sempervivum

Senior HTML'ler
18 Oktober 2016
1.559
301
83
67
Kann man vorteilhaft auch mit CSS und dem Radiohack realisieren:
Code:
    <style>
        #imgred {
            width: 400px;
            height: 200px;
            background-color: red;
            display:none;
        }
        #imggreen {
            width: 400px;
            height: 200px;
            background-color: green;
            display:none;
        }
        input[name='rdimg']:checked + div {
            display: block!important;
        }
        input[name='rdimg'] {
            display: none;
        }
    </style>
    <button><label for="inputred">Rot</label></button>
    <button><label for="inputgreen">Grün</label></button>
    <input name="rdimg" type="radio" id="inputred" />
    <div id="imgred"></div>
    <input name="rdimg" type="radio" id="inputgreen" />
    <div id="imggreen"></div>
Statt Bildern habe ich der Einfachheit halber Divs mit farbigem Hintergrund verwendet.
 
Zuletzt bearbeitet:
  • Like
Reactions: emiliaginner

Aaron3219

Senior HTML'ler
6 Oktober 2015
1.091
217
63
18
Ja ich finde das nur immer eine unsaubere Variante.
Außerdem ging es um "onclick".
Das ist ja mit der Variante nicht erfüllt ;)
Aber ansonsten ein guter Einfall
 
  • Like
Reactions: emiliaginner

Aaron3219

Senior HTML'ler
6 Oktober 2015
1.091
217
63
18
Jedem das seine...
Aber der Titel fragt ja nach onclick.

Außerdem habe ich ja nicht gesagt, das @Sempervivum Lösung falsch ist und wenn ihre Aufgabenstellung sowas erlaubt dann nimm bitte diese @emiliaginner .
Aber laut ihr soll es ja onclick sein. Das ist wie, als wenn du in der Schule an der Aufgabenstellung vorbei arbeitest.
 

drumer

Mitglied
7 Februar 2017
42
2
8
Ich glaube das geht auch einfacher:
Code:
<input type="submit" value='Rotes Bild' onclick="rot.style.display='block';">
<input type="submit" value='Gelbes Bild' onclick="gelb.style.display='block';">

<img src="bilder/gelb.jpg" style="display:none" id="gelb">
<img src="bilder/rot.jpg" style="display:none" id="rot">
Sollte funktionieren!
 
Werbung:

Latest posts