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>Barva trička</h1> <img src="http://img.djpw.cz/wdi.gif" id="tshirt"> <fieldset> <legend>Barva</legend> <div><label for="red"><input type="radio" name="color" id="red">Červená</label></div> <div><label for="blue"><input type="radio" name="color" id="blue">Modrá</label></div> <div><label for="green"><input type="radio" name="color" id="green">Zelená</label></div> <div><label for="yellow"><input type="radio" name="color" id="yellow">Žlutá</label></div> <div><label for="orange"><input type="radio" name="color" id="orange">Oranžová</label></div> </fieldset>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
#tshirt, fieldset { float: left; } #tshirt { transition: background-color .5s; }
CSS
Autoformát
CSS reset
Až na konci
function changeColor() { document.getElementById("tshirt").style.backgroundColor = this.id; } var inps = document.getElementsByTagName("input"); for(var i = 0, ilen = inps.length; i < ilen; i++) { inps[i].onchange = changeColor; }
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>