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>

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

%d人のブロガーが「いいね」をつけました。