Add mouseover function for people images

layouts/custom/people.html

@@ -48,7 +48,15 @@
             {{ end }}
             <div class="column left">
                 {{ if not (eq .Params.pic "") }}
-                <img src="images/{{.Params.pic}}" alt="" class="pic">
+                {{ if and (ne .Params.title "Strand_d") (ne .Params.title "Henry_g") }}
+                <img src="images/{{.Params.pic}}" id={{.Params.title}} alt="" class="pic">
+                {{ end }}
+                {{ if (eq .Params.title "Strand_d") }}
+                <img src="images/{{.Params.pic}}" id={{.Params.title}} alt="" class="pic" onmouseover="changeImage({{.Params.title}}, 'images/strand_d_scowl.jpg')" onmouseleave="changeImage({{.Params.title}}, 'images/{{.Params.pic}}')">
+                {{ end }}
+                {{ if (eq .Params.title "Henry_g") }}
+                <img src="images/{{.Params.pic}}" id={{.Params.title}} alt="" class="pic" onmouseover="changeImage({{.Params.title}}, 'images/henry_g_hat.jpg')" onmouseleave="changeImage({{.Params.title}}, 'images/{{.Params.pic}}')">
+                {{ end }}
                 {{ end }}
             </div>
             <div class="column right" style="text-align: justify">
@@ -85,4 +93,10 @@
     </div>
 </div>
 
+<script>
+    function changeImage(id,img){
+        setTimeout(function() {document.getElementById(id).src=img;},5);
+    }
+</script>
+
 {{ partial "footer.html" . }}
\ No newline at end of file