Nová ukázka
Reset
Načíst z URL
Uložit a získat odkaz
Vztahuje se k…
Nevyplňujte
Napiště „nejsem robot“
▶
Přepnout zobrazení
Výsledek
<h1>Klikošlap</h1> <a href="https://elektrokolahusqvarna.cz/hc7.png" class="hellbox"><img src="https://elektrokolahusqvarna.cz/hc7.png" width="150" height="139" style="padding: 5px; background: #bbccee" alt="klikošlap"></a> <a href="https://elektrokolahusqvarna.cz/hc8.png" class="hellbox"><img src="https://elektrokolahusqvarna.cz/hc8.png" width="150" height="139" style="padding: 5px; background: #bbccee" alt="klikošlap"></a>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
.hellbox {cursor:zoom-in;}
CSS
Autoformát
CSS reset
Až na konci
document.addEventListener("DOMContentLoaded", function() { var curtain = document.createElement("div") curtain.style.cssText = "position: fixed; top: 0; left: 0; z-index: 1; width: 100%; height: 100%; background: white none 50% 50%/contain no-repeat; display: none; cursor:pointer;cursor:zoom-out" document.body.appendChild(curtain) curtain.onclick = function() { curtain.style.display = "none" } var boxes = document.getElementsByClassName("hellbox") for(var i=0; i<boxes.length; ++i) boxes[i].addEventListener("click", function(e) { e.preventDefault() curtain.style.backgroundImage = "url('"+e.target.parentNode.href+"')" curtain.style.display = "block" }) })
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>