CSSでイメージロールオーバー

CSSで完全なイメージロールオーバーさせてみる。対応ブラウザは意外に広く、IE5以降、Gecko、もちろんSafari、Opera。
ソースも短く、idとclassを使い分ければかなりソースを圧縮できるし、JavaScriptがなくても動作する。
弱点は、imageのaltが使えないのでユーザビリティに欠けること。だから、商業的なWebで使っちゃ駄目だろうなぁ。メディア型に「画像表示可／不可」があれば解決するんだがなぁ。

a.testRoll{
	display:block;
	width: 50px;
	height: 50px;
	background-image:url(通常表示画像のパス);
}
a.testRoll:hover{
	background-image:url(ロールオーバー時の画像のパス);
}

とhtml側。

<a class="testRoll" href="どこぞ" title="ここに書いておけばいいようにならんかな">></a>