此のページを用意して書き出す準備に当たってどういう風に体裁を整えれば良いかを考えまして とりあえず サンプルは 此のページから実行できる事 サンプルコードは 表示できる HTML の中に埋め込んで Zip ファイルにして見てもらうと言う事にしました。
又 サンプルのウィンドウの大きさも ある程度決めて置いた方が良いと思うので 此処で開くサイズは支障が無ければ 640x640 で サンプルのウィンドウの大きさも 640x640 と言う事にしたいと思います。
新しい ウィンドウを開くには a タグの href を開く時に target="_blank" <a href="..." target="_blank"> とすれば良いのですが 此は 通常通りのブラウザが開いてしまいます。もっと小さいのや 場所を指定したいとか余分なメニュー等は要らないとか 開いた後で こちらで 開いた物をコントロールしたいとか言う事になると <a href="..." target="_blank">では不適当です。
従って 最初はこのページからサンプルを 開く 閉じる 為の Script を挙げておきます。

640px x 640px のウィンドウを開く    開いた ウィンドウを閉じる 

此の HTML OpenTest のダウンロード ( 開く方 開かれる方 両方入っています。)

開かれた時に上の物が無くなって下の物が見えてくるとかの演出の為の上のウィンドウのフェードアウトをする Java Script です。
HTML を見れば コメントがあるので 特に問題は無いと思いますが 各ブラウザによって透過率を設定するコードが違う所だけが問題でしょうか。
後 style sheet での position:absolute; で重なったエリアですが z-index を指定しなかったら HTML の後に書いた物が上に来ます。

フェードアウトする ウィンドウを開く     開いた ウィンドウを閉じる  

此の HTML FadeOut のダウンロード

開かれた時に上の物が重なって見える様になるとかの演出の為の上のウィンドウのインをする Java Script です。
HTML を見れば コメントがあるので 特に問題は無いと思いますが 今回は setTimeout で回して
Timer Call も 関数の中の関数を使用しています。

フェードインする ウィンドウを開く     開いた ウィンドウを閉じる  

此の HTML FadeIn のダウンロード

本日から スタイル CSS を Java Script によって変える事を始めます。
スタイルを Java Script で 変えるには document の style プロパティーを変える 読み込むと言う操作になります。
具体的には document.style.color = "red"; 等です。
この時注意事項としては background-color 等の - は認められず - の代わりに 次の文字を大文字化して backgroundColor として指定する事です。
一番最初は position:absolute; で指定した領域の left top を変えてボールに見える領域を動かす HTML をアップします。
単にタイマーで x y 方向に有る値を足していくだけですが そのままだと枠を外れてしまうので有る所まで来たら 足すのを引く方向にしているだけです。
後は HTML を見れば コメントがあるので 特に問題は無いと思います。ブラウザによっては丸く見えなくて四角かも知れませんが 単なる手抜きです。

枠の中でボールを動かす ウィンドウを開く     開いた ウィンドウを閉じる  

此の HTML MoveBall のダウンロード

下から文字が出現して来るサンプルです。
出現する文字を書いた <div> の箱を所定の位置に動かすだけのものですが最初に見えない様に上を覆って居る物を 書いています。

スクロールアップする文字      ウィンドウを閉じる 

此の HTML ScrollUp のダウンロード

マウスオーバーで背景色を変える現在オーバーしている所と同色にします。
タブレット PC はマウスオーバーが無いのでクリックしないと変わりません。

マウスオーバーで背景色を変える      ウィンドウを閉じる 

此の HTML MousOverCo のダウンロード

マウスオーバーで背景画像を変えます。変える画像はオーバーしている所から指定しています。
タブレット PC はマウスオーバーが無いのでクリックしないと変わりません。

マウスオーバーで背景画像を変える      ウィンドウを閉じる 

此の HTML MousOverGz のダウンロード

マウスオーバーで画像を変えます。変える画像はオーバーしている所から名前指定で Call しています。
タブレット PC はマウスオーバーが無いのでクリックしないと変わりません。
画像は最上位で描いているので無しにした時は下位エレメントを有効にする為に style.visibility を hidden にしています。

マウスオーバーで画像を変える      ウィンドウを閉じる 

此の HTML MousOverImg のダウンロード

マウスオーバーでマウスオーバーでドロップダウンメニューを出します。
メニューの直ぐ下に見えない DD_Menu をおいて メニューのマウスオーバーで DD_Menu をコントロールします。
タブレット PC はマウスオーバーが無いのでドロップダウンメニューが出ないので何らかの代替処理が 必要となります。

マウスオーバーでドロップダウンメニューを出す      ウィンドウを閉じる 

此の HTML DropDownMenu のダウンロード

ブラウザのスクロール量を検出して表示します。
ブラウザのスクロール量を検出したら それを表示する テーブルをそのスクロール量によって動かします。
そうする事によって テーブルは ウィンドウの位置から見ると全く動きません。
常に 出しておきたい物を表示する時には使えるかと思います。

ブラウザのスクロール量を検出する      ウィンドウを閉じる 

此の HTML ScrollPos のダウンロード

新たに開かれたウィンドウからそのウィンドウを開いたウィンドウのテキストを変えます。
新しいウィンドウを開くには その テキストには "・・・ のウィンドウを開く" となり 開いた後は "ウィンドウを閉じる" となる様な連携をしたい時は結構有ります。
此を ウィンドウを開いた後で 自分で変えても良いのですが 開いたウィンドウが別の方法で閉じられたり すると "ウィンドウを閉じる" の文言が連動しなくなってしまいます。此を連動させるのに常に開いたウィンドウを 有るかどうかモニターしている事でも実現は出来ますが あまり良い方法とは思えません。此を動作に矛盾がなく スマートに実現するには 開かれたウィンドウから 開いたら "ウィンドウを閉じる"と変えてもらい そのウィンドウが 閉じたら "・・・ のウィンドウを開く" と変えてもらうのが良いだろうと思います。

テキストを変えるウィンドウを開く      此の HTML ReplyWin のダウンロード