|
|
｜このページのｔｏｐへ
｜マウスオン
｜基本
｜ウィンドウ
｜画像
｜表やセル
｜フォーム
｜特殊なツール
｜技ファイル検索
｜ |
| マウスを重ねたときの技 |
| m004 |
セル背景色変化 |
表のセルにマウスを重ねると背景色・背景画像やフォントが変わる
|
◇style |
javascriptを用いて背景色等変更のタグの記述を簡略化する
[技a011]
(web工房別館)
|
◇style |
| m005 |
別の画像表示1 |
画像にマウスを重ねると別の画像を表示する |
◇img src |
| m017 |
フェードイン2 |
画像にマウスを重ねるとフェードインして別画像に入れ替える |
◇filter◇Opacity◇setTimeout |
| m006 |
別の画像表示2 |
画像にマウスを重ねると他の画像が変化する |
◇img |
| m003 |
ポップアップ表示 |
画像やリンク文字にマウスを重ねるとコメント(文章)をポップアップウィンドウに表示する
(ポップアップウィンドウ作成他、3つの方法) |
◇title◇createPopup◇div◇visibility |
| m012 |
ステータスバーに
メッセージ |
リンク文字にマウスを重ねるとステータスバーにメッセージを表示する |
◇window.status |
| m007 |
文字背景色変化 |
文字にマウスを重ねると文字の背景の色が変わる |
|
| m008 |
テキストフィルード
に文字表示 |
リンク文字にマウスを重ねるとテキストフィールドにメッセージを表示する
画像も別の画像に変化する |
◇Array◇textarea |
| m009 |
画像を手前表示 |
重なりあった複数画像でマウスが重なった画像を一番手前に表示する |
◇zIndex |
| m014 |
画像の移動 |
マウスが重なったら画像が飛び上がる(画像の移動) |
◇position◇relative |
| m010 |
メニュー表示1 |
セルにカーソルを重ねるとセルの下にメニューを表示する |
◇div◇visibility |
| m013 |
画像表示 |
リンク文字にマウスを重ねると画像を表示する |
◇visibility |
| m001 |
画像の色グレー |
画像にマウスを重ねると画像の色がグレーに変化する |
◇filter◇gray |
| m002 |
画像の色反転 |
画像にマウスを重ねると画像の色が反転する |
◇filter◇invert |
| m015 |
画像の透明度 |
画像やセルにマウスを重ねると画像やセル背景色の透明度が変わる |
◇opacity◇transparent |
| m016 |
マウスカーソル |
マウスカーソルの形を変える |
◇cousor |
| m018 |
マウスに追従 |
画像や文字をマウスカーソルに追従させる |
|
|
|
｜このページのｔｏｐへ
｜マウスオン
｜基本
｜ウィンドウ
｜画像
｜表やセル
｜フォーム
｜特殊なツール
｜技ファイル検索
｜ |
| htmlやjavascriptの基本技---只今工事中です |
| b001 |
テキスト書式設定 |
テキスト(フォント等)の書式をいろいろな方法で設定する |
◇font |
|
|
｜このページのｔｏｐへ
｜マウスオン
｜基本
｜ウィンドウ
｜画像
｜表やセル
｜フォーム
｜特殊なツール
｜技ファイル検索
｜ |
| ウィンドウに関する技 |
| k001 |
ウィンドウクローズ |
画像(リンク文字)をクリックするとウィンドウをクローズする |
◇window.close() |
| k017 |
ウィンドウクローズ |
ウィンドウクローズするとき表示される確認ダイアログを表示しない |
◇window.close() |
| k002 |
ウィンドウオープン |
大きさや形式を指定して新しくウィンドウをオープンする |
◇window.open() |
| b006 |
ダイアログ
ボックス
(基本技) |
ダイアログボックス(モーダルウィンドウ)を開く(基本技)
|
◇showModalDialog◇showModalessDialog
|
【1】ダイアログボックス(モーダルウィンドウ)を開く
モーダルで開く
モーダレスで開く
【2】親ウィンドウからダイアログボックス(子ウィンドウ)に値を渡す
【3】ダイアログボックス(子ウィンドウ)から親ウィンドウに値を渡す
|
| k011 |
ウィンドウ再読込 |
ウィンドウをリロード(再読込)する |
◇location.reload() |
| k010 |
ウィンドウオープン |
ウィンドウをオープンしたとき画像サイズに合わせてウィンドウサイズを変える |
◇window.open() |
| k013 |
ワイプして
オープン |
リンク先のファイルをワイプして開く |
◇http-equiv= Page-Exit"◇revealTrans |
| k003 |
ウィンドウ/戻す |
画像(リンク文字)をクリックするとウィンドウを前の表示に戻す |
◇history.forward() |
| k004 |
ウィンドウ/進む |
画像(リンク文字)をクリックするとウィンドウを次の表示に進める |
◇history.forward() |
| k005 |
ウィンドウサイズ1 |
ウィンドウをオープンしたときウィンドウのサイズを変える
任意サイズからウィンドウに合わせた全画面表示まで |
◇window.resizeTo() |
| k012 |
ウィンドウサイズ2 |
ウィンドウをフルスクリーンサイズにする |
◇window.resizeTo() |
| k006 |
ウィンドウの位置 |
ウィンドウの表示位置を変える |
◇moveTo() |
| k007 |
win前面表示 |
サブウィンドウを常に前面に表示する |
◇focus() |
| k008 |
ウィンドウ/印刷 |
リンク文字をクリックするとウィンドウを印刷(プリント)する |
◇window.print() |
| k009 |
ウィンドウ/書込み |
ウィンドウに文字やタグを書き込み新らしいhtmlファイルを作る |
◇document.write() |
| k014 |
マウスカーソル
座標 |
マウスカーソルの位置を検出して座標表示する |
◇scrollLeft◇scrollTop◇event.x |
| k015 |
表示位置ジャンプ |
ページの任意の位置にジャンプ(移動)する |
◇a href◇a name |
|
|
｜このページのｔｏｐへ
｜マウスオン
｜基本
｜ウィンドウ
｜画像
｜表やセル
｜フォーム
｜特殊なツール
｜技ファイル検索
｜ |
| 画像に関する技 |
| g001 |
画像オープン1 |
ザムネイル画像をクリックして拡大画像をウィンドウ表示する(様式指定なし) |
|
| g002 |
背景画像1 |
背景画像を1枚だけ表示する |
◇background-image |
| g010 |
背景画像固定2 |
ウィンドウをスクロールしても背景画像は動かない(固定) |
◇background-attachment:fixed |
| g013 |
画像固定 |
ウィンドウをスクロールしても画像や文字は動かない(固定) |
◇scrollLeft◇scrollTop◇event.x |
| g003 |
画像自動変更 |
画像や背景画像を一定時間ごとに入れ替える |
◇clearInterval |
| g012 |
画像ランダム変更 |
画像や背景画像を一定時間ごとにランダムに入れ替える |
◇setInterval◇clearInterval◇randam |
| g011 |
ワイプして
画像変更 |
画像をワイプして入れ替える |
◇filters.revealTrans |
| g004 |
画像手動変更 |
画像(ボタン)をクリックしたら連続して別の画像に入れ替える |
◇疑似スライド |
| g005 |
画像スクロール |
画像やウィンドウをスクロールさせる |
◇scrollBy |
| g006 |
画像に文字乗せ |
画像の上に文字や画像を重ねる |
◇div◇z-index |
| g007 |
画像フェードイン1 |
画像をフェードイン・フェードアウトする |
◇filter◇Opacity |
| g008 |
テキスト回り込み |
画像に対する文章(テキスト)の回り込みを設定する |
◇img◇align◇br clear |
| g009 |
画像ドラッグ |
画像をドラッグして任意の位置に変更する(動かす) |
◇position◇event.x◇pixelTop |
|
|
｜このページのｔｏｐへ
｜マウスオン
｜基本
｜ウィンドウ
｜画像
｜表やセル
｜フォーム
｜特殊なツール
｜技ファイル検索
｜ |
| 表(テーブル)やセルに関する技 |
| c004 |
テーブル(表)1 |
テーブル(表)を作る(基本) |
◇table |
| c007 |
テーブル(表)2 |
ウィンドウのサイズを変更したときテーブル幅も追従して変わるが特定列の列幅は固定化する |
◇width |
| c005 |
テーブルセル1 |
テーブル(表)のセルを設定する(基本) |
◇table◇td◇th |
| c006 |
テーブルセル2 |
テーブル(表)のセルを結合する |
◇colspan◇rowspan |
| c010 |
テーブルセル1 |
テーブル(表)に表題(キャプション)をつける(基本) |
◇caption |
| c008 |
テーブル列書式 |
テーブル(表)の列の書式を一括して設定する |
◇thead◇tbody◇tfoot |
| c009 |
テーブルボディ |
テーブル(表)をヘッダ・フッタ・ボディにグループ化する |
◇colgroup |
| c001 |
テーブル枠ネオン |
テーブルの枠をネオンサインのように7色に変化させる |
◇borderColor |
| c002 |
表内の行間隔 |
表の中に書いた文字の行間隔を変える |
◇line-height |
| c003 |
テーブル枠設定 |
テーブル(表)の枠線の種類や色・幅を指定する |
◇border-style |
|
|
｜このページのｔｏｐへ
｜マウスオン
｜基本
｜ウィンドウ
｜画像
｜表やセル
｜フォーム
｜特殊なツール
｜技ファイル検索
｜ |
| フォームに関する技 |
| f001 |
セレクトメニュー2 |
セレクト(オプション)メニューを選択するとスクリプトを実行する |
◇select◇swith |
| f002 |
セレクトメニュー1 |
セレクト(オプション)メニューを使用する(基本) |
◇select◇option |
| f004 |
セレクトメニュー3 |
セレクトメニューを選択するとURLにリンクする |
◇select◇getElementById |
| b001 |
テスキトフィールド
1
(基本技) |
テキストフィールドを用いる
|
◇input◇text◇focus |
【1】テキストフィールドを用いる(基本)
【2】テキストフィールドを修飾する(スタイル属性)
マウスカーソルの形ちを変更
テキストフィールドの文字をセンタリング
テキストフィールドの背景色や枠を飾る
マウスカーソルを重ねると背景色が変化する
日本語入力モードを設定する
【3-1】特定のテキストフィールドにフォーカスする
【3-2】テキストフィールドにフォーカスしたとき、入力文字の最後尾にカーソルを移動する
テキトスフィールド毎にname属性を指定する方法
switch関数を使用する方法(複数のテキストフィールドに適用)
【4】テキトスフィールドの使用可能/使用不可を切り換える
|
| f003 |
オートコンプリート |
テキストフィールドでオートコンプリートを用いる |
◇vcard_name◇autocomplete |
| f005 |
テキストエリア |
テキストエリア(複数行テキスト領域)を用いる |
◇textarea |
| b005 |
ラジオボタン
(基本技) |
ラジオボタンを用いる |
◇input◇radio |
【1】ラジオボタンを用いる(基本)
【2】ラジオボタンを修飾する(スタイル属性)
マウスカーソルの形ちを変更
ラジオボタンの背景色や枠を飾る
ラジオボタンや文字にマウスカーソルを重ねると背景色が変化する
【3】ラジオボタンがクリック(選択)されたらボタンと文字の背景色が変わる
選択したラジオボタンのみ、背景色を変更
選択したラジオボタンと文字の両方の背景色を変更
【4】文字をクリックしてもラジオボタンが選択される
【5】
ラジオボタンをクリックするとセルの背景色が変わる
リンク文字を選択するとラジオボタンを選択したり使用可能/不可を切り替える
【6】
どのラジオボタンが選択されているか判定する
選択されたラジオボタンによって実行するスクリプトを変える
|
| b003 |
チェックボックス
(基本技) |
チェックボックスを用いる
|
◇form◇input◇checkbox |
【1】チェックボックスを用いる(基本)
【2】チェックボックスを修飾する(スタイル属性)
チェックボックスに背景色(ボックスと文字の両方に背景色)
チェックボックスの枠を飾る(ボックスと文字の両方を枠で飾る)
チェックボックスにカーソルを重ねると背景色が変化する
【3】チェックボックスをチェックすると背景色が変わる
【4】チェックボックスをすべてチェックする/チェック数量を調べる
全部のチェックボックスをすべてチェックする/チェックをはずす
チェックされている数量を調べる
指定数量以上チェックされたらアラート(警告)する
チェックされたチェックボックスのvalue属性を調べる
【5】チェックボックスの文字をクッリクしてもチェックできる
【6】チェックボックスの使用可能/使用不可を切り換える
【7】特定のチェックボックスがチェックされているときのみスクリプトを実行する
|
|
|
｜このページのｔｏｐへ
｜マウスオン
｜ウィンドウ
｜画像
｜表やセル
｜フォーム
｜特殊なツール
｜技ファイル検索
｜ |
| 特殊な動作をするツール |
| t001 |
電光掲示板 |
電光掲示板風に長い文章を右から左にスクロールして表示する |
|
| t002 |
お気に入り登録 |
リンク文字をクリックすると指定したサイトをお気に入りに追加する |
◇AddFavorite |
| t003 |
確認/警告window |
確認ウィンドウ/警告ウィンドウを表示する |
◇confirm◇alert |
| t004 |
右クリック無効 |
マウスの右クリックを無効にする(IE5.0以上限定技) |
◇onContextmenu |
| t005 |
インラインフレーム |
ウィンドウ内に別のhtmlファイルを表示する(インラインフレーム) |
◇iframe |
| t006 |
指定時間経過後 |
指定時間経過後、サイトに自動リンク(ウィンドウをクローズ)する |
◇setTimeout() |
| t007 |
保存ダイアログ |
ぺージを保存するダイアログを表示する |
◇execCommand◇SaveAs |
| t011 |
カラーダイアログ |
カラーダイアログから任意の色を選択し透明度も変えてみる |
◇Dialog◇ChooseColorDlg |
| t008 |
今日の日付表示 |
今日の年月日(曜日)を表示する |
◇Date◇getYear |
| t009 |
水平線 |
水平線を用いる(水平線の色を変える) |
◇hr |
| t010 |
ソース表示 |
リンク文字をクリックするとhtml/js/txtファイルのソースをテキストエディタに表示する
(ホームページをブラウザで開かないでhtmlファイルのソースだけみる) |
◇view-source: |
| b004 |
スクロールバー
(基本技) |
スクロールバーを表示する・隠す/非表示・色を変更する(基本技)
|
◇scrollbar◇overflow |
【1】テキストエリアのスクロールバーを表示/消去する
スクロールバーの表示・非表示
縦方向・横方向のスクロールバーを別々に表示・非表示
【2】ウィンドウのスクロールバーを表示/消去する
【3】スクロールバーの色を変える
|
| b007 |
クッキー
(基本技) |
クッキーを用いる(基本技)
|
◇cookie◇overflow |
【1】クッキーを発行する
クッキーを発行する
同一ページで複数のデータを発行する
【2】クッキーを読み込む
保存されたデータをすべて読み込む
指定したデータのみ読み込む
【3】クッキーに書き込まれたデータを消去する
【4】その他のクッキー技
クッキーの書き込みができない場合は警告する
パスを指定する(クッキーを発行するhtmlファイルのパス以外)
保存期限を年月日でなくて○日後に設定する
【5】フォームへの入力データをクッキーに書き込む/読み込む/消去する(応用技)
|
| b008 |
csvファイル
データバインド
(基本技) |
csvファイルデータをデータバインドする(基本技/IE限定)
|
◇データバインド |
【1】csvファイルデータをバインドして(繰り返し)テーブルを作成する
sample1(解説なし)
csvファイルを作成する(エクセル等で)
csvファイルデータをバインドして(繰り返し)テーブルを作成する
読み込んだセルデータを加工/新しい列を追加しデータ加工等を行う
テーブルのデータを検索する/分類(並べ替え)する
行データにマウスカーソルを重ねると行全体の背景色が変わる
【5】オプションメニュー(セレクトメニュー)にデータをバインドする
sample5(解説なし)
|
|
|
｜このページのｔｏｐへ
｜マウスオン
｜基本
｜ウィンドウ
｜画像
｜表やセル
｜フォーム
｜特殊なツール
｜技ファイル検索
｜ |
|
Copyright(C) 2004 web工房 All Rights Reserved