Frage On-Click BIld einblenden

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

Werbung

Jetzt auf elektrisches Fahren umstellen, Umwelt schonen und 1.500km kostenlosen Strom von Tesla bekommen. https://ts.la/carsten15473.

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.061
206
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>
 
Reactions: emiliaginner

Sempervivum

Senior HTML'ler
18 Oktober 2016
1.437
285
83
66
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:
Reactions: emiliaginner

Aaron3219

Senior HTML'ler
6 Oktober 2015
1.061
206
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
 
Reactions: emiliaginner

Aaron3219

Senior HTML'ler
6 Oktober 2015
1.061
206
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!