初心者向けホームページ作成講座
フリーソフトでホームページを作ろう!
touka.gif(49 byte)
touka.gif(49 byte)
touka.gif(49 byte)
touka.gif(49 byte)
touka.gif(49 byte)
t-1.png(323 byte)

マウスが乗ると背景が変わる小技

(更新日 08/11/27)

 サイトのメニューの上にマウスカーソルを乗せると背景色や背景画像が変わったりするのをよく見ますよね。リンクのテキスト部分だけ変えるのはスタイルシートで簡単にできるんですが、リンクを設置しているメニュー欄の空白部分まで変えたり画像を入れ替えたりする方法をこのページで紹介していきます。

スタイルシートでメニュー欄の背景を変える

 下にサンプルのメニューボックスを作ってみました。各メニューにはリンクを付けており、通常のリンクにマウスを乗せてもテキスト部分にしかスタイルが反映されません。

 そこでリンクに「display: block」を指定。「display: block」はインラインの要素もブロック要素として扱えるようにするスタイルで、空白部分もリンクのスタイルを反映させる事ができます。

 スタイルシートの記述例は下記のようになります。「menu_link」は単なるclass名なので、何でも構いません。ここではコンテント領域が180pxのボックスの中にメニューを入れているので、余白部分も含めてそれに合うサイズに調整してます。

a.menu_link {text-decoration: none; width: 175px; padding-left: 5px; display: block;}
a.menu_link:hover {background-color: #000000; color: #FFFFFF;}

 あとは「<a href="***.html" class="menu_link">」のようにリンクの部分に指定しておいたclass名を記述するだけです。

ロールオーバーで背景画像を変える

 スタイルシートを使ってメニューの背景画像を入れ替えるのを一般的にロールオーバーと言うそうです。このロールオーバーは一つの画像の表示部分をずらして入れ替わっているように見せる方法が多いんですが、完全に別々の画像を表示する事もできます。

 左のサンプルは実際に2つの画像を使ってマウスカーソルが上に乗った時に背景の画像を入れ替えてます。

 この仕組みですが、結局は上と同じで「display: block」を使ってリンクをブロック要素にし、通常のリンクの背景とマウスカーソルが乗った時の背景をそれぞれ別画像にしているだけです。

onmouse-3.png(2805 byte)  上の応用で左のように一つの画像の表示位置を通常の場合とマウスカーソルが上に乗った時にそれぞれ変える事で、画像が入れ替わるように見せる事ができます。この場合はリンクの通常時に上半分をポジションを指定して表示し、マウスカーソルが重なった時に下半分を表示すればいいわけです。この画像を使ったサンプルが下になります。

 但しこの方法はスタイルシートの記述が若干複雑で、マウスカーソルが乗っていない時と乗っている時のポジションを指定しなければなりません。ここでは横幅200px、縦幅150pxの画像を使ってマウスカーソルが乗った時に背景のポジションを「background-position: -0 -75px」として、表示位置を下半分にずらしています。

a.sample-2 {height: 75px; width: 200px; background-image: url('画像パス'); background-repeat: no-repeat; display: block; }
a.sample-2:hover { background-image: url('画像パス'); background-repeat: no-repeat; background-position: -0 -75px;" display: block; }

広告
t-2.png(196 byte)