Untitled

<html>
<head>
<style>
div {
	position:absolute;
	border:2px solid black;}

.mini img {
	width:100px;
    height:100px;
}

</style>
<script>
	var pucle=['a1', 'a2', 'a3','a4'];
 function Zakryj(){
a1.innerHTML="<img src='obrazek.jpg'>";
a2.innerHTML="<img src='obrazek.jpg'>";
a3.innerHTML="<img src='obrazek.jpg'>";
a4.innerHTML="<img src='obrazek.jpg'>";
}
function Losuj(){
    var l, liczba=0;
    var pLeft=[100,200,100,200];
    var pTop=[100,100,200,200];
    var los=[0,0,0,0];

    while(liczba<4){
      l=Math.floor(Math.random()*4);
        if(los[l]==0){
          id=document.getElementById(pucle[liczba]);
          id.style.left=pLeft[l];
          id.style.top=pTop[l];
          los[l]=1;
          liczba++;
        }
    }
}

function Pokaz (x){
if(x==a1){
a1.innerHTML="<img src='pic1.jpg'>"}
if(x==a2){
a2.innerHTML="<img src='pic2.jpg'>"}
if(x==a3){
a3.innerHTML="<img src='pic2.jpg'>"}
if(x==a4){
a4.innerHTML="<img src='pic1.jpg'>"}
}


</script>
</head>
<body>
<form>
<input type="button" value="zakryj" onclick="Zakryj()">
<input type="button" value="losuj" onclick="Losuj()">
</form>
<div class="mini" id="a1" style="left:100px; top:100px;" onclick="Pokaz(this)"><img src="pic1.jpg"></div>
<div class="mini" id="a2" style="left:100px; top:200px;" onclick="Pokaz(this)"><img src="pic2.jpg"></div>
<div class="mini" id="a3" style="left:200px; top:100px;" onclick="Pokaz(this)"><img src="pic2.jpg"></div>
<div class="mini" id="a4" style="left:200px; top:200px;" onclick="Pokaz(this)"><img src="pic1.jpg"></div>

</body></html>