title: CSS create text with inline image rollover
body: <p>I'm currently using this current HTML markup with Javascript to create text links with a inline image that "rolls over" on the text hover.</p>
  
  <pre><code>&lt;div&gt;&lt;a id="link" href="page.html"
          onmouseover="rollover(this.id,'over');"
          onmouseout="rollover(this.id,'out')"
       &gt;Link&lt;/a&gt;&lt;img id="linkButton" src="image.gif" /&gt;&lt;/div&gt;
  </code></pre>
  
  <p>It's important that the image is inline so I can easily create new text links with varying lengths of text. </p>
  
  <p>I want to try and get this done without Javascript, and using a single image containing the over and out states of the rollover, so probably using the background position trick. </p>