CSSで実現するスマートなロールオーバー

HP登録でSEO対策！アクセスアップにコチラ！
検出率No.1・PC軽快さNo.1のウイルス対策ソフト

暇があればコーディングコンテストの作品を眺めているのですが、ほんと勉強になります。
長谷川賞を受信したComplexさんが行っていたロールーオーバーの手法が、JavasScriptも画像置換も使わずにと素敵だったので紹介します。

サンプルはボクの方でアレンジしていますので、オリジナルも合わせて参考にお願いします。

まずサンプルのXHTMLソース

<ul>
	<li class="ajaBtn"><a href="/ajax/"><img src="ajax_a.gif" alt="ajax" /></a></li>
	<li class="amaBtn"><a href="/amazon/"><img src="amazon_a.gif" alt="amazon" /></a></li>
	<li class="cssBtn"><a href="/css/"><img src="css_a.gif" alt="css" /></a></li>
	<li class="htmBtn"><a href="/html/"><img src="html_a.gif" alt="html" /></a></li>
</ul>

ul,li要素にimg要素が入っているシンプルなソース。

次にCSSソース

li{
	list-style-type:none;
	width:150px;
	height:50px;
	float:left;
}
li img{
	border:0;
}
li.ajaBtn{
	background:url(./ajax_b.gif);
}
li.amaBtn{
	background:url(./amazon_b.gif);
}
li.cssBtn{
	background:url(./css_b.gif);
}
li.htmBtn{
	background:url(./html_b.gif);
}
li a{
	display:block;
	width:150px;
	height:50px;
}
li a:hover {
	background-color:transparent;
}
li a:hover img{
	visibility:hidden;
}

サンプル

li要素の背景にロールオーバー時の画像を配置しておき、a要素にマウスがかかった際にimg要素のvisibilityをhiddenにして対応しています。

ポイントはある程度大きいボタンを利用する場合は、a要素のheightのサイズをとっておくこと。

これ、はやりそうな気がします。

追記(2007/06/18)

ie6で動かないの指摘を受けて、a:hover {background-color:transparent;}を追加しました。

スポンサードリンク

日時: 2007年6月17日 16:07
css

«WebクリエイティブのためのDOM Scripting | メイン | キーワード出現頻度解析リリースのお知らせ»

このエントリーのトラックバックURL: http://blog.webcreativepark.net/cgi/mt/mt-bt.cgi/190

トラックバック内容: » CSSのみで画像のロールオーバー（その1） from CSS Lecture
画像のロールオーバーって色々やり方ってあると思うんですが、今回はソースも短くて済む手軽な方法を紹介したいと思います。 CSSのみで画像のロールオーバー（そ...; トラックバック時刻: 2008年6月16日 10:30

コメント

display: none; と同様に visibility: hidden; も音声ブラウザでは読まれない可能性があると耳にしたことがあります。

ロールオーバーしなくてもユーザーが困らない・迷わないビジュアルデザインであることが一番だと思います。ロールオーバーは追加機能というかあると良いと考えているものなので、CSS ではなく JavaScript で実装しています。

投稿者:ぴんどめ | 2007年6月18日 10:21

確かに素敵なCSSですね。IEの5世代はロールオーバーしないですね。。
ただロールオーバーしなくてもボタンとして見えるのでいい感じです。
ここもこのCSSのいいところですね。

投稿者:ゆうすけ | 2007年6月18日 13:45

Internet Explorer 5でもCSSの指定の仕方によって、ロールオーバーさせることは可能です。
http://kikky.net/pc/mouse_over.html

アレンジされている部分でInternet Explorer 5がリンクができなくなっています。

投稿者:kikky | 2007年8月 9日 07:24

素晴らしいcssです！
タグの順番を変更しますと反映されないことがありますが、これは当然の事なのでしょうか？
また、altタグを入れれば、ブラウザで反映されましたが、
上記にaltタグを入れないことに何か秘密があるのでしょうか？

質問になって申し訳ございません。

投稿者:Anonymous | 2008年1月21日 16:52

ごめんなさい。タグの順番をどのように変更されたのでしょうか？
class名と要素の関係さえ保っておけば大丈夫だと思うのですが。。。

altタグ？alt属性のことですかね？
サンプルにはちゃんとalt属性は入っていますが。。。

力になれないで申し訳ないです。

投稿者:西畑一馬 | 2008年1月21日 21:27

すみません。勘違いをしておりました。alt属性が入っておりました。
text-indent:-100px;でliの中の文字を飛ばすよりも、alt属性を使っている方が、断然、僕は素晴らしく思います。
タグの順番ですが、すみませんでした。たぶん要素を省いたクラスだったからだと思います。.ajaBtn←のような感じです。htmlのほうは問題なかったと思います。
すみません。
とても、ご親切な対応有り難うございます。

投稿者:N | 2008年1月22日 02:03

何度もすみません。タグの順番のことですが、原因がわかりました。
｝←が一つ抜けていました。恥ずかしい限りです。ご迷惑をおかけ致しました。

投稿者:N | 2008年1月22日 15:09

これ、いいですね！
こちらの記事を参考に1枚画像バージョンのものも作成してみました。
SEOにも強くアクセシビリティも強い。すばらしいと思います。
ありがとうございました。

投稿者:eiji | 2009年6月19日 22:27