Untitled

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>Test</title>
		<style>
			body {
				overflow: hidden
				}
			.obrazek {
				width: 100px;
				height: 100px;
				background: url('kursor.jpg')
				no-repeat;
				}
			.obrazy {
				opacity: 0.2
				}

			td { border-collapse: separate;
				 border-spacing: 10px 5px;	}
		</style>
	</head>
	<body id="body">
		<p id="data1"></p>

		<table align="center">
		<tr>
			<td><img class="obrazy"id="obrazek1" onclick="Duze(this)"  onmouseover="Krycie(this)" onmouseout="Krycieout(this)" src="rsz_obrazek1.png"></td>
			<td><img class="obrazy"id="obrazek2" onclick="Duze(this)" onmouseover="Krycie(this)" onmouseout="Krycieout(this)" src="rsz_obrazek2.png"></td>
		</tr>
			<td><img class="obrazy" id="obrazek3" onclick="Duze(this)" onmouseover="Krycie(this)" onmouseout="Krycieout(this)" src="rsz_obrazek3.png"></td>
			<td><img class="obrazy" id="obrazek4" onclick="Duze(this)" onmouseover="Krycie(this)" onmouseout="Krycieout(this)" src="rsz_obrazek4.png"></td>
		</tr>


		<div class="obrazek" id="obrazek"></div>
		<script>
			var cialo = document.getElementById("body");
			var obr = document.getElementById("obrazek");
			cialo.onmousemove = function(e) {
				var pos_x = e.clientX;
				var pos_y = e.clientY;
				obr.style.display = "block";
				obr.style.position = "relative";
				obr.style.left = pos_x + 'px';
				obr.style.top = pos_y + 'px';
			}
			cialo.onclick = function() {
				document.getElementById("data1").innerHTML = new Date();
			}

		function Duze(obrazy) {
			obrazy.style.height = "110%";
			obrazy.style.width = "110%";
			}

		//function Normalne(obrazy) {
		//	obrazy.style.height = "100%";
		//	obrazy.style.width = "100%";
		//	}

		function Krycie(obrazy) {
			obrazy.style.opacity = 1;}

		function Krycieout(obrazy) {
			obrazy.style.opacity = 0.2; }


		</script>
	</body>
</html>