Website: Load hover preview as needed with JS.

template.jst

@@ -16,21 +16,31 @@
 </div>
 </div>
 <a class="screenshot" href="img/screenshot.png"><img src="img/screenshot.png" alt="screenshot"></a>
-<span class="hover"><img src="img/screenshot.png" alt="preview"></span>
+<%= content.match(/<\/h1>([^]*)<h2 id="more-information"/)[1] %>
-<%=
-  content
-    .match(/<\/h1>([^]*)<h2 id="more-information"/)[1]
-    .replace(/(<a href="([^"]+\.png)">.*?<\/a>)/g, '$1<span class="hover"><img src="$2" alt="preview"></span>')
-%>
 <script>
-var links = document.querySelectorAll('a[href="https://chrome.google.com/webstore/detail/4chan-x/ohnjgmpcibpbafdlkimncjhflgedgpam"]');
+function imagePreview() {
-for (var i = 0; i < links.length; i++) {
+  this.removeEventListener('mouseover', imagePreview, false);
-  links[i].addEventListener('click', function(e) {
+  var img = new Image();
-    if (window.chrome && !e.shiftKey && !e.altKey && !e.ctrlKey && !e.metaKey && e.button === 0) {
+  img.src = this.href;
-      chrome.webstore.install();
+  img.alt = 'preview';
-      e.preventDefault();
+  var span = document.createElement('span');
-    }
+  span.className = 'hover';
-  }, false);
+  span.appendChild(img);
+  this.appendChild(span);
+}
+function storeInstall(e) {
+  if (!e.shiftKey && !e.altKey && !e.ctrlKey && !e.metaKey && e.button === 0) {
+    chrome.webstore.install();
+    e.preventDefault();
+  }
+}
+for (var i = 0; i < document.links.length; i++) {
+  var link = document.links[i];
+  if (/\.png$/.test(link.pathname) && !link.querySelector('.hover')) {
+    link.addEventListener('mouseover', imagePreview, false);
+  } else if (window.chrome && link.host === 'chrome.google.com') {
+    link.addEventListener('click', storeInstall, false);
+  }
 }
 </script>
 </body></html>

web.css

@@ -45,7 +45,7 @@ a.screenshot > img {
 span.hover {
   display: none;
 }
-a:hover + span.hover {
+a:hover > span.hover {
   display: block;
   position: fixed;
   top: 0;