CSSで画像のロールオーバー

top2011_0414.jpg

今更！？という話題しれませんが、text-indent:-9999px;は、好ましくないと
Googleの発表があった為、今後この方法は使用されなくなるのではないだろうか。
※このあたりの内容は後日改めて書き留めておこうと思う。

ということで、リンク要素にボタン画像を使用したロールオーバーの方法を書き留めておこうと思う。

■ポイント
・今回のポイントは、デフォルトではボタン画像が表示されている。
・hoverを使用する事でボタン画像に対してhiddenを適応される。
・ボタン画像がhidden(非表示)される事で、ボタン画像の下に隠れていた背景画像(アクティブなボタンイメージ)を表示させる。

■サンプルはこちら
サンプル

■主なソース

html

    

  • Home

  • css
    • 

  • jQuery
    • 

  • html5
    •

css

ul,li {list-style-type:none; margin:0; padding:0; }
li {float:left;}
ul {overflow:hidden;}
a img {border:none;}
.bottomarea {width:400px; margin:1em auto;}

/*ボタン要素の設定*/
.bottomarea a {display:block; width:100px; height:50px;}
.bottomarea a:hover img {visibility:hidden;}

/*IE6用*/
.ie6style a:hover {background:transparent;}

/*各ボタンの背景を設定*/
#Home {background:url(img/bottomimg_home_active.gif) no-repeat top;}
#css {background:url(img/bottomimg_css_active.gif) no-repeat top;}
#jQuery {background:url(img/bottomimg_jquery_active.gif) no-repeat top;}
#html5 {background:url(img/bottomimg_html5_active.gif) no-repeat top;}


 

IE6は対象外にすべきと強く主張したいのですが、そうもいかない状況がまだある。
数年後は消えることを切に願うばかり・・・。/p>

ページトップへ戻る為のリンクです