ホームページでマウスを乗せると背景色が変わるテーブル

オンマウスで背景色が変わるテーブル

マウスを乗せると表の背景色が変わります

マウスをのせて下さい。背景色が変わります。

変えるところ→黄色の部分

上記のソース　コピーして使用して下さい
<table border="0" width="350" bgcolor="#cccc99" onmouseover="style.background='#ccccff'" onmouseout="style.background='#cccc99'"> <tr> <td><BR> <BR> マウスをのせて下さい。背景色が変わります。<BR> <BR> <BR> </td> </tr> </table>


各セルごとにマウスオーバーで背景色を変えることができます。上のサンプルでは table border="0" としましたが、下記のサンプルでは table border="1" にしましたので枠線がついてます。

マウスをのせて下さい。背景色が変わります。	マウスをのせて下さい。背景色が変わります。
マウスをのせて下さい。背景色が変わります。	マウスをのせて下さい。背景色が変わります。

上記のソース　コピーして使用して下さい
<table border="0" width="350" bgcolor="#333333" cellspacing="1"> <tr> <td bgcolor="#ffffff" onmouseover="style.background='#cccccc'" onmouseout="style.background='#ffffff'"><BR> マウスをのせて下さい。背景色が変わります。<BR> <BR> </td> <TD bgcolor="#ffffff" onmouseover="style.background='#ffe8f7'" onmouseout="style.background='#ffffff'"><BR> マウスをのせて下さい。背景色が変わります。<BR> <BR> </td> </tr> <tr> <td bgcolor="#66cccc" onmouseover="style.background='#edcda7'" onmouseout="style.background='#66cccc'"><BR> マウスをのせて下さい。背景色が変わります。<BR> <BR> </td> <td bgcolor="#ccccff" onmouseover="style.background='#ccffcc'" onmouseout="style.background='#ccccff'"><BR> マウスをのせて下さい。背景色が変わります。<BR> <BR> </td> </tr> </table>



テーブル枠線の種類 かわいい点線 CSSボーダースタイル CSSボーダー CSSテーブル




★skip ページtop ★skip ページtop