触れると背景変化
①マウスを乗せて背景色変化
onmouseover="this.style.backgroundColor='触れた時の背景色'" onmouseout="this.style.backgroundColor='離れた後の背景色'"
テーブルタグに↑このタグを組み合わせる事により、テーブルやセルにマウスを乗せた時や離した時の背景色を変更できます。
テーブルにも使えるってだけで、テーブルタグじゃないけど・・・
<TABLE BORDER onmouseover="this.style.backgroundColor='#0099ff'"
onmouseout="this.style.backgroundColor='#ccffff'">
<TR>
<TD>
テーブル部分の色を変化させます。
</TD>
</TR>
</TABLE>
|
マウスを乗せてみてNё↓
|
<TABLE BORDER BGCOLOR="#ffccff">
<TR>
<TD onmouseover="this.style.backgroundColor='#ff99cc'" onmouseout="this.style.backgroundColor='#ffcccc'">
セルに背景色</TD>
<TD onmouseover="this.style.backgroundColor='#cc66ff'" onmouseout="this.style.backgroundColor='#cc99ff'">
←と微妙に色違いｗ</TD>
</TR>
</TABLE>
|
今度は、予め背景色を設定し、その上でONマウスの効果を付けました。
|
②マウスを乗せて背景画像変化
今度は色ではなく、画像を変化させます。
以下のタグを<TABLE>部分や<TD>部分に組み合わせる事により、背景画像を変化させる事ができます。
onmouseover="this.style.backgroundImage='url(触れた時の画像URL)'" onmouseout="this.style.backgroundImage='url(触れた後の画像URL)'"
<TABLE BORDER onmouseover="this.style.backgroundImage='url(触れた時の画像URL)'" onmouseout="this.style.backgroundImage='url(触れた後の画像URL)'">
<TR>
<TD>
テーブルの画像を変化させます。
</TD>
<TD>触ってみてNё
</TD>
</TR>
</TABLE>
|
|
↑この二つの画像を
↓ 使ってます
|
|
テーブルの画像を変化させます。
かなり文字見難いけどｗ |
触ってみてNё |
|
<TABLE BORDER BACKGROUND="画像URL">
<TR>
<TD onmouseover="this.style.backgroundImage='url(触れた時の画像URL)'" onmouseout="this.style.backgroundImage='url(触れた後の画像URL)'">
あ い う え お</TD>
</TR>
<TR>
<TD onmouseover="this.style.backgroundImage='url(触れた時の画像URL)'" onmouseout="this.style.backgroundImage='url(触れた後の画像URL)'">
か き く け こ
</TD>
</TR>
<TR>
<TD onmouseover="this.style.backgroundImage='url(触れた時の画像URL)'" onmouseout="this.style.backgroundImage='url()'">
さ し す せ そ
</TD>
</TR>
</TABLE>
|
今度は、予めテーブルに背景画像を設定し、セルに背景画像を変化させる効果をつけました。
| あ い う え お |
| か き く け こ |
| さ し す せ そ |
一番下の『さしすせそ』のセルのみ、触れた後の画像URLが無記入です。
この部分を無記入にする事で、マウスを離した後は、背景付きのテーブルなら元の背景が戻るし、背景が無いテーブルなら背景ナシに戻ります。
|
|
