オンマウスでページの色をかえる
表示の例
文字(●)にマウスポインタをのせると、このページの背景色がかわります。
ソースは下のようになります。
表示させたい場所のHTMLソースに貼り付けましょう。
(必ず一度メモ帳などに貼り付けてから、あなたのページのHTMLソースに貼り付けてください)
ソース
<table border="0" cellpadding="5">
<tr>
<td bgcolor="#CCCCCC"><font color="#D2FFD2" style="font-size:16px" onMouseOver="document.bgColor='#D2FFD2'" onMouseOut="document.bgColor='#D2FFD2'">●</font></td>
<td bgcolor="#CCCCCC"><font color="#FFFFD2" style="font-size:16px" onMouseOver="document.bgColor='#FFFFD2'" onMouseOut="document.bgColor='#FFFFD2'">●</font></td>
<td bgcolor="#CCCCCC"><font color="#FFDDDD" style="font-size:16px" onMouseOver="document.bgColor='#FFDDDD'" onMouseOut="document.bgColor='#FFDDDD'">●</font></td>
<td bgcolor="#CCCCCC"><font color="#DDFFFF" style="font-size:16px" onMouseOver="document.bgColor='#DDFFFF'" onMouseOut="document.bgColor='#DDFFFF'">●</font></td>
<td bgcolor="#CCCCCC"><font color="#FFFFFF" style="font-size:16px" onMouseOver="document.bgColor='#FFFFFF'" onMouseOut="document.bgColor='#FFFFFF'">●</font></td>
</tr>
</table>
文字(●)の色とマウスをのせた時の色、マウスが離れた時の色を同じ色に設定しています。
下の表を見てあなたのお好みにかえてみましょう。
文字の色 color="#D2FFD2" の #D2FFD2など
文字の大きさ style="font-size:16px" の 16など
マウスをのせた時の色 onMouseOver="document.bgColor='#D2FFD2'" の #D2FFD2など
マウスがはなれた時の色 onMouseOut="document.bgColor='#D2FFD2'" の #D2FFD2など
ホームページお役立ち小技集のTOPへ