Ovládání

Lorem ipsum dolor sit amet consectetuer pellentesque ac condimentum tempus Ut.

Ut morbi Curabitur et Curabitur ipsum congue odio at tempus libero.

    <script>
      function zmenaRange(hodnota) {
        document.getElementById('odstavec1').style.fontSize  = hodnota + "px"; 
      }
      function zmenaRange2(hodnota) {
        document.getElementById('odstavec2').style.margin  = "0px 0px 0px " + hodnota + "px"; 
      }
      function presLiza(hodnota) {
        document.getElementById('Liza').style.width  = "45px";
        document.getElementById('Liza').style.height  = "97px";         
      }
      function odchodLiza(hodnota) {
        document.getElementById('Liza').style.width  = "89px";
        document.getElementById('Liza').style.height  = "195px";         
      }
      function presBart(hodnota) {
        document.getElementById('Bart').style.top  = "0px";
        document.getElementById('Bart').style.left  = "300px";         
      }
      function odchodBart(hodnota) {
        document.getElementById('Bart').style.top  = "300px";
        document.getElementById('Bart').style.left  = "300px";         
      }                                             
    </script> 

  <input type="range" min="8" max="100" value="12" step="1" onchange="zmenaRange(this.value)">
  <hr />
  <input type="range" min="0" max="100" value="0" step="1" onchange="zmenaRange2(this.value)">
  <hr />
  
  <p id="odstavec1">Lorem ipsum dolor sit amet consectetuer pellentesque ac condimentum tempus Ut.</p>
  <p id="odstavec2">Ut morbi Curabitur et Curabitur ipsum congue odio at tempus libero.</p>
  <img src="img/simpsnovi_1.png" id="Liza" height="195" width="89" onmouseover="presLiza()" onmouseout="odchodLiza()">
  <img src="img/simpsnovi_2.png" id="Bart" height="235" width="132" style="position:absolute; left:300px; top:300px;" onmouseover="presBart()" onmouseout="odchodBart()">