Animated the presets (#453)

gamerules.html

@@ -310,6 +310,87 @@ <h3>Pentadecathlon</h3>
           class="center" onmouseover="changeToGif10()" onmouseout="changeToStatic10()"/>
       </div>
     </div>
+
+    <!-- Animation of the presets -->
+    <script>
+
+
+function changeToGif1() {
+  document.getElementById('image1').src = 'images/Moving-Glider.gif';
+}
+function changeToStatic1() {
+  document.getElementById('image1').src = 'images/Small-Glider.png';
+}
+
+function changeToGif2() {
+  document.getElementById('image2').src = 'images/Moving-Big-Glider.gif';
+}
+function changeToStatic2() {
+  document.getElementById('image2').src = 'images/Big-Glider.png';
+}
+
+function changeToGif3() {
+  document.getElementById('image3').src = 'images/Moving-Gosper-Glider-Gun.gif';
+}
+function changeToStatic3() {
+  document.getElementById('image3').src = 'images/Gosper-Glider-Gun.png';
+}
+
+function changeToGif4() {
+  document.getElementById('image4').src = 'images/Moving-Pulsar.gif';
+}
+function changeToStatic4() {
+  document.getElementById('image4').src = 'images/Pulsar.png';
+}
+
+function changeToGif5() {
+  document.getElementById('image5').src = 'images/moving-fire-circle.gif';
+}
+function changeToStatic5() {
+  document.getElementById('image5').src = 'images/Circle-of-Fire.png';
+
+}
+function changeToGif6() {
+  document.getElementById('image6').src = 'images/Moving-Quadpole.gif';
+}
+function changeToStatic6() {
+  document.getElementById('image6').src = 'images/Quadpole.png';
+}
+
+function changeToGif7() {
+  document.getElementById('image7').src = 'images/Moving-Spider.gif';
+}
+
+function changeToStatic7() {
+  document.getElementById('image7').src = 'images/Spider.png';
+}
+
+function changeToGif8() {
+  document.getElementById('image8').src = 'images/Moving-Spaceship.gif';
+}
+
+function changeToStatic8() {
+  document.getElementById('image8').src = 'images/Spaceship.png';
+}
+
+function changeToGif9() {
+  document.getElementById('image9').src = 'images/Moving-Boat-Tie.gif';
+}
+
+function changeToStatic9() {
+  document.getElementById('image9').src = 'images/Boat-Tie.png';
+}
+
+function changeToGif10() {
+  document.getElementById('image10').src = 'images/Moving-Pentadecathlon.gif';
+}
+
+function changeToStatic10() {
+  document.getElementById('image10').src = 'images/Pentadecathlon.png';
+}
+    </script>
+
+
       <hr />
       <h2>Summary</h2>
       <div class="card">