The image contains the two states for the rollover (hover or normal) like we will do using a background image with CSS.

We need to wrap the image in a <span> element with the following styles:
   display: block;
   width: "same as visible area of each state (normal or hover) of the image";
   height: "same as visible area of each state of the image";
   overflow: hidden;
   position: relative; // IE needs it

The <img> element is wrapped by an <a> element. We need the following styles to the a:hover:
   position: relative;
   top:  "negative position same as height of the image visible area"

HTML code:
   <span class="img-rollover"><a href="#"><img src="image.gif" alt="" /></a></span>

CSS code:
   span.img-rollover{
   width: 20px; 
   height: 20px; 
   display: block; 
   overflow: hidden; 
   position: relative;
   }
   span.img-rollover a:hover{
   top: -20px; 
   position: relative;
   }

Demo at http://uninstallme.com/rollover-de-imagenes-en-html-elemento-img-sin-javascript/

http://uninstallme.com/rollover-de-imagenes-en-html-elemento-img-sin-javascript/

Image rollover () without javascript

css, html

HTML