• Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

use checkbox for image switch

Johna

Frontend Web Developer
Staff Team
Guardian
You can run a function when the checkbox is clicked using oninput.
e.g.
JavaScript:
element.oninput = function() {}

Use an if statement and the checked property to check if the checkbox is checked.
And use the setAttribute method to change the image.


Rather than me just giving you the code, you can try it your self first and post it here if your having problems.
:)
 

selostar

New Coder
Code:
.umschalter input {
    appearance: none;
    width: 100%;
    height: 100%;
    border: 1px solid white;
    border-radius: 4.5em/50%;
    background-color: white;
    margin: 0;
    margin-right: 3%;
    margin-top: 10%;


}

.umschalter input {
    height: 8em;
    width: 18em;
    position: relative;

}

.knopf {
    background-color: black;
    width: 5.8em;
    height: 5.8em;
    box-shadow: 0 0 40px rgb(231, 9, 9);
    position: absolute;
    top: 0.5em;
    left: 0.5em;
    pointer-events: none;
    transition: transform 0.5s ease-in-out;
    border-radius: 50%;
    margin-top: 10%;


}


.umschalter input:checked {
    background-color: hsl(216, 98%, 52%);
    border-color: hsl(216, 98%, 52%);
    display: inline-block;
    
    }
    

.umschalter input:checked+.knopf {
    background-color: black;
    transform: translateX(8em);
    box-shadow:0 0 40px rgb(187, 255, 0);

}
 

selostar

New Coder
CSS:
*{
    font-family: "Verdana", "calibri", sans-serif;
    line-height: 1.5;


}


h1 {
    margin-top: 0;
}

ul {
    margin-bottom: 0;
}

h1, h2 {
    background: #fc9709;
    color: white;
    text-align: center;
    padding: 1.5;
    box-shadow: 2px 2px 5px red;
    text-shadow: 1px 1px 1px red;
    border-radius: 20px/50%;
    margin-bottom: 35px;

}



.padding-lr20 {
    padding-left: 20px;
    padding-right: 20px;
}

section {
    margin-bottom: 50px;
}

table, th, td {
    border: 2px solid orangered;
    border-collapse: collapse;

}

table {
    width: 95%;
    text-align: center;
    background: linear-gradient( orange, yellow);
    box-shadow: 2px 2px 5px red;
    margin: 10% auto;
}


li {

    box-shadow: 2px 2px 5px #666666;
    margin-top: 15px;
    padding: 2%;
    font-size: large;
    background: #eeeeee;

}

ul {
    list-style-type: none;
}

img {
    margin: auto;
    display: block;
}

@media (min-width: 576px) {
    .tabellenhalter {
        display: flex;
        justify-content: space-around;
    }
    table {
        width: 45%;
        margin: 0;
    }
    img {
        float: right;
        padding: 1%;
    
    }

}

@media (min-width: 1200px) {
    .hauptbehalter {
        background: white;
        width: 50%;
        margin: 0px auto;
        padding: 2% 2%;
        box-shadow: 2px 2px 5px red;

    }
    body {
        background: #fc9709 url('bilder/hintergrund.jpg ') ;
        margin: 0;
        
    }

    li{
        background: #eeeeee url("bilder/pokeball.png");
        background-size: 3%;
        background-repeat: no-repeat;
        background-position: 1.5% center;
        padding-left: 6%;
    }

}
 

selostar

New Coder
HTML:
<!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>Pikachu</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="umschalter.css">
</head>

<body>
    <span class="umschalter">
        <input type="checkbox"></input>
        <span class="knopf"></span>
        
    </span>

    <div class="hauptbehalter">
        <h1>Pikachu</h1>
        <section class="padding-lr20">
            <img src="bilder/pikachu.png.png" alt="Ein Bild von Pikachu">
            
            <p> Pikachu ist ein kleines, nagerähnliches Pokémon, das gelb, schwarz, braun und rot auftritt. Der Großteil
                seines
                Körpers ist dabei gelb gefärbt. Die Spitzen der Ohren sind allerdings in schwarzer Farbe. Auch befinden
                sich
                auf
                seinem Rücken zwei breite, abgerundete Streifen brauner Farbe. Gleiches gilt für den Beginn des
                Schwanzes.
                Das
                ursprünglich etwas dickere und gedrungene Elektro-Pokémon ist mit der Zeit deutlich schlanker geworden.
                Auf
                dem
                Kopf wachsen zwei spitze, lange Ohren. Das Gesicht besteht aus den beiden schwarz-weißen, runden Augen,
                der
                sehr
                kleinen Nase, den beiden roten, mit Elektrizität gefüllten Backen und dem kleinen Mund. An seinen
                Vorderfüßen
                hat Pikachu fünf kurze Finger. Es besitzt breite Oberschenkel, die unmittelbar in die schmalen, langen
                Füße
                übergehen. An diesen hat es jeweils drei Zehen. Ein auffälliges Merkmal ist sein Schwanz, der die Form
                eines
                Blitzes hat.
            </p>
            <p>
                Pikachu ist ein Pokémon mit dem Typ Elektro und existiert seit der ersten Spielgeneration. Es ist die
                erste
                Entwicklung von Pichu und kann sich selbst zu Raichu weiterentwickeln. Ferner ist es auf dem Cover der
                Pokémon
                Special Pikachu Edition und Pokémon: Let’s Go, Pikachu! zu sehen, wo es ebenfalls das Starter-Pokémon
                darstellt.
                Seit der achten Generation ist es in der Lage, per Gigadynamaximierung zu Gigadynamax-Pikachu zu werden.
            </p>
            <p>
                Pikachu ist das Maskottchen im Anime und das Pokémon mit dem höchsten Bekanntheitsgrad und das
                Maskottchen
                des
                Pokémon-Franchises.
            </p>
        </section>
        <section>
            <h2>Attacken</h2>
            <div class="tabellenhalter">
                <table>
                    <thead>
                        <tr>
                            <th colspan="4 ">Durch Levelaufstieg</th>
                        </tr>
                        <tr>
                            <th>Level</th>
                            <th>Name</th>
                            <th>Typ</th>
                            <th>AP</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>1</td>
                            <td>Donnerschock</td>
                            <td>Elektro</td>
                            <td>30</td>
                        </tr>
                        <tr>
                            <td>1</td>
                            <td>Heuler</td>
                            <td>Normal</td>
                            <td>40</td>
                        </tr>
                        <tr>
                            <td>9</td>
                            <td>Donnerwelle</td>
                            <td>Elektro</td>
                            <td>20</td>
                        </tr>
                        <tr>
                            <td>16</td>
                            <td>Ruckzuckhieb</td>
                            <td>Normal</td>
                            <td>30</td>
                        </tr>
                        <tr>
                            <td>26</td>
                            <td>Sternschauer</td>
                            <td>Normal</td>
                            <td>20</td>
                        </tr>
                        <tr>
                            <td>33</td>
                            <td>Agilität</td>
                            <td>Psycho</td>
                            <td>30</td>
                        </tr>
                        <tr>
                            <td>43</td>
                            <td>Donner</td>
                            <td>Elektro</td>
                            <td>10</td>
                        </tr>
                    </tbody>
                </table>
                <table>
                    <thead>
                        <tr>
                            <th colspan="4">Durch TM/VM</th>
                        </tr>
                        <tr>
                            <th>TM/VM</th>
                            <th>Attacke</th>
                            <th>Typ</th>
                            <th>AP</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>TM01</td>
                            <td>Megahieb</td>
                            <td>Normal</td>
                            <td>20</td>
                        </tr>
                        <tr>
                            <td>TM05</td>
                            <td>Megakick</td>
                            <td>Normal</td>
                            <td>5</td>
                        </tr>
                        <tr>
                            <td>TM06</td>
                            <td>Toxin</td>
                            <td>Gift</td>
                            <td>10</td>
                        </tr>
                        <tr>
                            <td>TM08</td>
                            <td>Bodyslam</td>
                            <td>Normal</td>
                            <td>15</td>
                        </tr>
                        <tr>
                            <td>TM09</td>
                            <td>Bodycheck</td>
                            <td>Normal</td>
                            <td>20</td>
                        </tr>
                        <tr>
                            <td>TM10</td>
                            <td>Risikotackle</td>
                            <td>Normal</td>
                            <td>15</td>
                        </tr>
                        <tr>
                            <td>TM16</td>
                            <td>Zahltag</td>
                            <td>Normal</td>
                            <td>20</td>
                        </tr>
                        <tr>
                            <td>TM01</td>
                            <td>Megahieb</td>
                            <td>Normal</td>
                            <td>20</td>
                        </tr>
                        <tr>
                            <td>TM05</td>
                            <td>Megakick</td>
                            <td>Normal</td>
                            <td>5</td>
                        </tr>
                        <tr>
                            <td>TM06</td>
                            <td>Toxin</td>
                            <td>Gift</td>
                            <td>10</td>
                        </tr>
                        <tr>
                            <td>TM08</td>
                            <td>Bodyslam</td>
                            <td>Normal</td>
                            <td>15</td>
                        </tr>
                        <tr>
                            <td>TM09</td>
                            <td>Bodycheck</td>
                            <td>Normal</td>
                            <td>20</td>
                        </tr>
                        <tr>
                            <td>TM10</td>
                            <td>Risikotackle</td>
                            <td>Normal</td>
                            <td>15</td>
                        </tr>
                        <tr>
                            <td>TM16</td>
                            <td>Zahltag</td>
                            <td>Normal</td>
                            <td>20</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </section>
        <section>
            <h2>Pikachu in der realen Welt</h2>
            <ul class="padding-lr20">
                <li>Japanische Forscher des Osaka Bioscience Institute benannten nach dem Pokémon ein neu entdecktes
                    Protein: Das Pikachurin, welchem eine Rolle beim Bewegungssehen zugeschrieben wird. Es wurde nach
                    Pikachus Schnelligkeit benannt.
                </li>
                <li>In den USA wurde ein amerikanischer Schulbus umgebaut, gelb lackiert und so entstand der legendäre
                    Pikachu-Bus, der auch auf den deutschen Pokémon Days bis einschließlich 2010 dabei war.
                </li>
                <li>Pikachu wurde 2001 auf den Niue-Dollar gedruckt.
                </li>
                <li>Pikachu war 2014 das offizielle WM-Maskottchen der japanischen Fußball-Nationalmannschaft.</li>
            </ul>
        </section>
    </div>


</body>

</html>
 

Johna

Frontend Web Developer
Staff Team
Guardian
Ok so I was expecting you so use JavaScript, but I'm assuming you don't know how to use JavaScript?
Here's a JSFiddle for both JS and CSS: https://jsfiddle.net/r8Lvb5sa/

Here's how to do it with JavaScript:
HTML:
<input type="checkbox" id="check" name="check">
<label for="check">New Image</label>
<br>
<img src="https://example.com/image.png" id="image">
JavaScript:
var check = document.getElementById("check");
var image = document.getElementById("image")

check.oninput = function() {
  if (check.checked) {
    image.setAttribute("src", "https://example.com/image2.png");
  } else {
      image.setAttribute("src", "https://example.com/image.png");
  }
}

If you want to use CSS it'll have to be a background image:
HTML:
<input type="checkbox" id="check" name="check">
<label for="check">New Image</label>
<br>
<div id="image"></div>
CSS:
#image {
  width: 200px;
  height: 200px;
  background-size: contain;
  background: url(https://www.example.com/image1.png) no-repeat;
}

#check:checked ~ #image {
  background: url(https://www.example.com/image2.png) no-repeat;
}
 
Last edited:
Top