jaz303 / jquery-grab-bag
watch download tarball
public
Forks6Right
Watchers36Right
Description: Miscellaneous small jQuery plugins
Homepage: http://onehackoranother.com/projects/jquery/jquery-grab-bag/
Clone URL: git://github.com/jaz303/jquery-grab-bag.git
jquery-grab-bag / rollover.html
100644 63 lines (49 sloc) 2.528 kb
raw blame history 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html>
  <head>
    <title>jQuery Grab Bag - Image Rollover Plugin</title>
    <link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="http://onehackoranother.com/feed/" />
    <link rel="alternate" type="text/xml" title="RSS .92" href="http://onehackoranother.com/feed/rss/" />
    <link rel="alternate" type="application/atom+xml" title="Atom 1.0" href="http://onehackoranother.com/feed/atom/" />
    <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'>
      
      <h1>
        grab bag <span class='subtitle'>- assorted jQuery plugins</span>
      </h1>
      
      <div id='sidebar'>
        <ul id='project-nav'>
          <li><a href='index.html'>Plugin List</a></li>
        </ul>
        <ul id='ohoa-nav'>
          <li><a href='http://onehackoranother.com/feed/' id='subscribe'>Subscribe for updates &raquo;</a></li>
          <li><a href='http://onehackoranother.com/projects/'>Back to projects &raquo;</a></li>
          <li><a href='http://onehackoranother.com/'>Back to onehackoranother.com &raquo;</a></li>
        </ul>
      </div>
      
      <div id='main'>
        
        <h2>Image Rollover</h2>
        
        <p>Apply rollover image switch effect to any elements with the <code>src</code>
          attribute. Rollover image URL is determined by inserting <code>_h</code> before
          the image extension, and any images which already match this format will not
          have the effect applied. Pass <code>true</code> to preload images.</p>
        
        <pre>$('img').rollover(true);</pre>
        
        <img src='images/r.gif' />
        <img src='images/r.gif?foo=bar' />
        <img src='images/r_h.gif' />
 
        <p style='font-size:90%'>(images from <a href='http://www.externalharddrive.com/graphics/bullets/index.html'>External Hard Drive</a>)</p>
 
        <script type='text/javascript'>
          $(function() {
            $('img').rollover();
          });
        </script>
        
        <h2>Direct Link</h2>
        
        <p><a href='http://github.com/jaz303/jquery-grab-bag/tree/master/javascripts/jquery.rollover.js'>jquery.rollover.js</a></p>
        
      </div>
 
    </div>
  </body>
</html>