(0)  /配置:中央(横)、フロート:標準、罫線:1、セルスペース:2、セル間スペース:0、背景色:#FFFFFF、明罫線:#EDE6FF、暗罫線:#C1B7DF、幅:90%、。  セル/配置:横・縦標準、背景色:#FFFFFF、幅:25%

 

ここに文字や画像をペーストします。 改行 → 高さが変わります。 ……

 

……

 

……

 

……

 

……

 

……

 

……

 

……

 

……

 

……

 

……

 

……

 

……

 

……

 

……

 

 

@

 

(1)  /配置:中央(横)、フロート:標準、罫線:0、セルスペース:0、セル間スペース:1、背景色:#530080、幅:90%。  セル/配置:横・縦標準、背景色:#FFFFFF、幅:25%

 

◆ここに文字や画像をペーストします。 改行 → 高さが変わります。 セル背景色無変化タグ(例)

 

…… …… ……
……

 

……

 

……

 

……

 

……

 

……

 

……

 

……

 

……

 

 

A

 

(2)  /配置:中央(横)、フロート:標準、罫線:0、セルスペース:0、セル間スペース:2、背景色:#FFFFFF、幅:90%。  セル/配置:横・縦標準、背景色:#F3F3F3、幅:25%

  ※:マウスオーバー時にセル背景色が指定色の色違い。

ここに文字や画像をペーストします。 改行 → 高さが変わります。

 

セルの背景画像の指定(例) …… ……
……

 

◆ 画像挿入(例)
……

 

……

 

 

B

 

(3)  /配置:中央(横)、フロート:標準、罫線:0、セルスペース:0、セル間スペース:1、背景色:#530080、幅:600ピクセル、高さ:50ピクセル。  セル/配置:中央(横)、縦(中央)、背景色:#FFFFFF、幅:25%

 

 ここに文字や画像をペーストします。改行 → 高さが変わります。 …… …… ……
……

 

 ……

 

 ……

 

 

C

 

(4)  /配置:中央(横)、フロート:標準、罫線:0、セルスペース:0、セル間スペース:2、背景色:#FFFFFF、幅:600ピクセル、高さ:50ピクセル。  セル/配置:中央(横)、縦(標準)、背景色:#DCD9E0、幅:25%

 

 ここに文字や画像をペーストします。改行 → 高さが変わります。 …… …… ……
……

 

 ……

 

 ……

 

 

D

 

(5)  /配置:標準(横)、フロート:標準、罫線:0、セルスペース:1、セル間スペース:0、背景色:#630198、幅:100%、高さ:。  セル/配置:標準(横)、縦(標準)、背景色:#DCD9E0、幅:25%

 

1……   2…… 3…… 4……

 

下は、上のタグを4回繰り返し。

1……   2…… 3…… 4……
1……   2…… 3…… 4……
1……   2…… 3…… 4……
1……   2…… 3…… 4……

 

E

 

(6)  /配置:中央(横)、フロート:標準、罫線:0、セルスペース:0、セル間スペース:0、背景色:#630198、幅:99%、高さ:。  セル/配置:、縦(標準)、背景色:#DCD9E0、幅:16%

 

…… …… …… …… ……

 

F 

(7)  /配置:中央(横)、フロート:標準、罫線:0、セルスペース:1、セル間スペース:1、背景色:標準、幅:100%、高さ:。  セル/配置:、縦(標準)、背景色:標準、幅:指定値
中央配置の表に背景画像を挿入した(例) : 表配置 : 中央横、幅 : 100%、セル幅 : 70%、高さ : 任意(改行で可変)、背景画像 : あり(下記)

     ※:背景画像サイズを”ピクセル”で指定する場合の(例) : <td width="300" background="http:/…… blst01.gif" height="300">    

  背景画像 : blst01.gif

 

 

 

 

 

ホーム へ       サンプルページ  ハイライト表  highlight_table.htm

表(table)にマウスオン/オフ時、セルの背景色が変化、痕跡を遺します。   DHTML。    変化色などのカスタマイズはテキストエディターなどで可。  all 対応。    コピー、編集し、簡単にWebで応用できまっ、(^ ^)。

デモ : マウスオーバーで。  ※: PCのファイルを直接表示で可。

 

< ご使用方法 >

 ・ 保存highlight_table.htm を右クリック、【名前を付けてリンクを保存】 - <保存する場所>: ……、などで。  ※: 変わってしまった、ファイル名や、*.htm 中のパスは要修正。

 ・ ペーストは、highlight_table.htm をテキストエディターで開き、ホームページ作成ソフトなどの ”テキストモード で、新しいページや hogehoge.htm(=任意の挿入先ファイル名) の、 <head> 〜 </head> の任意の行間に (*1) を、さらに <body> 〜 </body>の任意の行間に (*2) をペーストします。   ※: テキストモードコード/HTMLタグ挿入/HTMLメニュー など。

 ・ 編集 : hogehoge.htm に テキストモードでペースト 後は、ホームページ作成ソフトのデザインや通常モード、テキストモード、テキストエディターで編集します。  下記の(例) (*1) と、(*2)  を参考に太字部分の編集を任意に行います。 

※: 外部ドメイン(サイト)にアップロートの画像などの使用は、非表示に注意。  画像の alt タグは不可、サイズ指定の pt などの省略は注意。  スクリプト構文中への 改行混入に注意。

 ・ アップロードは、hogehoge.htm と同じホルダーに、使用してる記画像などをアップロードします。   別ホルダーの場合は、hogehoge.htm の該当パス注意。

 ・ 作動テストは Edge〜 などで。  更新の確認は、ブラウザーなどのキャッシュのクリア後に実施。  (1) [F5]キ- or Ctrl+Rキー を押し、最新データ読み込みで。  更に、(2) Edgeを全て閉じ、再起動を行い、【Edge】 - 右上 [……] - [設定] - [プライバシー、検索、サービス] - [閲覧デ-タをクリア] - [クリア-するデ-タの選択] - [v]閲覧の履歴 -[今すくクリア] をクリック。  留めに、(3) サーバーのファイルを一旦削除。

 ・ 関連情報 : 色記号 RGB5 〃6 〃8 フォントスタイルシートリファレンスホームページ開設入門HTMLをテキストエギタ-で編集

 

(*1)  highlight_table.htm (例) 下線      挿入先の  <head> 〜 </head> の、 部分にペーストします。

 HTMLの編集方法   (*1) をテキストエディターで開き、下記↓のHTMLを挿入先ファイルにペースト、編集し使用。
〔この列ペースト不要〕

シフトJIS使用(削除不可)

URL前・ツールバーに表示のアイコンファイル名(削除可)favicon_**.ico など

<style type= </style>は(削除可)
(*1)〜(*3)表タイトル背景
body 文字色 背景色 画像 下線
ハイパーリンク 〃
表示済みの〃
マウスオーバー時の〃
クリック中の〃
フォント

リンクを新しいWinで開くを標準(削除可)※:target= いろいろ
同じフレーム=_self、ページ全体=_top、親フレーム=_parent

お気に入りなど表示のページ名(≠ファイル名)

JavaScript

 

<meta http-equiv="Content-Type" content="text/html; charset=x-sjis">

<link REL="SHORTCUT ICON" href="favicon.ico">

<style type="text/css"><!--
.xxx0 { background: #F9F8F9 url('wttec.gif'); }
.xxx1 { background-color:#E3E0DC; }
.xxx2 { background-color:#FFFFFF; }
body { color:#000000; background: #F9F8F9 url('wttec.gif'); text-decoration:none }
a:link { color:#190049; background-color:#FBFAFE; text-decoration:none; }
a:visited { color:#333; background-color:#EDECEF; text-decoration:none; }
a:hover { color:#1F002E; background-color:#D3FE7C; text-decoration:underline; }
a:active { color:#1F002E; background-color:#C3FEBB; text-decoration:underline; }
font {font-size:12px; line-height:14px;}
body,tr,td,form{ font-family:メイリオ.Lucida Sans Regular,MS PGothic,; font-size: 12px}
 --></style>

<base target="_blank">

<title>サンプルページ  ハイライト表</title>

<!-- ★ ---------- ↓ この間をコピー、編集、ペーストします。 ---------- -->
<script language="JavaScript1.2">
//Highlight Table Cells Script-- By Dynamic Drive
//For full source code and more DHTML scripts, visit http://www.dynamicdrive.com
//This credit MUST stay intact for use

var ns6=document.getElementById&&!document.all
var ie=document.all

====  この間、説明を省略。  ===

if (ie&&event.toElement!=source||ns6&&e.relatedTarget!=source)
source.style.backgroundColor=originalcolor
}
</script>
<!-- ☆ ---------- ↑ この間をコピー、編集、ペーストします。 ---------- -->

 

 

(*2)  highlight_table.htm (例) 表      挿入先の  <body> 〜 </body> の、 部分にペーストします。

 HTMLの編集方法   (*2)をテキストエディターで開き、下記↓のHTMLを挿入先ファイルにペースト、編集し使用。
〔この列ペースト不要〕

 

 

 

 

 

 

 

 

<table 部に記述
マウスオン時背景色
 痕跡背景色
:
 

以下、同様。

 

 

 


 

 

 

 

 

 

マウスオン時背景色 痕跡背景色

 

無変化 : <td部に記述

 

 

 

 

 

 

 

 

 

 

 

 

マウスオン時背景色 痕跡背景色

 

 

 

 

 

 


無変化 : <td部に記述

 

 

 

 

<!-- ★---------- ↓ この間をコピー、編集、ペーストします。 ----------★ -->


<table border="0" cellSpacing="1" width="99%">
<tr>
<td width="3%" bgcolor="#E3E0DC"><b>(0)</b></td>
<td bgcolor="#E3E0DC" vAlign="top" width="83%"><span style="color: rgb(149,0,7)">&nbsp;</span><strong>表</strong>/配置:中央(横)、フロート:標準、罫線:1、セルスペース:2、セル間スペース:0、背景色:<font SIZE="2">#FFFFFF</font>、明罫線:<font SIZE="2">#EDE6FF</font>、暗罫線:<font SIZE="2">#C1B7DF</font>、幅:90%、。  <strong>セル</strong>/配置:横・縦標準、背景色:#FFFFFF、幅:25%
</td>
</tr>
</table>
<p> </p>
<div align="center">
<center><table border="1" cellpadding="2" cellspacing="0" style="border-collapse: collapse" width="90%" id="AutoNumber1" bordercolorlight="#EDE6FF" bordercolordark="#C1B7DF" bgcolor="#FFFFFF" onMouseover="changeto(event, '#E1DBD7')" onMouseout="changeback(event, '#F3F1F8')">
<tbody>
<tr>
<td width="25%" height="50">ここに文字や画像をペーストします。 改行
→ 高さが変わります。</td>
<td width="25%" height="50">……<p> </td>

 

@<p> </p>
<table border="0" cellSpacing="1" width="99%">
<tr>
<td width="3%" bgcolor="#E3E0DC"><b>(1)</b></td>
<td bgcolor="#E3E0DC" vAlign="top" width="83%"><span style="color: rgb(149,0,7)">&nbsp;</span><strong>表</strong>/配置:中央(横)、フロート:標準、罫線:0、セルスペース:0、セル間スペース:1、背景色:#530080、幅:90%。  <strong>セル</strong>/配置:横・縦標準、背景色:#FFFFFF、幅:25%
</td>
</tr>
</table>
<p> </p>
<div align="center"><center>
<table border="0" cellspacing="1" width="90%" bgcolor="#530080" cellpadding="0"onMouseover="changeto(event, '#E1DBD7')" onMouseout="changeback(event, '#F3F1F8')">
<tr>
<td id="ignore" width="25%" bgcolor="#FFFFFF">◆ここに文字や画像をペーストします。 改行
→ 高さが変わります。 セル背景色無変化タグ(例)<p> </td>
<td width="25%" bgcolor="#FFFFFF">……</td>
<td width="25%" bgcolor="#FFFFFF">……</td>

 

A<p> </p>
<table border="0" cellSpacing="1" width="99%">
<tr>
<td width="3%" bgcolor="#E3E0DC"><b>(2)</b></td>
<td bgcolor="#E3E0DC" vAlign="top" width="83%"><span style="color: rgb(149,0,7)">&nbsp;</span><strong>表</strong>/配置:中央(横)、フロート:標準、罫線:0、セルスペース:0、セル間スペース:2、背景色:#FFFFFF、幅:90%。  <strong>セル</strong>/配置:横・縦標準、背景色:#F3F3F3、幅:25%
</td>
</tr>
</table>
<p>  ※:マウスオーバー時にセル背景色が指定色の色違い。</p>
<!-- ★---------- ↓ この間をコピー、編集、ペーストします。 ----------★ -->
<div align="center"><center>
<table border="0" cellspacing="2" width="90%" bgcolor="#FFFFFF" cellpadding="0" onMouseover="changeto(event, '#FFFF8C')" onMouseout="changeback(event, '#F3F1F8')">
<tr>
<td width="25%" bgcolor="#F3F3F3">ここに文字や画像をペーストします。 改行
→ 高さが変わります。<p> </td>
<td width="25%" bgcolor="#F3F3F3" background="http://members.tripod.co.jp/oka1/blst01.gif">セルの背景画像の指定(例)</td>
<td width="25%" bgcolor="#F3F3F3">……</td>
<td width="25%" bgcolor="#F3F3F3">……</td>
</tr>
<tr>
<td width="25%" bgcolor="#F3F3F3">……<p> </td>
<td id="ignore" width="25%" bgcolor="#F3F3F3"><img
src=" bullet3.gif" width="20" height="20">◆ 画像挿入(例)</td>
<td width="25%" bgcolor="#F3F3F3"></td>
<td width="25%" bgcolor="#F3F3F3"></td>

====  以下、説明を省略。  ====
 

<!-- ★---------- ↑ この間をコピー、編集、ペーストします。 ----------★ -->