一枚の画像とＣＳＳでロールオーバーを実現するには？

[PR] 容量300MB、月額125円、高性能なサーバが日本最大級のバックボーンに直結。さくらのレンタルサーバ。

一枚の画像とＣＳＳでロールオーバーを実現するには？

　Javascriptを使わずに、しかも画像を一枚だけ使用してＣＳＳでロールオーバーを実現する方法をご紹介します。ポイントは、擬似クラスを使った背景画像の位置指定の微調整です（画像提供：www.artie.com）。

　なお、ピクセル単位で背景画像の位置を調節する方法については、「背景画像の位置をを数値とパーセントで調整する」で別のサンプルをご紹介しています。

サンプルＡ

サンプルＢ

サンプルＣ

背景画像

　　インラインレベル要素の<a>要素をディスプレイプロパティでブロックレベル要素として表示させ、縦に一つに繋がった背景画像（右図）のＡＢＣの文字がちょうど一つだけ表示される大きさに高さと幅を指定します。

　リンク要素内のテキストは、「見出し画像化とSEOスパム」のページでもご紹介している方法で画面上に表示されないようにインデントをかけます。

　このサンプルでは単に<div>を使用していますが、リスト要素<ul>でマークアップしても良いかと思われます。

<div class="roll01"><a href="#">サンプルＡ</a></div>
<div class="roll02"><a href="#">サンプルＢ</a></div>
<div class="roll03"><a href="#">サンプルＣ</a></div>

　以下のサンプルコードは、上記の背景画像「ＡＢＣ」の「Ａ」を表示させるサンプルです。マウスを乗せると「Ｃ」の画像が表示されるように調整してあります。

div.roll01 a {
display: block;
width: 152px;
height: 140px;
float: left;
border: 0;
padding: 0;
margin: 10px auto;
text-indent: -900em;
background-image: url(../img/abc01.gif);
background-repeat: no-repeat;
background-position: 0px 0px;
}
div.roll01 a:hover,div.roll01 a:active {
background-image: url(../img/abc01.gif);
background-repeat: no-repeat;
background-position: 0px -275px;
}

サイトトップページへ戻る