Merge "docs: Updates to GIFs on WH home page" into mnc-io-docs

9 files changed, 29 insertions, 11 deletions

diff --git a/docs/html/images/topic/instant-apps/s3-BandH-animated.gif b/docs/html/images/topic/instant-apps/s3-BandH-animated.gif
index efa882740cb5..4e44f741f43c 100644
--- a/docs/html/images/topic/instant-apps/s3-BandH-animated.gif
+++ b/docs/html/images/topic/instant-apps/s3-BandH-animated.gif
diff --git a/docs/html/images/topic/instant-apps/s3-BuzzFeed-animated.gif b/docs/html/images/topic/instant-apps/s3-BuzzFeed-animated.gif
index 16c461942671..7ed534eac88e 100644
--- a/docs/html/images/topic/instant-apps/s3-BuzzFeed-animated.gif
+++ b/docs/html/images/topic/instant-apps/s3-BuzzFeed-animated.gif
diff --git a/docs/html/images/topic/instant-apps/s3-ParkandPay-animated.gif b/docs/html/images/topic/instant-apps/s3-ParkandPay-animated.gif
index f5cbfb0d77ca..4a14dc2e5fe1 100644
--- a/docs/html/images/topic/instant-apps/s3-ParkandPay-animated.gif
+++ b/docs/html/images/topic/instant-apps/s3-ParkandPay-animated.gif
diff --git a/docs/html/images/topic/instant-apps/s3-ParkandPay-static.png b/docs/html/images/topic/instant-apps/s3-ParkandPay-static.png
index 1e07a74cc760..fa9c2bfb6cfc 100644
--- a/docs/html/images/topic/instant-apps/s3-ParkandPay-static.png
+++ b/docs/html/images/topic/instant-apps/s3-ParkandPay-static.png
diff --git a/docs/html/topic/instant-apps/index.jd b/docs/html/topic/instant-apps/index.jd
index 28540aecfaa4..b843405139a2 100644
--- a/docs/html/topic/instant-apps/index.jd
+++ b/docs/html/topic/instant-apps/index.jd
@@ -76,7 +76,9 @@ excludeFromSuggestions=true
   <div class="cols" style="margin-top:1em;">
     <div class="col-4of12 gif-container">
       <img class="partner-gifs"
-        src="/images/topic/instant-apps/s3-BandH-static.png">
+        src="/images/topic/instant-apps/s3-BandH-static.png"
+        data-stat="/images/topic/instant-apps/s3-BandH-static.png"
+        data-anim="/images/topic/instant-apps/s3-BandH-animated.gif">
       <p class="figure-caption">
         <em>B&amp;H Photo<br/>
             (via Google Search)</em>
@@ -85,7 +87,9 @@ excludeFromSuggestions=true
 
     <div class="col-4of12 gif-container">
       <img class="partner-gifs"
-        src="/images/topic/instant-apps/s3-BuzzFeed-static.png">
+        src="/images/topic/instant-apps/s3-BuzzFeed-static.png"
+        data-stat="/images/topic/instant-apps/s3-BuzzFeed-static.png"
+        data-anim="/images/topic/instant-apps/s3-BuzzFeed-animated.gif">
       <p class="figure-caption">
         <em>BuzzfeedVideo<br/>
             (via a shared link)</em>
@@ -94,7 +98,9 @@ excludeFromSuggestions=true
 
     <div class="col-4of12 gif-container">
       <img class="partner-gifs"
-        src="/images/topic/instant-apps/s3-ParkandPay-static.png">
+        src="/images/topic/instant-apps/s3-ParkandPay-static.png"
+        data-stat="/images/topic/instant-apps/s3-ParkandPay-static.png"
+        data-anim="/images/topic/instant-apps/s3-ParkandPay-animated.gif">
       <p class="figure-caption">
         <em>Park and Pay<br/>
             (via NFC)</em>
@@ -263,18 +269,30 @@ excludeFromSuggestions=true
 
 (function () {
 
-  function swapOnMouseover(evt) {
-    var target = evt.target;
-    var imageSrc = $(target).attr("src");
+  function onMouseEnter(evt) {
+    if (evt.target.dataset && evt.target.dataset.anim) {
+      swap(evt.target, {
+        newStr: evt.target.dataset.anim
+      });
+    }
+  }
+
+  function onMouseOut(evt) {
+    if (evt.target.dataset && evt.target.dataset.stat) {
+      swap(evt.target, {
+        newStr: evt.target.dataset.stat
+      });
+    }
+  }
 
-    // Assumes that images are named *-static and *-animated.
-    if (imageSrc.indexOf("static") > -1) {
-      var newImageSrc = imageSrc.replace("static.png", "animated.gif");
-      $(target).attr("src", newImageSrc).removeAttr("onmouseenter");
+  function swap(target, options) {
+    if (options && options.newStr) {
+      $(target).attr("src", options.newStr);
     }
   }
 
-  $(".partner-gifs").mouseenter(swapOnMouseover);
+  $(".partner-gifs").mouseenter(onMouseEnter);
+  $(".partner-gifs").mouseout(onMouseOut);
 
 })();
 
diff --git a/docs/image_sources/topic/instant-apps/s3-BandH-animated.gif b/docs/image_sources/topic/instant-apps/s3-BandH-animated.gif
index efa882740cb5..4e44f741f43c 100644
--- a/docs/image_sources/topic/instant-apps/s3-BandH-animated.gif
+++ b/docs/image_sources/topic/instant-apps/s3-BandH-animated.gif
diff --git a/docs/image_sources/topic/instant-apps/s3-BuzzFeed-animated.gif b/docs/image_sources/topic/instant-apps/s3-BuzzFeed-animated.gif
index 16c461942671..7ed534eac88e 100644
--- a/docs/image_sources/topic/instant-apps/s3-BuzzFeed-animated.gif
+++ b/docs/image_sources/topic/instant-apps/s3-BuzzFeed-animated.gif
diff --git a/docs/image_sources/topic/instant-apps/s3-ParkandPay-animated.gif b/docs/image_sources/topic/instant-apps/s3-ParkandPay-animated.gif
index f5cbfb0d77ca..4a14dc2e5fe1 100644
--- a/docs/image_sources/topic/instant-apps/s3-ParkandPay-animated.gif
+++ b/docs/image_sources/topic/instant-apps/s3-ParkandPay-animated.gif
diff --git a/docs/image_sources/topic/instant-apps/s3-ParkandPay-static.png b/docs/image_sources/topic/instant-apps/s3-ParkandPay-static.png
index 1e07a74cc760..fa9c2bfb6cfc 100644
--- a/docs/image_sources/topic/instant-apps/s3-ParkandPay-static.png
+++ b/docs/image_sources/topic/instant-apps/s3-ParkandPay-static.png