Yahoo! JAPAN Secret2u|電子レセプトビューア

ホームページ研究室


JavaScript(ジャバスクリプト)、DHTML(ダイナミックHTML)、CSS(カスケーディングスタイルシート) その他、いろいろなサンプル集

 


このページの

肉食or草食診断アンケート※18禁
ここではHTMLのソースを見ることが出来る人を対象に、主としてJavaScriptジャバスクリプト)、DHTMLダイナミックHTML)、CSSカスケーディングスタイルシート)を使ったサンプル、その他を公開しています。 興味のあるかたは、ご自由にサンプルの をご覧ください。

注) ソース内には、特に解説などは設けておりませんが、質問・リクエストを頂ければ、出来る限りお答えしようと思っております。
お問い合わせ・リクエストは、『JavaScriptやDHTML、CSSを使ってこんなページは作れる?』とか『こういう動作のページを作りたいんだけど』でOK。 気軽に作者までメールでお問い合わせ、もしくはQ&A掲示板へ投稿してください。

なお、JavaScriptを組み込んだページを作るときは、どうしてもHTMLページのソース)を直接いぢる必要が(多くの場合)あります。
ですので、HTMLを見て ある程度は理解できるレベルの方を対象として回答することになりますが、その点は予めご了承ください。

また、サンプルを参考にしてご自身で作成されるのは全く問題ありませんが、内容を理解しないままソース・スクリプトを無断でコピーして使用するのはご勘弁ください。 ソースを見ても判らない箇所がありましたら作者までメールして頂けるようお願い致します。当方としても出来る限り力になろうと思っておりますので。

その他、ホームページ/Webサイトの企画・制作全般のご相談は、『 [北海道] _ 北の大地のWebクリエイター _ Web Creator in NorthernLand 』 にて承っております。こちらのサイトでは、ホームページ/Webサイトの企画/制作(製作)/更新(リニューアル)のご相談から、SEO対策(検索エンジン最適化)/運営/管理/コンサルティングまで、幅広い作業内容に応じた料金サンプルを掲載しております。ぜひご来訪ください。

サンプルによって動作確認済みブラウザを略号で示しているものがあります。
ブラウザの略号および確認ブラウザは以下のとおり
e6Internet Explorer 6.0.2 SP1
N4 (*)Netscape 4.78 N6Netscape 6/6.01 N7Netscape 7.1
O6Opera 6.06 O7 (*)Opera 7.11 Moz1.4Mozilla 1.4
動作OSWindows 2000 SP4

N4 (Netscape 4.xx) の場合、スタイル指定を含んでいるページの描画が正常に行われない、描画処理に時間が掛かる、リロード(再読み込み)しないと画面が表示されない、などの症状が現れることがあります。
このようなときは、N4のメニューバーから [ 編集 ] - [ 設定 ] を選択し、設定画面の [ 詳細 ] から、「スタイルシートを有効にする(S)」 のチェックを外してみてください 。

Opera 7.20 をご利用の場合、マウスのセンターホイールによる「onscroll」イベントを検出しない場合があるようです。このため、スクロールしても付いてくるレイヤー(エレベーター)などのオンスクロールイベントによる制御を行っているサンプルにおいて、画面右側のスクロールバーをドラッグした場合には正常に動作するにも関わらず、マウスのホイール操作では動作しない不具合が生じることがあります。暫定的な対処方法としては、Netscape等と同様にタイマー制御でウィンドウの状態を監視することで、上記の不具合を回避することが可能かと思われます。
(2003/09/29 21:30 Opera 7.20 Build 3145 日本語版にて確認)

サイト内検索
サイト内のテキストだけでなく、HTMLタグ・JavaScriptやCSSの内容も検索できます。
特定のタグの使用例や、スタイル指定、スクリプト記述上のメソッド・プロパティ・イベントハンドラなどの利用例を検索する際にご利用ください。


Mamas 全文検索 by P.ink
Copyright (C) P.ink All Rights Reserved.

Note
サイト内のサンプルには、ソース表示機能を設定してありますが、
ブラウザによってソース表示が機能しないときもあります。
その場合は、ブラウザのメニューからソース表示を選択してくださるよう お願いします。
その他、サイト内のコンテンツに関するご質問は、作者までメールにてお問合せくださるか、
または、掲示板までお願いします。
作者へのメール(mailto:godakaz@nifty.com)
Q&A掲示板
当サイトのトップページ

突つくと停止/再開

最近作ったもの

(Web相談室などへの回答サンプル・例示スクリプト含む)
■ 画像・背景画像非表示ブックマーク
■ KY(空気読めない)度チェックシート、ほか
■ 画面の拡大表示・縮小表示用スクリプト改
  • フォントサイズだけで無く、画面内すべてを拡大表示・縮小表示するスクリプト
  • 動作環境はWindows版IE5.5以上限定
  • 動作サンプルは、本ページ自体です。
  • [Ctrl]+[マウスホイール↑]もしくは [Ctrl]+[+]同時押しで拡大
  • [Ctrl]+[マウスホイール↓]もしくは [Ctrl]+[−]同時押しで縮小
■ 画面ズームアップ
■ 画面ズームダウン
  • ブックマークに登録するには、右クリックから「お気に入りに追加」してください。
  • クリックすると、現在の表示画面が1.25倍に拡大表示(ズームアップ表示)されます。
    ※IE限定です
  • 関数部分 画面ソース表示。ブックマークレットは、ここから改行コードとタブを除去して1行にまとめたものになります。
■ 画面ソース表示ブックマークレット2
  • ブックマークに登録するには、右クリックから「お気に入りに追加」してください。
  • クリックすると、現在の表示内容を反映したHTMLソースが「新規ウィンドウ」に表示されます。
    ※DTD部分は除く
  • JavaScript等により画面上で動的に書き換えた内容も反映されるので、動作確認に便利です。
  • 関数部分 画面ソース表示。ブックマークレットは、ここから改行コードとタブを除去して1行にまとめたものになります。
■ 画面ソース表示ブックマークレット
  • ブックマークに登録するには、右クリックから「お気に入りに追加」してください。
  • クリックすると、現在の表示内容を反映したHTMLソースが「現ウィンドウ」に表示されます。
    ※DTD部分は除く
  • JavaScript等により画面上で動的に書き換えた内容も反映されるので、動作確認に便利です。
  • 関数部分 画面ソース表示。ブックマークレットは、ここから改行コードとタブを除去して1行にまとめたものになります。
■ CSS無効化ブックマークレット
  • ブックマークに登録するには、右クリックから「お気に入りに追加」してください。
  • クリックすると、<link>タグにより読み込まれている外部スタイルシート(.css)および<style>タグで記述されているスタイル定義の有効・無効が切り替わります。
    ※元のページ上で、スタイルの有効/無効を disabled を用いて制御している場合、その制御が反転します。
  • 関数部分 CSS無効化スクリプト。ブックマークレットは、ここから改行コードとタブを除去して1行にまとめたものになります。
■ BMIと標準体重の算出
■ JavaScriptによる擬似インラインフレーム&スクロールバー制御
  • マウスホイール対応
  • スクロールバーのドラッグ対応
  • 非JS環境にも対応
■ Ajaxによる外部テキストの読み込み&表示サンプル
■ Ajaxによる外部テキストの読み込み&表示サンプル(2)
■ Ajaxによる外部テキストの読み込み&表示サンプル(3) - サブメニューの外部ファイル化
■ Ajaxによる外部テキストの読み込み&表示サンプル(3plus) - サブメニューの外部CSVファイル化
読み込んでいるデータ(menuplus.csv)
■ ベイカーズパーセント計算スクリプト(Country Life in Hokkaido 別館)
  • レシピの配合(重量)を自動計算
  • 総重量に応じて各材料の分量を自動調整
  • 標準材料以外の材料追加にも対応
動作環境など
レシピファイルの読み込みに対応
■ 万年カレンダー
  • 1900年から2100年まで対応
  • うるう年対応
  • 記念日表示
ちょい和風版
外部.jsファイル版
日付入力の支援用途のイメージで
■ 汎用イベントハンドラーを用いた処理の一例
■ ツリー展開メニュー2(基本動作部分)
■ フェードイン・フェードアウトする背景画像とポップアップメニュー

■ プルダウン(ポップアップ)メニュー(センター揃えレイアウトの自動位置調整)

■ 上下いずれの位置であっても、指定した箇所にスムーズスクロールするサンプル
  ・某Web系相談サイトへの回答例として
  
■ 本日の年月日を初期値として選択ずみにするプルダウンメニュー
  ・某Web系相談サイトへの回答例として
  
■ <select>を使わない擬似プルダウンメニュー
  ・某Web系相談サイトへの回答例として
  
■ Northernland.net _ Produced by ごだっち
≪ 宣 伝 ≫ _ PHPによるサーバーサイド処理の実例サンプル。
写メール・HTMLメール対応のWebコンテンツ更新システム、サイト閲覧中の人数表示、
RSSティッカー風のニュースリーダーなど。

■ 複数階層のツリー式展開メニュー
  ・全展開/個別展開の選択可能
  e6
■ フラッシュ(swf)をランダムに切り替えて表示する
  e6, N6.2, N7.1

■ フラッシュ(swf)をランダムに切り替えて表示する2
  (アクティブ化警告対応版 [ 外部.jsファイル ])
  e6, N6.2, N7.1
■ 入場制限(年齢認証)が必要なサイト向けスクリプト
  ・JavaScriptを無効化しているユーザーを弾く。
  ・Confirm(確認ダイアログ)で [ OK ] を選択しないと入れない。
  [ 実施例 :アダルト学院 注意:アダルトコンテンツサイト]
  
  注意
  確認画面で [ OK ] を選択するとアダルトコンテンツが表示されます。
  [ Cancel ] を選択すると Google に遷移します。

  e6, N6.2, N7.1, O7.2
■ 複数の連動を可能にした3連コンボ (セレクト)
  e6, N6.2, N7.1, O7.2
  [ select a0 ▼ ] > [ select a1 ▼ ] > [ select a2 ▼ ]
  [ select b0 ▼ ] > [ select b1 ▼ ] > [ select b2 ▼ ]
■ 上下のフレームを跨いで表示されているように見えるポップアップメニュー
  e6, N6, N7.1, O6, (O7.1, O7.2), M1.5, Fb0.7
■ リンクバナーのランダム表示(リンク・説明・画像情報込み)
  e6, N6, N7, (他未確認)
■ リンク色の変更(レインボーカラー)
■ リンク色の変更.2(レインボーカラー)
  なぜなにGAC > HTML > [11643] への回答サンプル
  e6, N7, (他未確認)
■ プルダウン(ポップアップ)メニュー(レイアウト位置の自動検出付き.改)
  「Q&A掲示板」への回答サンプル
  e6, N6, N7, Moz1.5, O6, O7, Fb0.7
■ タブ式 収納/展開 & 画面スクロール対応メニュー
  「Q&A掲示板」への回答サンプル
  e6, N6, N7, Moz1.5, O7
■ チェックボックスの排他制御&チェック数の制限
  なぜなにGAC > JavaScript > [10893] への回答サンプル
  e6, N7, Moz1.5, O6, O7
■ 入力可能・不可能を切り替える方法.2
  INPUTタグの readonly 属性の書き換え
  e6, N6, N7, Moz1.5
■ 入力可能・不可能を切り替える方法.1
  INPUTタグの disabled 属性の書き換え
  e6, N6, N7, Moz1.5, (O7.2)
■ リンクを無効にする方法.3
  Aタグ内の href 属性に対する、取得 ( getAttribute ) ・削除 ( removeAttribute ) ・追加 ( setAttribute ) の
  処理を組合せた応用例
  e6, N6, N7, O7, Moz1.5
■ リンクを無効にする方法.2
  Aタグ内の href 属性に対する設定内容の書き換え
  e6, N6, N7, O6, O7, Moz1.5
■ リンクを無効にする方法.1
  透明GIF(透過GIF)画像で覆うことによる無効化処理の一例
  e6, N6, N7, O6, O7, Moz1.5
■ リンクを無効にする方法.3の応用、onclickを無効にする
  TDセルに設定したonclick属性の無効化・復帰
  e6, N7, Moz1.5
■ リサージュ曲線
  JavaScriptでリサージュ曲線を描く。マウスストーカー風。
  e6, N6, N7, O6, O7, Moz1.4
■ リサージュの応用
  某漫画風(『孔●王』?)
  e6, N7, O7, Moz1.4
  └  おまけ おまけ2

■ リサージュの応用2
  某RPG風(初代『ゼ●ダ』の何番目かのダンジョンのボスキャラが、こんな動きだったような?)
  e6, N6, N7, O6, O7, Moz1.4
■ フィルタを用いた画像の変形
  画像を傾けているような表現が可能。(TiltとFlipを使った表現)
  e6
■ フィルタを用いた画像の変形の応用
  (TiltとWaveを使った表現)
■ フィルタを用いた画像の変形の応用.2
  (変形と同期させた画像の入れ替え)
■ フィルタを用いた画像の変形の応用.3
  (オブジェクトの回転)
■ フィルタを用いた画像の変形の応用.3_(2)
 
■ ウィンドウを閉じたりページ遷移する前に確認を出すウィンドウ
  ウィンドウ右上のクローズボックス([X]ボタン)にも適用。
  確認(confirm)にキャンセルすると、現在のウィンドウが維持される(開き直される)。
  e6
■ スクロールしても位置が変わらないレイヤー(エレベーター)
  e6, N6, N7, O6, O7, Moz1.4
■ マウスドラッグで選択した文字(文字列)を取得する
  e6, N6, N7, O7, Moz1.4
■ プレビュー画像を横スライド(スクロール)・ループ表示
  プレビュー画像の左右両方向へのスライド(ボタン・マウスオーバー・マウスクリック併用)&選択画像の表示
  e6, N7, O6, O7, Moz1.4
■ 画像を横スライド(スクロール)・ループ表示
  左右両方向へのスライド(ボタン・マウスオーバー・マウスクリック併用)
■ 画像を横スライド(スクロール)・ループ表示
  左右両方向へのスライド(ボタン式)
■ 画像を横スライド(スクロール)・ループ表示
  左方向へのスライド(ボタン式)
■ メニュー文字の拡大/縮小表示(色変化機能付き)
  e6, N6, N7, O7, Moz1.4
■ メニュー文字の拡大/縮小表示(ボタンクリック)
  e6, N6, N7, O7, Moz1.4
■ ポップアップメニュー(レイアウト位置の自動検出付き)
  e6, N6, N7, O6, O7, Moz1.4
■ サブウィンドウから親ウィンドウにデータ行を追加して書き込むサンプル (IE限定)
  e6
■ 入力キーのキーコードを表示
  e6, N4, N6, N7, O6, O7, Moz1.4
■ ツリー展開メニュー(基本動作部分)
  e6, N6, N7, O7, Moz1.4
■ 左端から飛び出すメニュー(基本動作部分)
  e6, N6, N7, O7, Moz1.4
■ 入力行数を制限したテキストエリア (IE限定)
  e6
■ 入力日付の妥当性チェック
  e6, N4, N6, N7, O6, O7, Moz1.4
■ ラジオボタンの得点集計
  e6, N4, N6, N7, O6, O7, Moz1.4
■ "Yes"または"No"を選択したラジオボタンの数
  e6, N4, N6, N7, O6, O7, Moz1.4
■ スクラッチカード風 (IE限定)
  e6
■ ウィンドウ内のキーダウン・マウスダウンイベント検出(汎用)
  e6, N4, N6, N7, O7, Moz1.4
■ iframe内の場所指定リンクおよびフレームサイズの変更
  e6, N6, N7, O7, Moz1.4
■ 3連コンボ(連動セレクト:汎用)
  最初の選択で次の選択肢が、次の選択で最後の選択肢が変わるセレクトメニュー
  e6, N6, N7, O6, O7, Moz1.4
■ 3連コンボ(連動セレクト:IE用)
  e6, O7
■ 2連コンボ(連動セレクト:汎用)
  最初の選択により次の選択肢が変わるセレクトメニュー
  e6, N6, N7, O6, O7, Moz1.4
■ 2連コンボ(連動セレクト:IE用)
  e6, O7
■ データ追加型セレクトメニュー.改(汎用)
  クリックするとテキスト入力可・選択肢の追加が可能なセレクトメニュー
  e6, N6, N7, O7, Moz1.4
■ データ追加型セレクトメニュー
  e6, O7
■ 選択肢を追加可能なセレクトメニュー
  入力フォームに記入した選択肢が追加される
  e6, N4, N6, N7, O6, O7, Moz1.4
■ いきなりフルスクリーンで表示されるウィンドウ (IE限定)
  e6
■ テキストエリア内の入力行数カウント.2 (IE限定)
  e6
■ テキストエリア内の入力行数カウントUS版MSDNサンプル)
  e6
■ ウィンドウの名前・タイトル変更
  e6, (N4), N6, N7, (O6), O7, Moz1.4
■ タイプライター風のメッセージ表示
  e6, N6, N7, O7, Moz1.4
■ ページを遷移しても背景色の設定をキープ
  e6, N4, N6, N7, O7, Moz1.4
■ 背景色の変更
  e6, N4, N6, N7, O7, Moz1.4
■ サブウィンドウでチェックした項目を親画面のセレクトメニューに追加するには
  教えて!gooトップ > コンピューター&インターネット > プログラミング > JavaScript
  [サブウィンドウから親画面に渡すには] 02/12/08 17:22 (No.423235) への回答
  e6, N4, N6, N7, O6, O7, Moz1.4
■ チェックの連続している箇所が上下の行で重なっているかどうか調べたい
  教えて!gooトップ > コンピューター&インターネット > プログラミング > JavaScript
  [チェックが重なって連続しているか調べたい] 02/12/06 21:38 (No.421991) への回答
  e6, N4, N6, N7, O6, O7, Moz1.4
■ セレクトメニューでラジオボタンをチェック
  リストで選択されたラジオボタンがチェックされる
  e6, N4, N6, N7, O6, O7, Moz1.4
■ PC対戦型『神経衰弱』(サウンド付きバージョン)
■ PC対戦型『神経衰弱』(サウンド無しバージョン)
■ プルダウン(ポップアップ)メニュー
  e6, N6, N7, O6, O7, Moz1.4
■ 背景半透過タイプ style.filter='alpha(opacity=xx)' & style.MozOpacity=xx
  e6, N6, N7, Moz1.4
■ 選択中のメニュー色変化
  e6, N6, N7, O6, O7, Moz1.4
■ メニューロック付き (onClick)
  e6, N6, N7, O6, O7, Moz1.4
■ ウィンドウサイズに自動対応
  e6, N6, N7, O6, O7, Moz1.4
■ 背景画像の入れ替え・表示確認用ページ (IE限定)
  e6
■ 全角入力無効化
  e6, N6, N7, O6, O7, Moz1.4
■ 親・子・ヘルプ画面の表示順位
  e6, N4, N6, N7, O6, O7, Moz1.4
■ ボタン操作でタイマー停止/再開&一定時間後に強制ジャンプ
  e6, N4, N6, N7, O6, O7, Moz1.4
■ 一定時間後に強制ジャンプ
  e6, N4, N6, N7, O6, O7, Moz1.4
■ 抽象作文スクリプト
  e6, N6, N7, O7, Moz1.4
■ 入力行の追加(行ごと)&クラス指定の追加 (IE限定)
  parentNode、className
  e6
■ 入力行の追加(行ごと) (IE限定)
  parentElement、rowIndex、insertRow、insertCell、innerHTML
  e6
■ 入力行の追加(テーブルごと)
  e6, O7
■ 入力行の追加(DIVごと)
  e6, O7
■ 親・子・孫の関係(上位依存)のチェックボックス.2
  (兄弟関係あり)
  e6, N6, N7, O6, O7, Moz1.4
■ 親・子・孫の関係(上位依存)のチェックボックス
  e6, N6, N7, O6, O7, Moz1.4
■ Now Loading...&CSV読み込み&ソート (IE限定)
  CSV出力のエクセルデータをWeb上から検索
  e6
■ n進数コンバーター
  2進数〜16進数までの変換をサポート
  e6, N6, N7, O6, O7, Moz1.4
▲ top

数値を画像で表示

■ 日時をバーコードで表示
  e6, N4, N6, N7, O6, O7, Moz1.4
■ 入力した数値をバーコードに変換
  e6, N6, N7, O7, Moz1.4
■ 入力した数値を、サブウィンドウにバーコード表示
  e6, N6, N7, O7, Moz1.4
▲ top

簡単な「パスワード」

■ JavaScriptを用いたパスワード設定(1)
  e6, N4, N6, N7, (O6), O7, Moz1.4
■ JavaScriptを用いたパスワード設定(2)
  e6, N4, N6, N7, (O6), O7, Moz1.4
■ JavaScriptを用いたパスワード設定(3)
  予め符号化しておいた正解と、入力値を比較。
  ソース自体には符号化された正解が記録されているため、encode/decodeを判らない人がソースを見てもバレにくい。
  e6, N4, N6, N7, O6, O7, Moz1.4
■ 入力値の暗号化と組み合わせたパスワード設定
  入力した文字列を符号化し、抽出された文字列から目的のページのURLを生成。
  e6, (N4), N6, N7, O6, O7, Moz1.4
▲ top

見た目の変更

■ カーソル変更
  対象領域のマウスカーソルを変更
  e6, (N6), (N7), (O7), (Moz1.4)
■ フォームの外観変更
  フォームの枠・スタイルの変更
  e6, (N6), N7, (O6), (O7), Moz1.5
■ テキストのフェードイン/フェードアウト.1
  e6, (N6), N7, O6, O7, Moz1.4
■ テキストのフェードイン/フェードアウト.2
  e6, (N6), N7, O6, O7, Moz1.4
■ イメージのフェードイン/フェードアウト.1
  e6, N6
■ イメージのフェードイン/フェードアウト.2
  e6
■ イメージのフェードイン/フェードアウト.3
  e6
■ イメージのフェードイン/フェードアウト(テーブル).2
  e6
■ イメージを切り替え&フェードアウト・フェードイン
  +(波紋フィルタ:IE用フィルタ)
  e6, N6, N7, Moz1.4
■ 画像の大きさを変更する
  e6, N6, N7, O7, Moz1.4
■ チェックボックスの背景色
  チェックしたチェックボックスに色が付く
  e6, N6, O6, O7
■ チェックボックスによるSPANタグとテーブルセルの背景色
  e6, N6, (N7), O6, O7, (Moz1.4)
■ チェックボックスによるテーブル(行)の背景色
  e6, N6, N7, O6, O7, Moz1.4
▲ top

ウィンドウの位置と大きさ

■ ウィンドウの位置の制御
  e6, N4, N6, N7, (O6), (O7), Moz1.4
■ ウィンドウサイズの制御
  e6, N4, N6, N7, (O6), (O7), Moz1.4
■ ウィンドウサイズの表示
  e6, N4, N6, N7, (O6), (O7), Moz1.4
■ OS・ブラウザ情報の表示
  e6, N4, N6, N7, O6, O7, Moz1.4
■ OS・ブラウザに応じたCSSの適用
  e6, N4, N6, N7, O6, O7, Moz1.4
■ ウィンドウサイズに応じたCSSの適用
  e6, N4, N6, (N7), (O6), (O7), (Moz1.4)
■ フルスクリーンウィンドウを開く
  e6
■ 伸び上がるウィンドウ・縮んで消えるウィンドウ
  e6, N4, N6, N7, (O6), (O7), Moz1.4
▲ top

「Form」関連

■ フォームから入力したURLのウィンドウを開く
  e6, N4, N6, N7, O6, O7, Moz1.4
■ フォームから入力した内容を別ウィンドウに書き出し
  e6, N6, N7, O6, O7, Moz1.4
■ 時刻表示フォーム
  e6, N4, N6, N7, O6, O7, Moz1.4
■ 複数のフレームにまたがるフォーム
  e6, N4, N6, N7, O6, O7, Moz1.4
■ ラジオボタンで有効/無効が切り替わるテキストフォーム
  e6, N6, N7, O6, O7, Moz1.4
■ フレームを跨いだデータ渡し(「問題集」サンプル)
  e6, N4, N6, M7,O6, O7, Moz1.4
▲ top

メニューとフレーム

■ 1クリックで切り替わるメニューとフレーム(COLS)
  e6, N4, N6, N7, O7, Moz1.4
■ 1クリックで切り替わるメニューとフレーム(ROWS)
  e6, N4, N6, N7, O7, Moz1.4
■ フレーム内のコンテンツを指定の位置までスクロールさせる
  e6, N7, O6, O7, Moz1.4
■ フレーム内のコンテンツをスムーズにスクロールさせる
  e6, N6, N7, O7, Moz1.4
▲ top

マウスイベント

■ マウス位置を表示するサンプル
  e6, (N4), N6, N7, O7, Moz1.4
■ クリック位置を表示するサンプル
  e6, N6, N7, O7, Moz1.4
■ シンプルなソースのロールオーバー
  e6, N4, N6, N7, (O7), Moz1.4
■ イメージタグに埋め込んだロールオーバー
  e6, N7, O6, O7, Moz1.4
■ 普通のロールオーバー
  e6, N4, N6, N7, O6, O7, Moz1.4
▲ top

「Focus」と「Blur」

■ 親・子・ヘルプ画面の表示順位
  常に親画面よりも前面にある子画面と、子画面よりも前面にあるヘルプ画面
  e6, N4, N6, N7, O6, O7, Moz1.4
▲ top

背景色をグラデーションに


IE5.5(Windows版)以上のみ
■ 垂直方向のグラデーション (IE限定)
  e6
■ 水平方向のグラデーション (IE限定)
  e6
▲ top

文字列の符号化/復号化

■ エンコーダー/デコーダー
  (文字化け解読器?)
  e6, N6, N7, O6, O7, Moz1.4
▲ top

クッキー(Cookie)を使って

■ テキスト形式での保存タイプ
  e6, (N4), N6, (N7), (O6), (O7), (Moz1.4)
■ 符号化した形式での保存タイプ
  e6, N4, N6, N7, O6, O7, Moz1.4
■ Cookieを使ったフォームデータの保存
  e6, N4, N6, N7, O6, O7, Moz1.4
■ Cookieを使ったパスワード保存システム
  e6, N4, N6, N7, O6, O7, Moz1.4
▲ top

ブラウザごとに切り替え(ブラウザ分岐)

■ 新しいウィンドウを開く場合
  e6, N6, N7, O6, O7, (Moz1.4)
■ 現在のウィンドウを切り替える場合
  ソースファイル   e6, N4, N6, N7, O6, O7, (Moz1.4)
▲ top

ウィンドウのいろいろ

■ 読み込みと同時に別ページに切り替える
  ソース表示
  e6, N4, N6, N7, O6, O7, Moz1.4
■ 読み込みと同時に新しいウィンドウを開く.1
  メニュー・ステータス類の指定無し
  e6, N4, N6, N7, O6, O7, Moz1.4
■ 読み込みと同時に新しいウィンドウを開く.2
  メニュー・ステータス類の指定あり(表示無し)
  e6, N4, N6, N7, O6, O7, Moz1.4
■ サブウィンドウから親ウィンドウの開閉をコントロール
  e6, (N4), N6, N7 (除く7.1), O6, O7, Moz1.4
▲ top

プルダウン(セレクト)メニューから

■ 行き先をプルダウン(セレクト)メニューで選ぶ
  e6, N4, N6, N7, O6, O7, Moz1.4
■ メニューページのプルダウン(セレクト)メニューから、メインのページを切り替える
  e6, N4, N6, N7, O6, O7, Moz1.4
▲ top

リンク先を選択するいろいろな方式

■ リンク・セレクトメニュー・ラジオボタンによるリンク
  e6, N4, N6, N7, O6, O7, Moz1.4
▲ top

動きのあるページ

■ JavaScriptで画像を動かすサンプル集
  ・直線移動
  ・円/楕円
  ・三角関数(半径と角度)
  ・ランダム移動
  ・リモコン制御
  ・位置指定による移動
  ・画像サイズを変更しながら移動
  ・その他
  e6, (N4), (N6), N7, (O6), O7, Moz1.4
▲ top

マーキータグを使ったスクロール

■ いろいろなマーキー移動
  e6, (N7), (Moz1.4)
■ マーキーの応用(ボールがピョンピョン?)
  e6, (N7), (Moz1.4)
▲ top

特殊文字の表示(参考)

■ 特殊文字の表示 (66KB)
  e6, (N4), N6, N7, O6, O7, Moz1.4
▲ top

ライブカメラの画像表示


LiveCamerer』によるキャプチャー画像をリスト表示&画像更新。
■ ライブカメラ用のサンプルスクリプト
  自動更新される最新画像を取得して表示する。
  e6, N4, N6, N7, O6, O7, Moz1.4
▲ top

URL欄を使ったパラメータの受け渡し


「location.pathname」、「string.search」、「string.slice」を使って
URL欄から情報を取得するサンプル。
■ メニュー・フレーム構造のサンプル
  直リンクされても、正常なフレーム構造で表示、
  かつ、リンクされたページがフレーム内に表示される。
  e6, (N4), N6, N7, (O6), O7, Moz1.4
▲ top

その他

指定ディレクトリ以下のファイル名取得スクリプト「filnm3.js
■ ファイル名取得の実施例
  ここでは、指定ディレクトリ名 [ godakaz ] 以下、ファイル名を取得して表示します。
  e6, N4, N6, N7, O6, O7, Moz1.4
単体のファイル名取得スクリプト「filnm2.js
■ ファイル名取得の実施例
  e6, N4, N6, N7, O6, O7, Moz1.4
▲ top
当サイトはリンクフリーです。
バナーは以下のものをご利用ください。
ホームページ研究室 _ 88x31 バナー
(サイズ:88 x 31)
ホームページ研究室 _ 120x40 バナー
(サイズ:120 x 40)
ホームページ研究室 _ 234x60 バナー
(サイズ:234 x 60)
Note:
リンクの際は、当ページ(http://godakaz.private.coocan.jp/laboratory/)にリンクして頂けるよう、お願いします。
また、リンクして頂いた際には、ご一報いただけると有り難いです。
当サイトのトップページ「Web Creator in NorthernLand」へのリンクの際は、こちらのバナーをご利用ください。
Web Creator in NorthernLand _ 88x31 バナー
(サイズ:88 x 31)
Web Creator in NorthernLand _ 120x40 バナー
(サイズ:120 x 40)
Web Creator in NorthernLand _ 234x60 バナー
(サイズ:234 x 60)
Note:
リンクの際はトップページ(http://homepage2.nifty.com/godakaz/new_web/)にリンクして頂けるよう、お願いします。
また、リンクして頂いた際には、ご一報いただけると有り難いです。

作者へのメール(mailto:godakaz@nifty.com)
 
▲ top