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 motivu trička</h1> <div class="tricko"> <object id="motiv" type="image/svg+xml" data='http://kod.djpw.cz/fdoc-'></object> </div> <fieldset id="color"> <legend>Barva motivu</legend> <div><label for="black"><input type="radio" name="color" id="black" checked> Černá</label></div> <div><label for="brown"><input type="radio" name="color" id="brown"> Hnědá</label></div> <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í
.tricko { width: 356.6px; height: 387.4px; background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 178.3 193.7"><path d="m65.8 192.7c-14.9-1.2-34.1-4.5-35.7-6.1-1.2-1.2-1.1-3 0.1-12 1.6-11.7 5.1-48.1 6.1-64.8l0.7-10.6-9.9-0.5c-10.3-0.5-20.7-3.7-25.4-7.8-2.1-1.8-2.1-2-0.6-8.2 1.3-5.1 14.9-45 20.1-58.8 1.1-2.8 2-3.6 4.9-4.2 7.1-1.5 33.1-12 35-14.1 3-3.4 9.1-4.8 24.1-5.4 15.6-0.6 24.6 0.6 28.5 3.7 3.3 2.7 8.6 5 24.9 11 7.5 2.8 14.6 5.5 15.8 6.1 1.7 0.8 4.6 8.1 13.8 34.1 13.4 38.1 13.4 34.6 0.7 39.9-6.3 2.6-9.4 3.3-17.5 3.7l-9.9 0.5 0.7 10.6c1.2 19.3 3.6 45.4 5.6 60.6 1.6 12.3 1.7 15.2 0.6 16.3-1.7 1.7-20.5 4.7-37.6 6.1-15.2 1.2-29.6 1.2-44.9-0.1zm45.9-3.9c15.1-1.3 32.4-4 33.1-5.1 0.3-0.5 0-5.5-0.8-11.1-2.2-16.9-4.1-37.8-5.9-63.8l-1.7-24.6 2.7-17.9c2.7-17.7 3.8-21.5 5.8-19.5 0.6 0.6 0.2 6.3-1.3 15.9-2.3 14.9-2.3 15-0.4 23.7l1.8 8.8 8.3-0.5c6.4-0.4 9.7-1.2 14.8-3.6 3.6-1.7 6.5-3.7 6.5-4.4 0-0.7-4.3-13.5-9.6-28.3-5.3-14.8-9.8-28.2-10.1-29.7-0.3-1.5-1-3.1-1.7-3.6-0.6-0.5-7.4-3.3-15.1-6.2-7.7-2.9-16.5-6.4-19.5-7.7-5.2-2.3-5.6-2.3-6.7-0.7-0.7 1-1.3 3-1.3 4.5 0 5.1-10.1 10.9-20.1 11.6-5.3 0.4-7.6 0-11.5-1.7-5.9-2.6-8.5-4.8-7.8-6.6 0.8-2.1-5.7-9.4-7.6-8.4-0.9 0.4-9.8 3.9-20 7.7l-18.4 6.9-1.7 4.9c-1 2.7-5.8 16.3-10.8 30.2-5 13.9-9.1 26-9.1 26.8 0 0.8 2.8 2.8 6.5 4.5 5.1 2.4 8.4 3.2 14.8 3.6l8.3 0.5 1.8-8.6c1.8-8.5 1.8-8.8-0.5-23.7-1.5-9.8-1.9-15.4-1.3-16.1 2-2 3.1 1.9 5.7 19.8l2.7 18.2-1.6 23.3c-1.7 24.6-5 59.7-6.6 69.3-0.5 3.2-0.7 6.1-0.5 6.5 0.6 0.9 19 3.8 31.5 4.9 13.7 1.2 33.7 1.2 47 0.1zm-11.9-172.5c7.2-3.6 11.1-9.4 7.4-10.9-6-2.3-35.1-1.4-37.7 1.2-2 2 6 9 13.2 11.3 3.8 1.2 13.2 0.3 17.1-1.6z"/></svg>') no-repeat 0 / 100%; } #motiv { transform: translate(100px, 100px) scale(1.2); }
CSS
Autoformát
CSS reset
Až na konci
function changeColor() { document.getElementById("motiv").contentDocument.getElementById("parent").style.fill = this.id; } var inps = document.getElementById("color").getElementsByTagName("input"); for(var i = 0, ilen = inps.length; i < ilen; i++) { inps[i].onchange = changeColor; inps[i].parentNode.style.color = inps[i].id; }
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>