title: CSS Image Rollover
body: <p>I have script that handles image rollovers with css. What I would like to know if this the proper way of doing a CSS rollover? I also wanted to know if this is good how do you handle other rollover images do you have to have a separate css for each image?</p>
  
  <p>Here is an example: <a href="http://jsfiddle.net/GFec3/40/" rel="nofollow">http://jsfiddle.net/GFec3/40/</a></p>
  
  <p><strong>CSS Code:</strong> </p>
  
  <pre><code>a.rollover {
     display: block;
     width: 27px;
     height: 25px;
     text-decoration: none;
     background: url("http://www.gdisinc.com/barker/images/menubar/bnt_facebook.jpg");
  }
  
  a.rollover:hover {
     background-position: -350px 0;
  }
  
  .displace {
     position: absolute;
     left: -5000px;
  }
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code> &lt;a href="#" class="rollover" title="Webvamp" width="54" height="25"&gt;&lt;span class="displace"&gt;TEST&lt;/span&gt;&lt;/a&gt;
  </code></pre>
  
  <p>This works but just wanted to know is there a special way to handle more then one rollover image?</p>