マウスカーソルを合わせたとき画像を切り替える方法

フッターに南国のビーチの写真を載せてますが、
実はマウスカーソルを合わせると画像が変わります。

このやり方は、スタイルシートを使います。

まず、フッターに次の記述を入れます。

リンクの背景として画像を設定するため、
リンクテキストは空白を１文字入れておきます。

<p><a class="footerimg" href="&nbsp;http://mogu.1challenger.com/">&nbsp;</a></p>

で、スタイルシートにこう書きます。

a.footerimg{
 display: block;
 width:641px;
 height:299px;
 text-indent: -1000px;
 background-image: url("http://mogu.1challenger.com/img/footerimg.jpg");
 margin-left:auto;
 margin-right:auto;
}
a.footerimg:hover {
   background-position: top right;
}

表示させたい２枚の画像を結合し、１枚の横に長い画像としておいて、
マウスオーバーしたときに右側を表示するようにします。

なお、このやり方は
こちらのサイトを参考にさせていただきました。

hoverでリンク画像を切り替える