Memo：最低限のclass属性で画像ロールオーバーを作ってみる
今回はtipというよりはメモ的な内容。とあるところで画像ロールオーバーのJavaScriptが配布されていたのですが、「余計なクラス属性がいらないので綺麗なソースを保てます」というような内容が書かれていて、でもそれCSSでできないかな？と考えてみたのがこちら。
ただしこの方法ではIE6以下が非対応です…
外からはわかりにくいのですが、一応サンプル↓
解説…
通常表示する画像と、マウスを乗せた時に表示する画像は、一つの画像です。こんなカンジ
(100x40)a要素の高さをこれの半分（20px）にしてoverflow:hiddenを指定し、:hoverの時、positionで上にずらしているだけ。
ということで、画像の幅は自由ですが高さは全て同じでなければならないため、汎用性は劣りますけれども、JavaScriptを使わなくても、クラス属性一つだけで可能です。
欠点は、CSSを無効にすると画像がそのまま表示されてしまうこと。
ソースはこちら。
（ちなみに私はXHTML使いなのでimg要素の最後をスラッシュで閉じていますが、HTMLの場合は最後のスラッシュは不要です）
HTML
<div class="imgchange">
<a href="#"><img src="menu.gif" width="100" height="40" alt="menu" /></a>
<a href="#"><img src="menu.gif" width="100" height="40" alt="menu" /></a>
<a href="#"><img src="menu.gif" width="100" height="40" alt="menu" /></a>
</div>
<a href="#"><img src="menu.gif" width="100" height="40" alt="menu" /></a>
<a href="#"><img src="menu.gif" width="100" height="40" alt="menu" /></a>
<a href="#"><img src="menu.gif" width="100" height="40" alt="menu" /></a>
</div>
CSS
img {
border:none;
}
.imgchange a {
position:relative; /* IE7対策 */
display:block;
width:100px;
height:20px;
overflow:hidden;
}
.imgchange a:hover img{
position:relative;
top:-20px;
}
border:none;
}
.imgchange a {
position:relative; /* IE7対策 */
display:block;
width:100px;
height:20px;
overflow:hidden;
}
.imgchange a:hover img{
position:relative;
top:-20px;
}
これと同じような方法で、「画像置換法」というのがあります。テキストリンクの背景画像を指定し、文字を非表示にして（text-indent:-9999など）、背景画像をpositionでずらすのですが、こちらはリンク一つ一つにclass属性を指定しなければならないので、今回の目的からはちょっと外れてしまうなあと…。ただ、CSS3の擬似セレクタを使うのなら、class属性がなくても、別々の背景画像を指定できます。
今はtext-indent:-9999というのはあまり使われなくなってきているようです。CSS有効で画像非表示にしたときに、何も表示されなくなるという問題がありますので。