【おやじのweb技】 html/javascript/css等
表のセルにマウスを重ねると背景色やフォント表示が変わる◇javascript版セルの複数の項目をを同時変更するので煩雑になるスクリプトをｊａｖａｓｃｒｉｐｔを用いて簡略化します
[技m004]の応用技です
| おやじのweb工房 | 無断転載禁止 |
上の表(セル)にマウスカーソルを重ねて下さい。背景やフォントが変化します。
◆手順1【スクリプト】
※<head>〜</head>に記述します。
※swich関数を用いて、変更内容を変えています。
-----次の行から(copy)-----
<script type="text/javascript">
<!--
function MouseOver2(Obj,f) {
switch (f){
case 1:
Obj.style.background="#d6dbe7"; //背景色
Obj.style.fontWeight="bold"; //フォント太さ
Obj.style.color="red"; //フォントの色
break;
case 2:
Obj.style.background="#e7eff7";
Obj.style.fontWeight="bold";
Obj.style.color="blue";
break;
default:
Obj.style.background="";
Obj.style.fontWeight="";
Obj.style.color="";
}
}
-->
</script>
-----上の行まで(copy)-----
◆手順2【スクリップの実行】
※<body>〜</body>に記述します。
※スクリプト実行時、swich関数に用いる引数を渡します。
-----次の行から(copy)-----
<table width="90%" border="1">
<tr>
<td align="center" onmouseover="MouseOver2(this,1)"
onmouseout="MouseOver2(this,99)">おやじのweb工房</td>
<td align="center" onmouseover="MouseOver2(this,2)"
onmouseout="MouseOver2(this,99)">無断転載禁止</td>
</tr>
</table>
-----上の行まで(copy)-----
◆フォントサイズ・色・太さの3つが同時に変化しています。
◆セルの数が多数あって、それぞれのセルにこのようなフォント変更の記述を行うと非常に煩雑になります。
※[技m004]により、3つの項目の変更を通常通り記述すると下記のようになります。
<td onmouseover="this.style.backgroundColor='#d6dbe7'; this.style.fontWeight='bold'; this.style.color='blue';"
onmouseout="this.style.backgroundColor=''; this.style.fontWeight=''; this.style.color='';">
※これを各セル毎に記述しなければなりません。煩雑だし見にくくなりますね。
※javascriptを使うと変更する項目が増えてもhtml側の記述は下記のみとなります。
<td align="center" onmouseover="MouseOver2(this,1)" onmouseout="MouseOver2(this,99)">
◆javascriptは外部jsファイルにすることができます。
■[技m004]を開く
◆操作MENUの[Window Resize]を選択するとウィンドウサイズが変更可能です。インラインフレームの幅もウィンドウ幅に追従します。
◆上記の[web技]はtxtファイルを表示していますので、クリップボードにコピーして他のファイルに貼り付けできます。
-----次の行から(copy)-----
(この部分をクリップボードにコピー)
-----上の行まで(copy)-----
◆｢text保存｣は右側のインラインフレームに表示したテキストファイルをダウンロードします。｢クリック｣せず｢右クリック｣して｢対象をファイルに保存｣を選択して下さい。