Untitled

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" type="text/css"
                 href="15_1_2018.css" />
    <script type="text/javascript">
  			function prva()
  			{
  				document.getElementById("parag").innerHTML += "<p id='p1'> Učenje!!!</p>"

  			}

        function druga()
  			{
  				document.getElementById("parag").innerHTML = ""

  			}

        function treca()
        {
          document.getElementById("parag").innerHTML +="<p id='p2'> Ponavljanje!!!</p>"

        }

        function klik(gdje) {
                // dodavanje
    document.getElementById("cell"+gdje).innerHTML += "<p class='ponavljanje'>Ponavljanje</p>";
  }

  function dklik(gdje) {
                // brisanje
    document.getElementById("cell"+gdje).innerHTML = "__";
  }
  function crvena() {
                // brisanje
    document.getElementById('zad').style.backgroundColor='red';
  }
  function zelena() {
                // brisanje
    document.getElementById('zad').style.backgroundColor='green';
  }
  function blink() {
                // brisanje
    document.getElementById('zad').innerHTML="<p> Blink</p>";
  }
  function neblink() {
                // brisanje
    document.getElementById('zad').innerHTML="<p> Ne blink</p>";
  }
  function lijevov() {

    document.body.style.backgroundPosition="left top";
  }
  function desnov() {

    document.body.style.backgroundPosition="right top";
  }
  function lijevod() {

    document.body.style.backgroundPosition="left bottom";
  }

  function desnod() {

    document.body.style.backgroundPosition="right bottom";
  }


  		</script>


  </head>
  <body id="pozadina">


  		<input type="button" value="Učenje!" onmouseover="prva()"/>
      <input type="button" value="Ponavljanje!" onmouseover="treca()"/>
      <input type="button" value="Briši!" onmouseover="druga()"/>

  <p id="parag"> </p>


  <table border="1">
  <tr>
	<td id="cell1" onclick="klik(1);" ondblclick="dklik(1);"> __ </td>
	<td id="cell2" onclick="klik(2);" ondblclick="dklik(2);"> __ </td>
  </tr>
  <tr>
	<td id="cell3" onclick="klik(3);" ondblclick="dklik(3);"> __ </td>
	<td id="cell4" onclick="klik(4);" ondblclick="dklik(4);"> __ </td>
  </tr>
</table>


  <input type="button" value="Crvena!" onclick="crvena()"/>
  <input type="button" value="Zelena!" onclick="zelena()"/>
  <input type="button" value="Blink!" onclick="blink()"/>
  <input type="button" value="Ne blink!" onclick="neblink()"/>

<p id="zad">Text</p>


<table border="1" id="table">
<tr>
<td  onclick="lijevov()"> left top </td>
<td  onclick="desnov()"> right top </td>
</tr>
<tr>
<td  onclick="lijevod()"> left bottom </td>
<td  onclick="desnod()"> right bottom</td>
</tr>


</table>


<input type="text"
	onclick     = 'document.getElementById("ev").innerHTML += "onclick "'
	onchange    = 'document.getElementById("ev").innerHTML += "onchange "'
	onkeydown   = 'document.getElementById("ev").innerHTML += "onkeydown "'
	onblur      = 'document.getElementById("ev").innerHTML += "onblur "'
	ondblclick  = 'document.getElementById("ev").innerHTML += "ondblclick "'
	onkeypress  = 'document.getElementById("ev").innerHTML += "onkeypress "'
	onmousedown = 'document.getElementById("ev").innerHTML += "onmousedown "'
	onfocus     = 'document.getElementById("ev").innerHTML += "onfocus "'
	onhelp      = 'document.getElementById("ev").innerHTML += "onhelp "'
	onkeyup     = 'document.getElementById("ev").innerHTML += "onkeyup "'
	onmousemove = 'document.getElementById("ev").innerHTML += " "'
	onmouseout  = 'document.getElementById("ev").innerHTML += "onmouseout "'
	onmouseover = 'document.getElementById("ev").innerHTML += "onmouseover "'
	onmouseup   = 'document.getElementById("ev").innerHTML += "onmouseup "'
	onselect    = 'document.getElementById("ev").innerHTML += "onselect "'
/>

<input type="button" value="Brisi" size="30" onclick='document.getElementById("ev").innerHTML = ""' >

<p id="ev"> </p>

  </body>
</html>


#p1{
  color: green;
  font-family: courier;
  border-style: dotted;
  padding-left: 15px;
}
#p2{
  color: red;
  font-family: courier;
  font-weight: bold;
  border-style: dashed;
}
#table{
  cursor: pointer;
  font-family: fantasy;
  text-align: center;
  background-color: yellow;
  font-weight: bold;
  margin-left: 30px;
}
#pozadina{
  background-image: url('voce.jpg');
  background-repeat: no-repeat;

}