|
|
| (2 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt) |
| Zeile 1: |
Zeile 1: |
| − | <div style="position: relative; width: 500px; margin-bottom: 1em;"> | + | <div class="layer-container"> |
| | | | |
| − | <!-- Basisbild -->
| + | [[Datei:Grashuepfer.png|500px|class=layer layer-base|id=basis]] |
| − | <img src="/path/zu/deinem/bild_basis.png" style="width: 100%;">
| + | [[Datei:SäbelrasslerSemanto.png|500px|class=layer|id=layer1]] |
| − | | + | [[Datei:DruidesDeliabar.png|500px|class=layer|id=layer2]] |
| − | <!-- Ebene 1 -->
| |
| − | <img id="layer1" src="/path/zu/ebene1.png" style="width: 100%; position: absolute; top: 0; left: 0;">
| |
| − | | |
| − | <!-- Ebene 2 -->
| |
| − | <img id="layer2" src="/path/zu/ebene2.png" style="width: 100%; position: absolute; top: 0; left: 0;">
| |
| − | | |
| − | <!-- Ebene 3 -->
| |
| − | <img id="layer3" src="/path/zu/ebene3.png" style="width: 100%; position: absolute; top: 0; left: 0;">
| |
| | | | |
| | </div> | | </div> |
| − |
| |
| − | <!-- Steuerung -->
| |
| − | <label><input type="checkbox" class="layer-toggle" data-target="layer1" checked> Ebene 1 anzeigen</label><br>
| |
| − | <label><input type="checkbox" class="layer-toggle" data-target="layer2" checked> Ebene 2 anzeigen</label><br>
| |
| − | <label><input type="checkbox" class="layer-toggle" data-target="layer3" checked> Ebene 3 anzeigen</label><br>
| |
| − |
| |
| − | <script>
| |
| − | document.addEventListener("DOMContentLoaded", function() {
| |
| − | document.querySelectorAll(".layer-toggle").forEach(cb => {
| |
| − | cb.addEventListener("change", function() {
| |
| − | const layer = document.getElementById(this.dataset.target);
| |
| − | layer.style.display = this.checked ? "block" : "none";
| |
| − | });
| |
| − | });
| |
| − | });
| |
| − | </script>
| |
