第62回　「マウスが乗ったら文字の色を変える」

今回は文字のスタイルを制御し、マウスが乗ったら文字の色を変えるプログラムについて説明します。
　文字の色を決めるスタイルシートのプロパティ名はcolorです。文字の色を黒色にするにはスタイルシートでは以下のように指定します。
　
color:black

　色名だけでなくカラーコードでも指定できます。
　
color:#000000

　スタイルシートの場合は、これだけでなくrgbを使って指定したり#000のように3桁で指定することもできます。*1
　これをJavaScriptで指定する場合には以下のように書きます。
　
document.getElementById(オブジェクト名).style.color

　赤色にするのであれば以下のように文字列やカラー名を代入します。
　
document.getElementById(オブジェクト名).style.color = "red"

　ところで肝心のテキストはHTMLの何のタグで指定すれば良いのでしょうか。テキスト単体の場合には
　
<div>
<span>

　のいずれかを使います。<div>はブロックタグ、<span>はインラインタグという違いがありますが指定できるプロパティは同じです。テーブル内に文字がある場合は、すでに<table><tr><th><td>タグなどで囲まれていますので、<div><span>を使う必要は少ないでしょう。
　実際には以下のように書きます。
　
<div id="myText">
マウスを乗せると赤色になります。
</div>

idですがスタイルシートで定義したものを指定します。この場合文字の色のみなので以下のように定義しておきます。

#myText {
color: black;
}

　マウスが乗ったら文字の色を変えるのですがonMouseover、onMouseoutイベントは直接divタグ内に書きます。
　
<div id="myText" onMouseover="changeTextColor('red')" onMouseout="changeTextColor('black')">
マウスを乗せると赤色になります。
</div>

　実際のプログラムは以下のようになります。

<html>
<head>
<title></title>
<style type="text/css"></style>
<script language="JavaScript"></script>
</head>
<body>
<div id="myText" onMouseover="changeTextColor('red')" onMouseout="changeTextColor('black')">
マウスを乗せると赤色になります。
</div>
</body>
</html>

　以前にも使ったthisで、より汎用的に書くこともできます。

<html>
<head>
<title></title>
<style type="text/css"></style>
<script language="JavaScript"></script>
</head>
<body>
<div id="myText" onMouseover="changeTextColor(this,'red')" onMouseout="changeTextColor(this,'black')">
マウスを乗せると赤色になります。
</div>
</body>
</html>

　次回は文字の背景色と文字サイズを指定してみます。

*1　以下のページにcolorプロパティでのカラー指定サンプルがあります。
http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/color_1.asp

第62回 「マウスが乗ったら文字の色を変える」

第62回　「マウスが乗ったら文字の色を変える」