Testy test 2

<div class="container">

      <img class="frame" src="https://static1.squarespace.com/static/54df85cde4b065fefa528754/56bc7bfae32140fb82eb052c/56c091bf86db43f2a5b41178/1455460800053/Screen+Shot+2016-02-14+at+15.37.52.png?format=1000w" />

 <div class="birdgif_container">

  <img id="bird_gif" src="https://static1.squarespace.com/static/54df85cde4b065fefa528754/56bc7bfae32140fb82eb052c/56c090ebf699bb2d67dbb92b/1455460607074/Untitled.gif?format=1000w" style="height:450px; "/>

      </div>

  <div class="bird_container">

  <img id="bird" src="https://static1.squarespace.com/static/54df85cde4b065fefa528754/56bc7bfae32140fb82eb052c/56c090ebf850826907607226/1455460589128/Screen+Shot+2016-02-14+at+15.34.44.png?format=1000w" style="height:450px; "/>

      </div>

  </div>

.container {

    position: relative;

    width: 300px;

}

.frame {

    position: absolute;

    height: 600px;

    pointer-events: none;

}

div.bird_container {

  position: absolute;

  margin: 70px 0px 0px 21px;

}

div.birdgif_container {

  position: absolute;

  margin: 70px 0px 0px 21px;

}

(new Image()).src = "bird.gif"; // this would preload the GIF, so future loads will be instantaneous

var bird = document.getElementById('bird'),

    bird_gif = document.getElementById('bird_gif');

bird.onclick = function() {

    bird.src = bird_gif;

    document.getElementById('bird').style.display = 'none';

}

bird_gif.onclick = function() {

    bird_gif = bird.src;

      document.getElementById('bird_gif').style.display = 'none';

}