Нужна скрипт onclick..для пары картинок
 

Ребята, помогите пожалуйста человеку далекому от Java) Мне нужно реализовать на сайте такую штуку :
рядом друг с другом расположены две картинки. при клике на одну из них она сменяется другой и появляется надпись "вы ошиблись, попробуйте еще раз" кликаешь на надпись и возвращаешься обратно к выбору. а если выбираешь вторую картинку,то пара этих фото сменяется на новые две. и таких пары будет три.
Я так понял реализовать это можно Java. Но сам я смог только сделать чтоб одна картинка сменялась другой. Может у кого то есть похожий скрипт или дельные советы... сроки поджимают, поэтому прошу помощи тут. Спасибо за внимание!)

yameck, плохо понял, но как-то так:

Выберите картинку:
<img id="i1" style= "width:100px;height:100px" src=""/>
<img id="i2" style= "width:100px;height:100px" src=""/>
<div id="mess" style="display:none">Вы ошиблись, попробуйте еще раз</div>
<script>
 var image1 = ["http://javascript.ru/cat/list/scriptaculous_54.png","http://javascript.ru/cat/list/dom.gif","http://javascript.ru/cat/list/firefox.gif"],
      image2 = ["http://javascript.ru/cat/list/jquery_54.png","http://javascript.ru/cat/list/event.gif","http://javascript.ru/cat/list/opera.gif"],
      i = 0;
        i1.src =  image1[i];
        i2.src =  image2[i];
  i1.onclick = function() {
       this.src = "http://javascript.ru/cat/list/donkey.gif";
       mess.style.display = "block";
  }
  i2.onclick = function() {
   if (i1.src != "http://javascript.ru/cat/list/donkey.gif") {
     if (i < 2 ) {
        i++;
        i1.src =  image1[i];
        i2.src =  image2[i];
     }
     else { alert("Вот и все");
        i = 0;
        i1.src =  image1[i];
        i2.src =  image2[i];
       }
    }
  }
  mess.onclick = function() {
      i1.src =  image1[i];
      mess.style.display = "none";
  }

</script>

<div id="viv1" onclick="per1()" style="background: White;font-size: 25px;color:red;text-align: center;" >
<img src="путь к файлу" alt="альтернативный текст">

</div>

<div id="viv2" onclick="per2()" style="background: White;font-size: 25px;color:red;text-align: center;" >
<img src="путь к файлу" alt="альтернативный текст">

</div>
<script type="text/javascript">

function per1(){
var a='<img src="путь к файлу" alt="альтернативный текст">'+"вы ошиблись, попробуйте еще раз";
document.getElementById("viv1").innerHTML =a;
}

function per2(){
var a='<img src="путь к файлу" alt="альтернативный текст">';
var b='<img src="путь к файлу" alt="альтернативный текст">';
document.getElementById("viv1").innerHTML =a;
document.getElementById("viv2").innerHTML =b;
}

</script>

Ребята, спасибо вам огромное!!! Если вдруг будут вопросы по сео обращайтесь) помогу с радостью)

Аууу, совет на будущее: лучше делать работающие примеры:)

<div id="viv1" onclick="per1()" style="background: White;font-size: 25px;color:red;text-align: center;" > 
<img src="http://javascript.ru/cat/list/scriptaculous_54.png" alt="альтернативный текст">

</div>

<div id="viv2" onclick="per2()" style="background: White;font-size: 25px;color:red;text-align: center;" >
<img src="http://javascript.ru/cat/list/jquery_54.png" alt="альтернативный текст">

</div>
<script type="text/javascript">

function per1(){
var a='<img src="http://javascript.ru/cat/list/donkey.gif" alt="альтернативный текст">'+"вы ошиблись, попробуйте еще раз";
document.getElementById("viv1").innerHTML =a;
}

function per2(){
var a='<img src="http://javascript.ru/cat/list/dom.gif" alt="альтернативный текст">';
var b='<img src="http://javascript.ru/cat/list/event.gif" alt="альтернативный текст">';
document.getElementById("viv1").innerHTML =a;
document.getElementById("viv2").innerHTML =b;
}

</script>

Дико извиняюсь, но еще вопрос.. Воспользовался первым вариантом. А как сделать чтобы в конце цикла все повторялось заново?то есть был не пустой экран,а снова эти пары появились? и можно как то сделать чтобы эти картинки менять местами? то есть не всегда угадываю кликая на нижнее фото..а чтоб второй случай например ответ поменять местами?

yameck,
Изменил пример в пост#2

yameck,
Еще бы знать, которая из картинок правильная...

Тоже верно.. Еще раз большое спасибо! Вы меня очень выручили!

Считаем, что второй массив картинок - правильный

Выберите картинку:
<img id="i1" style= "width:100px;height:100px" src=""/>
<img id="i2" style= "width:100px;height:100px" src=""/>
<div id="mess" style="display:none; border: 1px solid red; width:400px">Вы ошиблись. Нажмите, чтобы попробовать еще раз</div>
<script>
 var image1 = ["http://javascript.ru/cat/list/scriptaculous_54.png","http://javascript.ru/cat/list/dom.gif","http://javascript.ru/cat/list/firefox.gif"],
      image2 = ["http://javascript.ru/cat/list/jquery_54.png","http://javascript.ru/cat/list/event.gif","http://javascript.ru/cat/list/opera.gif"],
      i = 0;
  randomImage();

  var test = function() {
     if(this.classList.contains("wrong")) {
        this.src = "http://javascript.ru/cat/list/donkey.gif";
        mess.style.display = "block";
     }
     else {
        if (i < 2 ) {
           i++;
           randomImage();
        }
        else { alert("Вот и все");
            i = 0;
            randomImage();
        }
     }
  }
  i1.onclick = test;
  i2.onclick = test;

  mess.onclick = function() {
      document.querySelector(".wrong").src =  image1[i];
      mess.style.display = "none";
  }
function randomImage() {
   var r = Math.random();
   if (r < 0.5) {
        i1.src =  image1[i];
        i2.src =  image2[i];
        i1.classList.remove("right");
        i2.classList.remove("wrong");
        i1.classList.add( "wrong");
        i2.classList.add("right");
   }
   else {
        i2.src =  image1[i];
        i1.src =  image2[i];
        i2.classList.remove("right");
        i1.classList.remove("wrong");
        i2.classList.add("wrong");
        i1.classList.add("right");
   }
}
</script>