Added rollover

jaz303 · Sep 18, 2008 · 908c1cb · 908c1cb
1 parent af7cb54
commit 908c1cb
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 0 deletions.
diff --git a/images/r.gif b/images/r.gif
diff --git a/images/r_h.gif b/images/r_h.gif
diff --git a/javascripts/jquery.rollover.js b/javascripts/jquery.rollover.js
@@ -0,0 +1,18 @@
+/**
+ * Rollover effect, changes element's src attribute on hover, e.g.:
+ *
+ * image.png?foo=bar => image_h.png?foo=bar
+ *
+ * Pass true to preload images.
+ */
+jQuery.fn.rollover = function(preload) {
+    this.filter(':not([src*="_h."])').each(function() {
+        var a = this.src, b = this.src.replace(/\.(\w+(\?[^$]*)?)$/, '_h.$1');
+        $(this).hover(function() { this.src = b; }, function() { this.src = a; });
+        if (preload) {
+            var i = new Image;
+            i.src = b;
+        }
+    });
+    return this;
+};
diff --git a/rollover.html b/rollover.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+
+<html>
+  <head>
+    <title>jQuery Image Rollover</title>
+    <script type='text/javascript' src='javascripts/jquery-1.2.6.min.js'></script>
+    <script type='text/javascript' src='javascripts/jquery.rollover.js'></script>
+    <link rel="stylesheet" href="stylesheets/main.css" type="text/css" />
+  </head>
+  <body>
+    <div id='container'>
+
+      <p>Images from <a href='http://www.externalharddrive.com/graphics/bullets/index.html'>External Hard Drive</a></p>
+
+      <img src='images/r.gif' />
+      <img src='images/r.gif?foo=bar' />
+      <img src='images/r_h.gif' />
+
+      <script type='text/javascript'>
+        $(function() {
+          $('img').rollover();
+        });
+      </script>
+
+    </div>
+  </body>
+</html>