ロールオーバー画像は、
グローバルナビ、サイドメニューなどの
ボタンリンクによく使用されています。
ホームページをコーディングする際には
決して避けては通れない、
不可欠な技術と言えます。
JavaScriptなどで実現する方法もありますが、
cssプログですので、
もちろんcssによる実現方法を
ご紹介します。
私からは
の2パターンご紹介します。
直接画像を置く方法
ボタン画像をdivなどで囲みそのボタン画像を囲んだdivの背景に
ロールオーバー時の画像を設定します。
わかりにくいですが、ボタンを囲んだものの背景にロールオーバー時の画像を設定することで
ボタンの下に、ロールオーバー時の画像が
隠れている状態です。
そして、ボタンをマウスオーバーした際に、
ボタンの表示を消せば、
ボタンの下にあったロールオーバー時の画像が
現れ、あたかも画像が切り替わったかのように
見えます。
この方法は直接画像を置いているため、
ブラウザで背景画像を印刷しない設定に
なっていても、印刷することができます。
- （htmlコーディング）
-
<div class="rollover01">
<a href="#"><img src="images/rollover_off.jpg" alt="ボタン" /></a></div>
- （cssサンプル）
-
img {
border:0;}
.rollover01 {width:126px;}
height:28px;
background:url(images/rollover_on.jpg) no-repeat left bottom;
.rollover01 a {display:block;}
width:126px;
height:28px;
font-size:1px;
line-height:1px;
outline:none;
.rollover01 a:hover {text-indent:-9999px;}
※サンプルではdivタグで囲んでいますが、liやddで囲むことが多いです。
テキストの置き換えを使った方法
この方法は、テキストと画像の置き換えを行い、ボタンを背景画像で表示させます。
テキストと画像の置き換えについてはこちらを
ご参照ください。
背景に設定する画像は、通常時とロールオーバー時の画像を並べたものを
使用します。
これから、右のサンプル画像をもとにして
説明させていただきます。
背景画像のheightの半分のheightをアンカーに設定し、background-positionをtopに設定することで、
通常時の画像のみ表示させます。
(サンプル画像のheightが56pxなので、
アンカーのheightは28pxになります。)
そして、マウスオーバーした際に、background-positionをbottomにすれば、
画像が切り替わったかのように見えます。
この方法だと、画像ファイルが1つで済み、更新の際
迷うことがありません。
また、background-positionの
top、center、bottom
left、center、right
を使用することで、最大9パターン切り替えることが
できます。
(グローバルナビで、カレント表示用、
通常表示用、マウスオーバー用の3パターン必要な
場合などに使用)
positionにpxなどを設定すれば、
何パターンでも表示できますが、
Netscapeでは、xとy両方に数値を設定しないと
うまく表示できません。
（background-position:left -28px;はNG）
- （htmlコーディング）
-
<div class="rollover02">
<a href="#">ボタン</a></div>
- （cssサンプル）
-
img {
border:0;}
.rollover02 a {display:block;}
width:126px;
height:28px;
background:url(images/rollover.jpg) no-repeat left top;
font-size:1px;
line-height:1px;
text-indent:-9999px;
text-decoration:none;
outline:none;
.rollover02 a:hover {
background-position:left bottom;}
※サンプルではdivタグで囲んでいますが、liやddで囲むことが多いです。
横並びのボタン画像を使用したサンプル
- （htmlコーディング）
-
<div class="rollover03">
<a href="#">ボタン</a></div>
- （cssサンプル）
-
img {
border:0;}
.rollover03 a {display:block;}
width:126px;
height:28px;
background:url(images/rollover.jpg) no-repeat left top;
font-size:1px;
line-height:1px;
text-indent:-9999px;
text-decoration:none;
outline:none;
.rollover03 a:hover {
background-position:right top;}
※サンプルではdivタグで囲んでいますが、liやddで囲むことが多いです。
HTML5＆CSS3の最新情報はこちら → HTML5GOGO
