マウスカーソルを重ねたセルの色を変更する

IE5.0以降のみ（Macintosh版IE5.0では正しく表示されない場合があります）

マウスイベントを利用すると、カーソルが重なったセルの背景色を変更することができます。ここでは、カーソルが重なったセルの背景色をピンク色で表示する方法を考えてみましょう。

■　セルの背景色を変更する関すの実行

マウスカーソルが重なった時と離れたときのイベントを使って、セルの背景色を変更する関数を呼び出します。

<TABLE WIDTH="65%" BORDER="0" onMouseOver="cellbgcolor('pink')" onMouseOut="bgrecover('cyan')" ALIGN="center" BGCOLOR="#00ffff">

オブジェクトの色は「#0000ff」のような16進数だけでなく、「pink」「blue」のような色を表す単語（カラーネーム）でも指定できます。

■　セルの背景色の変更

カーソルの下にあるオブジェクトを調べて、オブジェクトの種類がセルの場合には背景色を変更します。

<SCRIPT LANGUAGE="JavaScript">
<!--
var evobj;
function cellbgcolor(bg){
evobj=event.srcElement;
if(evobj.tagName=="TR"||evobj.tagName=="TABLE"){
return
}
while(evobj.tagName!="TD"){
evobj=evobj.parentElement;
}
evobj.style.backgroundColor=bg;
}

function bgrecover(bg){
evobj.style.backgroundColor=bg;
}
//-->

例では、「event」オブジェクトを使って取得したセルのプロパティを変更することで、カーソルが重なっているセルの色を変更しています。
カーソルが重なっているセルを調べるには、「event.srcElement.tagName」プロパティを使ってカーソルが重なっているオブジェクトのタグ名を取得します。この時、取得したタグ名には、表自体や表の中の様々なオブジェクトが含まれているため、セル（<TD>タグ）のオブジェクトだけを選別してからオブジェクトの背景色を変更するのがポイントです。

<<<戻る