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/
html 快速和肮脏的图像翻转
<img src="http://nonhover.jpg" alt="" class="roll-over" data-roll-over="http://hover.jpg" />
<script>
jQuery( "img.roll-over" ).hover( function() {
var old = $(this).attr('src');
var roll = $(this).data('roll-over');
$(this).attr('src', roll).data('roll-over', old);
}, function() {
var old = $(this).attr('src');
var roll = $(this).data('roll-over');
$(this).attr('src', roll).data('roll-over', old);
}
);
</script>