2007年09月14日

ロールオーバー画像の実現方法

今回は「ロールオーバー画像の実現方法」についてお話します。

ロールオーバー画像は、
グローバルナビ、サイドメニューなどの
ボタンリンクによく使用されています。

ホームページをコーディングする際には
決して避けては通れない、
不可欠な技術と言えます。

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

posted by baba at 20:45 | Comment(0) | TrackBack(0) | テクニック
この記事へのコメント

この記事へのトラックバック
 
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。