MOUSEOVER


	『マウスオーバー』とはサイト内のリンクしてる所や､画像の上にカーソルをのせた時に起こるイベントの事で文字の色が変わったり画像が変わったりとサイトを飾る事ができます。

では､まずはリンク部分の色が変わるサンプルを見てみましょう。

sample

sampleの文字の上にカーソルを乗せると文字の色が変わったでしょう？これはスタイルシートで簡単に設定できます。何も考えずにまずやってみましょう。
<HEAD>～</HEAD>の間に
<STYLE type="text/css">

</STYLE>
を書き込んでみましょう。
あとは設定したいリンク部分
<a href="http://www...>
の中にclass="a"を書き込んで
<a href="http://www..."　class="a">
となるようにします。

このとき注意する事はすでにスタイルシートの設定がされてる場合は.aを他のアルファベットに変えましょうね。.bや.cなど使われてないアルファベットで構いません。

では色の設定ですがこれも簡単です。
.a:link{color:#333333;}・・・リンク部分の色
.a:visited{color:#666666;}・・・すでに見たページの色
.a:hover{color:#ff6600;}・・・カーソルがのった時の色
＃333333、＃666666などをお好きな色に変えるだけでＯＫです。
これだけでもサイトの見え方が違ってくると思います。

では次はリンク部分にカーソルが乗ったとき文字などが移動するサンプルを見てみましょう。

sample

sampleの文字の上にカーソルを乗せると文字が少し下がったでしょう？これもスタイルシートで簡単に設定できます。ではもう一度何も考えずにやってみましょう。
<HEAD>～</HEAD>の間に
<STYLE type="text/css">

</STYLE>
を書き込んでみましょう。
あとは設定したいリンク部分
<a href="http://www...>
の中にclass="a"を書き込んで
<a href="http://www..."　class="a">
となるようにします。

このときも前回同様すでにスタイルシートの設定がされてる場合は.aを他のアルファベットに変えましょうね。

では移動の設定ですがこれも簡単です。
top:1px;・・・上下の移動
left:1px;・・・左右の移動
移動はここでは下に１ｐｘ、右に１ｐｘとなってますので上に移動の場合は-１ｐｘ、左に移動は-１ｐｘでＯＫです。色々値を変えて試してみてくださいね。これは画像にも使えますのでプッシュボタンなどに使うと良いでしょうね。

カーソルが乗ると画像が変わるのはまた別の機会に紹介しましょう。