動的な視覚効果
マウスオーバーとは、リンクや画像、テーブルにマウスを乗せると、色などが変化してそれがリンクであることを知らせる視覚効果です。
動的コンテンツとは異なり、ユーザのアクションによって初めて動作しますから、それほど不快を与える要素ではなく、むしろ使いやすさ、見栄えが良くなります。
もちろん、使いすぎは厳禁です。
主なマウスオーバー
一番使用されているのは、リンクされた文字の色が変化する効果です。
また、画像などにも使用でき、ホームページビルダーでは「ロールオーバー」とも呼ばれています。
文字リンク
では、それぞれ解説していきます。
文字リンクのマウスオーバーはCSS（スタイルシート）で行います。
以下のように記述します。
1. ヘッダー内に直接書く方法
<!–
a {text-decoration : none ;}
a:hover {text-decoration : underline ; color : #990000 ;}
–>
</style>
2. 外部CSSで読み込む 【style.css】
<html>
<head>
<meta http-equiv=“Content-Type” content=“text/html; charset=Shift_JIS”>
<meta http-equiv=“Content-Style-Type” content=“text/css”>
<title>リンクのマウスオーバー</title>
<link rel=”stylesheet” href=”style.css” type=”text/css”>
</head>
<body>
</body>
</html>
style.css内の書き方
/* リンク指定 */
a {text-decoration : none ;}
a:hover {text-decoration : underline ; color : #990000 ;}
このようにすると、スタイルシートが読み込まれているページのリンク色がマウスオーバーの時に変わります。
今回のスタイルシート例では、【text-decoration : none】は、「リンクに下線を引かない」ように指示しており、また【a:hover {text-decoration : underline ; color : #990000】は、マウスがリンクの上に来たとき、「下線を引き、リンク文字の色を#990000に変える」という指示です。
目的に合わせて、適宜に変更してください。
ボックスのマウスオーバー
次に、DIVボックスやテーブルのセルに対するマウスオーバー効果です。
これはボックスやテーブルのセル上にマウスが来たとき、セルの色を変えて、クリックするとリンク先に飛ぶという効果です。
当サイトでも使用しています。
こちらはJavascriptを使用します。
いろいろな書き方がありますが、以下のようなスクリプトを<DIV>タグや<TD>タグに加えます。
赤字の部分が変更箇所です。
最初の赤字は【onmouseover】の属性で、マウスが上に来たときの色を指定します。
次の赤字は【onmouseout】属性で、マウスが離れたときの色を指定します。
さらに最後の赤字の【onclick】属性は、ボックスやセルをクリックしたときのリンク先を指定します。
