<script>
  function zmien(x)
  {
    var f = document.getElementById("foto");
    f.src = x;
  }
  function polub()
  {
    var s = document.getElementById("serce");

    var stan = document.getElementById("stan");
    
    if (stan.value=="1")
    {
      stan.value="0";
      s.src="icon-off.png";
    }
    else
    {
      stan.value="1";
      s.src="icon-on.png";
    }
  }
</script>

<hr>
<img src="lanzarotte.jpg" id="foto">
<hr>
<img src="lanzarotte.jpg" onclick="zmien('lanzarotte.jpg')" width="100">
<img src="pekin.jpg" onclick="zmien('pekin.jpg')" width="100">
<img src="serengeti.jpg" onclick="zmien('serengeti.jpg')" width="100">
<img src="tajlandia.jpg" onclick="zmien('tajlandia.jpg')" width="100">
<img src="wenecja.jpg" onclick="zmien('wenecja.jpg')" width="100">

<hr>
<form>
  <input type="hidden" id="stan" value="0">
</form>
<img src="icon-off.png" id="serce" onclick="polub()">