動きのあるホームページを作る
JavaScript、ダイナミックHTMLを使ったホームページ用サンプル

 Java,DHTML Sample


★JavaScript,ダイナミックHTMLサンプル★


[機能]
テキスト上をマウスが通過したとき、ポップアップウインドウを開くダイナミックHTMLです。

[利用方法]
cssスタイルシートによって、ポップアップするテキストのスタイルと数を指定できます。
スタイル(Style1、Style2....)

ウインドウの位置・大きさ
layX:ウインドウの左座標
layY:ウインドウの上座標
layW:ウインドウの幅
layH:ウインドウの高さ
をそれぞれピクセル単位で指定します。
ウインドウの数 は、Laymaxの数値で指定します。
同時にID属性iLxを指定しているDIV要素並びに、iLxの「x」の部分の数値を増やします。
この増やした数分だけのウインドウに表示するコメントを増加させます。
具体的には配列変数comments[x]を増やすことになります。


[機能]
ステータスバーにメッセージをスクロールさせて表示します


[機能]
ボタンを表示し、押すと、そのページのソースを表示します
メモ帳などのテキストエディタが起動されて表示します。



[機能]
画面の任意をクリックすることにより波紋が現れます。
二つ画像を使用します。




[機能]
スクロールするときに、背景画を固定するか。しないかを切り替えます




[機能]
メニュー関数を使用した簡単なメニューです。
これを基本とすれば、結構いろいろなバリエーションができるでしょう。
チャレンジしてみて下さい。




[機能]
メニュー関数を使用した簡単なメニューです。
上記の基本編を変えて影をつけたものです。
個人的にはいまひとつ・・・かな?




[機能]
ポップアップウインドウも並べると階層メニューの様になります。



[機能]
メニューを折りたたんでしまっておき、クリックで出現させる形のメニューです。
主な部分はDecoration HTML Roomより抜粋して使わせて頂きました。
記述が長いので外部ファイルファイル化し、HTMLより読み込ませる形にしました。

ですから、SAMPLE表示以外に「includemenu.js」というファイルを使います。
保存をしてHTMLファイルと同じフォルダに置いてお使い下さい。
尚、上記サンプルボタンはそのままで表示できます。




[機能]
文字がせり上がって表示されます。
リンクを張れば、メニューとして使用できます。
主な部分はDecoration HTML Roomより変更して使わせて頂きました。




[機能]
スタイルシートを使った影文字です。
お手軽ですが、あまり綺麗ではないですね。




[機能]
マルチレイヤーを使ってテキストに影を付けたもの。
先のスタイルシートを使ったものより格段にかっこいいです。
これも主な部分はDecoration HTML Roomより抜粋して使わせて頂いています。




[機能]
ネオンが光っているように見せたタイトル文字です。
これも格好いいのでDecoration HTML Roomより抜粋して使わせて頂いています。感謝!!




[機能]
グランデーションがかかったタイトル文字です。
これも格好いいのでDecoration HTML Roomより抜粋して使わせて頂いています。感謝!!