Ve videu jsme si ukázali, jak vložit na HTML obrázky pomocí značky img a jak je pomocí stylu a javascriptu nechávat mizet a objevovat.
<!DOCTYPE html>
<html lang="cs">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<img id="tma" src="nesviti.jpg" onclick="rozsvit()" style="display:inline-block;">
<img id="svetlo" src="sviti.jpg" onclick="zhasni()" style="display:none;">
<script>
function rozsvit(){
document.getElementById('tma').style.display="none";
document.getElementById('svetlo').style.display="inline-block";
}
function zhasni(){
document.getElementById('svetlo').style.display="none";
document.getElementById('tma').style.display="inline-block";
}
</script>
</body>
</html>
Tady je tento kód jako ukázková stránka.
Pokud jste to ještě neudělali, podívejte se na mé video (níže) a pak zkoušejte, zkoušejte, zkoušejte... Prostě si s těmi obrázky pohrajte. Jak myslíte, že se to učím já?