オンマウスオーバーでテーブルセルや文字色変更

テーブル上にマウスを置くと文字色やセルの背景色を変えるようにします
<td>タグ内に記述します

<td style="○○○" onClick="□□□" onMouseOver="△△△" onMouseOut="×××"></td>

○○○はスタイル設定、□□□はセルをクリックした時の処理、△△△はマウスを置いた時の処理、×××はマウスが離れた時の処理です

[サンプル]
<table width="100%" border="1" cellspacing="0" bordercolor="#000000">
<tr>
<td width="25%" align="center" style="cursor:hand;">カーソルを手に</td>
<td width="25%" align="center" onmouseover="this.style.color='red'">文字を赤に</td>
<td width="25%" align="center" onmouseover="this.style.backgroundColor='red'" onmouseout="this.style.backgroundColor=''">背景を赤に</td>
<td width="25%" align="center" onClick="window.open('http://fefnir.com/kodukai/','_blank')">クリックで小遣いページを開く</td>
</tr>
</table>

以下のように表示されるはずです↓
カーソルを手に 文字を赤に 背景を赤に クリックで小遣いページを開く

TOP HTML講座のTOPへ戻る