Diskuze: Konfigurator produktu
V předchozím kvízu, Online test znalostí JavaScript, jsme si ověřili nabyté zkušenosti z kurzu.
A zkousel jsi google?
google = js image picker canvas
Kdybych si to mel jakoze naprogramovat po svem, tak si udelam json pole, ze ktereho se to generuje
<script>
var data = [
'cast 1': [
{'title': '1', 'url': 'url'},
{'title': '2', 'url': 'url'},
{'title': '3', 'url': 'url'}
],
'cast 2': [
{'title': '4', 'url': 'url'},
{'title': '5', 'url': 'url'},
{'title': '6', 'url': 'url'}
]
]
generujeCasti(data);
// onclick="generujeObrazky(data, id1);"
// onclick="kresliNaCanvas(data, id1, id2);"
</script>Jo, tez je dobre si uvedomit, ze loadovani obrazku nejaky cas trva, takze bys
mel resit tez image onload 
Pokud, totiz pozadas o vykresleni pres js drive, tak se obrazek nenacte.
google = js draw image canvas example
google = js click on image and draw to canvas example
A, pak mas druhou moznost, muzes si tam vyrobit primo html kod a jen vyuzivat
skyvani. Bootstrap zalozky.
google = bootstrap tab sheets (tab panel) example
https://getbootstrap.com/…s/navs-tabs/#tabs
https://getbootstrap.com/…s/navs-tabs/#…
najdi na strance text "The tabs plugin also works with pills."
A pod nim je takovy pekny priklad i s html kodem, jen do html musis jeste pridat
js a css bootstrapu.
Cili, funguje to ta, ze mas tlacitka Cast1, 2, 3.
Ty na kliknuti schovaji vsechny infopanely a zobrazi jen ten jeden.
A v tom panelu mas pak obrazky, ktere na click neco nekam vlozi
<div id=nav>
<input type=button onclick="skryjPanely();zobrazPanel(1)" value=cast1>
<input type=button onclick="skryjPanely();zobrazPanel(2)" value=cast2>
<input type=button onclick="skryjPanely();zobrazPanel(3)" value=cast3>
</div>
<div id=panel1>
<img src='obrazek1.png' onclick="kresliNaCanvas(this.src)">
<img src='obrazek2.png' onclick="kresliNaCanvas(this.src)">
<img src='obrazek3.png' onclick="kresliNaCanvas(this.src)">
</div>
<div id=panel2>
<img src='obrazek4.png' onclick="kresliNaCanvas(this.src)">
<img src='obrazek5.png' onclick="kresliNaCanvas(this.src)">
<img src='obrazek6.png' onclick="kresliNaCanvas(this.src)">
</div>
<div id=panel3>
<img src='obrazek7.png' onclick="kresliNaCanvas(this.src)">
<img src='obrazek8.png' onclick="kresliNaCanvas(this.src)">
<img src='obrazek9.png' onclick="kresliNaCanvas(this.src)">
</div>Hadam, ze chces neco takoveho, protoze z toho obrazku se sipeckami neni uplne
jasny princip a sam jsi toho mnoho nenapsal
Zobrazeno 2 zpráv z 2.