Welcome!
By registering with us, you'll be able to discuss, share and private message with other members of our community.
-
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.
- You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
- 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
- Thread starter selostar
- Start date
-
- Tags
- checkbox html and css
Yeah, it's possible.
You can run a function when the checkbox is clicked using
e.g.
Use an
And use the
Rather than me just giving you the code, you can try it your self first and post it here if your having problems.
🙂
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.
🙂
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);
}
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%;
}
}
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>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:
If you want to use CSS it'll have to be a background image:
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:
New Threads
-
Image Cropping and Loading Issues on Website (HTML/CSS Issue)- Started by devjoe
- Replies: 3
-
Two custom fonts load in any desktop browser, but only one font loads on iPhone in any browser. Why?
- Started by tmaciejewski
- Replies: 1
-
-
-
Share this page
Buy us a coffee!
