Back when I first started doing web development I used Javascript Image objects and onMouseOver and onMouseOut to make image rollovers for web pages. This worked well, but was kind of clunky and required 2 separate images.

画像のロールオーバー効果をCSSで簡単実装する方法。
特に真新しいものではないと思いますが、知らない人も多いような気がしたので紹介します。

anchorタグのhover 時に背景画像をずらすという手法です。
コードはCSSとHTMLそれぞれ次のように記述します。

/* CSS */
a.srollover {
display: block;
width: 22px;
height: 22px;
background: url("close.gif") 0 0 no-repeat;
text-decoration: none;
}

a:hover.srollover {
background-position: -22px 0;
}

<!--HTML-->
<a class="srollover" href="#">&nbsp;</a>

背景画像は次のような画像を使い、ホバー時に background-position で位置をずらすことでロールオーバー効果が得られます。



JavaScriptで行うよりもはるかに簡単で便利ですね。