Hallo Volkmar,
eine Prise JavaScript brauchst Du, wenn Du einen großflächigen Togglebutton ohne Checkbox-Hack verwenden willst, aber der Rest geht mit CSS.
Bei diesem HTML
<div class="toggleImage" aria-checked="false">
<button></button>
<figure>
<img src="...url..." height="300" alt="Alt-Beschreibung">
<figcaption>...</figcaption>
</figure>
</div>
und diesem JavaScriptchen, das nichts weiter tut als am .toggleImage div den aria-checked State umzuschalten:
document.addEventListener("click", function(e) {
let btn = e.target;
if (btn.tagName != "BUTTON") return;
let tgl = btn.closest(".toggleImage");
if (!tgl) return;
let ch = (tgl.getAttribute('aria-checked') == "false") ? "true" : "false";
tgl.setAttribute('aria-checked', ch);
})
geht der Rest mit CSS. Zum Beispiel so:
.toggleImage {
display: flex;
}
.toggleImage button {
flex: 0 0 3em;
position: relative;
height: 3em;
}
.toggleImage figure {
flex: 1 0 auto;
display:none;
}
.toggleImage[aria-checked=true] figure { display:block; }
.toggleImage[aria-checked=true] button::before {
content: "\2713";
position: absolute; top: -0.5em; left: 0;
font-size: 4em;
}
.toggleImage[aria-checked] button::after {
content: "OFF";
position: absolute;
top: 3em; left: 0em;
width: 3em; text-align:center;
}
.toggleImage[aria-checked=true] button::after { content: "ON"; }
Die Darstellungsvarianten hängen am Wert des aria-checked Attributes, der ON/OFF Text wird mit ::after unter den Button gesetzt, und das Check-Häkchen mit ::before hinein. Weil das Häkchen über den Button hinausragen soll, habe ich es absolut positioniert.
Um Button und Bild nebeneinander zu bekommen, verwende ich flexbox.
Rolf
--
sumpsi - posui - clusi
sumpsi - posui - clusi