m004
表のセルにマウスを重ねると背景色・背景画像やフォントが変わる
Copyright(C) 2004 web工房 All Rights Reserved
action
| 背景色(1) | ◆セルの背景色が変化します(1)◇style.background=''◇背景なし→skyblue |
| 背景色(2) | ◆セルの背景色が変化します(2)◇style.background='skyblue'◇skyblue→red |
| 背景画像 | ◆セルの背景画像が変化します◇style.backgroundImage='url(〜)' |
| フォント種類 | ◆フォントの種類が変化します◇style.fontFamily◇MS明朝→MS Pゴシック |
| フォントサイズ | ◆フォントの大きさが変化します◇style.fontSize◇15ポイント→10ポイント |
| フォント斜体 | ◆フォントを斜体→通常の状態に変更します◇style.fontStyle='italic' |
| フォント太さ | ◆フォントの太さが変化します◇style.fontWeight='bold'◇太線→通常の太さに |
| フォント色 | ◆フォントの色が変化します◇style.color='red'◇orange→red |
web技
■はじめに
※<td align="center" widt="***">等のセルの表示設定は省略しています。
※セルの初期設定について style=""を使用した場合と使用しない場合を記述しています。
※わざわざstyle=""を記述したのは、onmouseover/onmouseoutで使用する場合と、記述方法が微妙に異なることを示すためです。
※<font〜>はHTML4.01では｢非推奨タグ｣になっており、｢可能な限り使用しない｣とされています。
◆セルの背景色1（背景なし→skyblue)
※背景色なしのためセルの背景色の初期設定はなし
※this.style.backgroundColor='skyblue'→this.style.background='skyblue'と記述することもできます(｢Color｣を省略)。
-----次の行から(copy)-----
<td onmouseover="this.style.backgroundColor='skyblue'"
onmouseout="this.style.backgroundColor=''">背景色(1)</td>
-----上の行まで(copy)-----
◆セルの背景色2（skyblue→red)
※背景色の初期設定<td style="background-color:skyblue;">---style=""を使用した場合
※style=""を使用せず<td bgcolor="skyblue">〜</td>という方法もあります
-----次の行から(copy)-----
<td style="background-color:skyblue;"
onmouseover="this.style.backgroundColor='red'"
onmouseout="this.style.backgroundColor='skyblue'">背景色(2)</td>
-----上の行まで(copy)-----
◆セルの背景画像（skyblue→red)
※背景色の初期設定">---style=""を使用した場合
<td style="background-image:url(../../../top_gif/hp_wallp4.gif);"
background-image とハイフンが入ります
background-image:url(画像のパス)は特に ''で囲む必要はありません
※イベントハンドラonmouseover/onmouseout使用時
onmouseover="this.style.backgroundImage='url(../../../top_gif/hp_wallp8.gif)'"
backgroundImage はハイフンは入らずImageのIの字は大文字にして下さい
backgroundImage='url(画像のパス)'のようにurl(画像のパス)を ''で囲んで下さい
(囲まないと｢ランタイムエラー｣になることがあります)
-----次の行から(copy)-----
<td style="background-image:url../../../top_gif/hp_wallp4.gif);"
onmouseover="this.style.backgroundImage='url(../../../top_gif/hp_wallp8.gif)'"
onmouseout="this.style.backgroundImage='url(../../../top_gif/hp_wallp4.gif)'">背景画像</td>
-----上の行まで(copy)-----
◆フォントの種類(MS明朝→MS Pゴシック)
※フォントの種類の初期設定<td style="font-family:'ＭＳ 明朝';">---style=""を使用した場合
※style=""を使用せず<td><font face="ＭＳ ゴシック">〜</font></td>という方法もあります
-----次の行から(copy)-----
<td style="font-family:'ＭＳ 明朝';"
onmouseover="this.style.fontFamily='ＭＳ Ｐゴシック'"
onmouseout="this.style.fontFamily='ＭＳ 明朝'">フォント種類</td>
-----上の行まで(copy)-----
◆フォントのサイズ(15ポイント→10ポイント)
※フォントのサイズの初期設定<td style="font-size:15pt;">---style=""を使用した場合
※style=""を使用せず<td><font size="4">〜</font></td>という方法もあります
-----次の行から(copy)-----
<td style="font-size:15pt;"
onmouseover="this.style.fontSize='10pt'"
onmouseout="this.style.fontSize='15pt'">フォントサイズ</td>
-----上の行まで(copy)-----
◆フォントのスタイル(斜体→通常の状態)
※フォントのスタイルの初期設定<td style="font-style:italic;">---style=""を使用した場合
※style=""を使用せず<td><i>〜</i></td>という方法もあります
-----次の行から(copy)-----
<td style="font-style:italic;"
onmouseover="this.style.fontStyle='normal'"
onmouseout="this.style.fontStyle='italic'">フォント斜体</td>
-----上の行まで(copy)-----
◆フォントの太さ(太線→通常の太さに)
※フォントの種類の初期設定<td style="font-weight:bold;">---style=""を使用した場合
※style=""を使用せず<td><b>〜</b></td>という方法もあります
-----次の行から(copy)-----
<td style="font-weight:bold;"
onmouseover="this.style.fontWeight='normal'"
onmouseout="this.style.fontWeight='bold'">フォント太さ</td>
-----上の行まで(copy)-----
◆フォントの色(orange→red)
※フォントの種類の初期設定<td style="color:orange;">---style=""を使用した場合
※style=""を使用せず<td><font color="#009999">〜</font></td>という方法もあります
-----次の行から(copy)-----
<td style="color:orange;"
onmouseover="this.style.color='red'"
onmouseout="this.style.color='orange'">フォント色</td>
-----上の行まで(copy)-----
応用技(1)
※下記の文章にカーソルを重ねて下さい。(セル内の文字を変える例です)
| 【例】昔昔、あるところに、おじいさんとおばあさんが... |
-----次の行から(copy)-----
<table width="80%" border="1">
<tr>
<td
onmouseover="this.style.fontSize='12pt'; this.style.color='red'; this.style.fontWeight='bold'"
onmouseout="this.style.fontSize=''; this.style.color=''; this.style.fontWeight=''"">
【例】昔昔、あるところに、おじいさんとおばあさんが...
</td>
</tr>
</table>
-----上の行まで(copy)-----
※フォントサイズ・色・太さの3つが同時に変化しています。
【発展技】
※セルの数が多数あって、それぞれのセルにこのようなフォント変更の記述を行うと、非常に煩雑になります。
※そのためjavascriptを用いて記述を簡略化する技があります。
◆web工房新館の
[技a011]セルにマウスカーソルを重ねると背景画像がフォントが変化する(javascript版)
を参照して下さい。判るひとには判る面白技です(^^)。
応用技(2)
※変化させる文字をspanタグ<span>〜</span>で囲み、<span〜>にonmouseover/onmouseoutを記述します。
※下記の文章の下線付き文字にカーソルを重ねて下さい。
【例】昔昔、 あるところに、 おじいさんと おばあさんが住んでいました。
-----次の行から(copy)-----
<span onmouseover="this.style.fontSize='15pt'" onmouseout="this.style.fontSize=''">【例】</span>昔昔、
<span onmouseover="this.style.fontWeight='bold'" onmouseout="this.style.fontWeight=''">あるところ</span>に、
<span onmouseover="this.style.color='red'" onmouseout="this.style.color=''">おじいさん</span>と
<span onmouseover="this.style.color='orange'" onmouseout="this.style.color=''">おばあさん</span>
が住んでいました。
-----上の行まで(copy)-----
※上の記述では下線付き文字<u>〜</u>は省略しています。
※通常の状態にするには｢normal｣を省略しています。
応用技(3)
(他のセル)
※セルにid属性を設定し、特定のidのセルの背景色を変更するように指定します。
※下表の左側のセルにカーソルを重ねて下さい。右側のセルの背景色も変わります。
| カーソルを重ねると | <td id="TD1"...> |
| 右側のセルの背景色が変わるよ | <td id="TD2"...> |
※マウスカーソルを重ねるセルの記述
-----次の行から(copy)-----
<td bgcolor="#cccccc"
onmouseover="this.style.background='#00ffff'; TD1.style.background='#00ffff'"
onmouseout="this.style.background='#cccccc'; TD1.style.background='#00ff00'">
-----上の行まで(copy)-----
※背景色を変えるセル の記述
<td id="TD1" bgcolor="#cccccc"〜>
解説等
◆マウスカーソルを文字や画像に重ねると、文字の色や形・背景色・画像そのものが画像の見え方等々、変化する技は、簡単にウェブページに動きを与えることができる技ですので、必ず自分のものにして下さい。
※javascriptと併用してスタイル属性を変えると、かなりのところまで面白いことができると思います。このサイトでも、あちらこちらでやってます(^^)。
※この技を活用するポイントは、オブジェクトのname/id属性を理解することでしょうか。
keyword
◇onmouseover◇onmouseout◇this.style
history
(2004.09.23)記述を一部修正しました。
(2004.05)設置---もっとも早い段階で掲載された技。その後、いろいろ追加したり書き替えたりしました。
注意
◆操作MENUの[Window Resize]を選択するとウィンドウサイズが変更可能です。インラインフレームの幅もウィンドウ幅に追従します。
◆上記の[web技]をクリップボードにコピーしテキストエディタに貼り付けて使用する場合は、表示のための改行記号や全角・半角スペースの記号等を削除して下さい。
-----次の行から(copy)-----
(この部分をクリップボードにコピーしてテキストエディタ等に貼り付けて下さい)
-----上の行まで(copy)-----