CSSでロールオーバー（DHTML関連） | 小技集

CSSでロールオーバー

トップ > 小技集 > （DHTML関連）CSSでロールオーバー

CSSならこんなに簡単

　ロールオーバーとは、画像の上にマウスカーソルを当てると、画像が切り替わる動作のことで、ボタンなどに適用されます。実現するにはいくつかの方法がありますが、ここではCSSを使った方法を紹介します。

　以下のソースをコピペして、htmlファイルとして保存してください。

<html>
<head>
<title>CSSでロールオーバー</title>
<style type="text/css">
<!--
.back_to_top a {
 display:block;
 width:152px;
 background:url(back_to_top.gif) no-repeat;
 height:30px;
}
.back_to_top a:hover {
 background:url(back_to_top_b.gif) no-repeat;
}
//-->
</style>
</head>
<body>
<span class="back_to_top"><a href="http://www.google.co.jp/"></a></span>
</body>
</html>

　また、下の２つの画像をhtmlファイルと同じフォルダに保存してください。

	back_to_top.gif
	back_to_top_b.gif

　実際にご自分のサイトで使用する場合などは、フォーカス前とフォーカス後の画像を２つ用意し、画像のパスや名前、幅、高さ、遷移先URLなどは適宜書き換えてください。

ソース解読のためのヒント

ポイント１：リンクはaタグで
	画像をクリックしたときにどこかのURLに遷移するわけですが、まずはこの遷移先URLを普通にaタグのhref属性で指定します。文字に対してリンクを割り当てるわけではないのでaタグの内容は空にしておきます。

ポイント２： aタグをspanタグで囲む
	ポイント１のaタグをspanタグで囲みます。spanタグのclass属性にCSSのクラスを指定します。

ポイント３：通常時のクラスと、マウスオーバー時のクラスを定義する
	まず通常時のクラスを定義します。通常時の画像のURL、画像の高さおよび幅を記述し、display:blockとします。次にマウスオーバー時のクラスを定義します。こちらはマウスオーバー時の画像のURLを記述するだけです。

トップ > 小技集 > （DHTML関連）CSSでロールオーバー

トップ | このサイトについて | 管理者へメール | サイトマップ