オンマウスでセル内の文字をかえる
表示の例
当サイトおすすめ環境
OS ブラウザ 画面のサイズ
文字にマウスポインタをのせた時に、セル内の文字がかわります。
ソースは下のようになります。
表示させたい場所のHTMLソースに貼り付けましょう。
(必ず一度メモ帳などに貼り付けてから、あなたのページのHTMLソースに貼り付けてください)
ソース
<table border="1" cellpadding="5" cellspacing="2" width="400" bgcolor="#FFFFFF" bordercolor="#3366FF">
<tr>
<td align="center" colspan="3" bgcolor="#CCCCFF">
<font color="#3333FF" style="font-size:15px">当サイトおすすめ環境</font>
</td>
</tr>
<tr>
<td align="center" width="33%" bgcolor="#FFFFFF">
<font color="#3333FF" style="font-size:15px; cursor:hand" onMouseOver="document.all['myCel'].innerText='Windows98 以上をお勧めします。'" onMouseOut="document.all['myCel'].innerText='↑マウスを乗せてください↑'">OS</font> 
</td>
<td align="center" width="34%" bgcolor="#FFFFFF">
<font color="#3333FF" style="font-size:15px; cursor:hand" onMouseOver="document.all['myCel'].innerText='InternetExplorer 5 以上をお勧めします。'" onMouseOut="document.all['myCel'].innerText='↑マウスを乗せてください↑'">ブラウザ</font> 
</td>
<td align="center" width="33%" bgcolor="#FFFFFF">
<font color="#3333FF" style="font-size:15px; cursor:hand" onMouseOver="document.all['myCel'].innerText='1024×768 をお勧めします。'" onMouseOut="document.all['myCel'].innerText='↑マウスを乗せてください↑'">画面のサイズ</font> 
</td>
</tr>
<tr>
<td align="center" colspan="3" id="myCel" class="link" bgcolor="#FFFFFF">↑マウスを乗せてください↑</td>
</tr>
</table>
onMouseOver="document.all['myCel'].innerText='Windows98 以上をお勧めします。'" などの部分が、マウスポインタをのせた時にかわる文字です。
onMouseOut="document.all['myCel'].innerText='↑マウスを乗せてください↑'" の部分は、マウスポインタがはなれた時に表示される文字です。
<td align="center" colspan="3" id="myCel" class="link" bgcolor="#FFFFFF">↑マウスを乗せてください↑</td> は、文字がかわるセルの部分です。
この部分に表示される文字の色や大きさを、下のようなソースで指定をしています。HTMLソースのHEAD区間に貼り付けましょう。
ソース
<STYLE type="text/css">
<!--
.link {color:#3333FF; font-size:15px}
-->
</STYLE>
文字の色は color:#3333FF の #3333FF を、大きさは font-size:15px の 15 をかえてください。
表は下をご参考にあなたのお好みにかえてみましょう。
罫線のサイズ border="1" の 1
セル内のスペース cellpadding="5" の 5
セル間のスペース cellspacing="2" の 2
表の幅 width="400" の 400
背景の色 bgcolor="#FFFFFF" の #FFFFFF
罫線の色 bordercolor="#3366FF" の #3366FF
ホームページお役立ち小技集のTOPへ