※同様の処理が「Javascriptサンプル」にもある場合があります。
そちらの方もご参照下さい。

■ DHTML(DynamicHTML)について

DHTMLとは、Dynamic(ダイナミック..動的なとか動きのあるという意味)HTMLの略称です。

今までのホームページはStatic(スタティック..静的なとか動きがないという意味)なページ、つまり静止したままのページがほとんどです。
確かにアニメーション画像などにより、動きがあるように見えますが、それは動画が表示されているだけなのです。

ホームページには さまざまな手法がありますが、その中でもホームページ上の状態が変わること(イベントと言います。)によりページ上のコンテンツを変化させたり、変更させたりすることが出来るようにしたものそれがDHTMLなのです。

では、イベントとはどんなものがあるのでしょうか?
よく使用されるものについて概要を説明します。

イベントの種類 説    明
onload="" 読み込み時(ロード)
対象となるものが読み込まれる時に実行される。
主にページ読み込み時、画像読み込み時に発生する。
onunload="" 解放時(アンロード)
対象となるものが開放される時に実行される。
主にページ移動時に発生する。
onclick="" マウスのクリック
対象となるものの上で左ボタンがクリックされた時に実行される。
ondblclick="" マウスのダブルクリック
対象となるものの上で左ボタンをダブルクリックされた時に実行される。
onmouseover="" マウスオーバー
対象となるものの上にマウスポインタが乗った時に実行される。
onmouseout="" マウスアウト
対象となるものからマウスポインタが離れた時に実行される。
onmousedown="" マウスダウン
対象となるものの上でマウスボタン(左右どちらでも)が押された時に実行される。
onmouseup="" マウスアップ
対象となるものの上でマウスボタン(左右どちらでも)が離された時に実行される。
onmousemove="" マウス移動
対象となるものの上でマウスポインタが動いた時に実行される。
ondragdrop="" ドラッグ&ドロップ
ウィンドウ(ホームページ)上にファイルやショートカットをドラッグ&ドロップした時に実行される。
onkeydown="" キーダウン
対象となるものの上でキーボードが押された時に実行される。
onkeyup="" キーアップ
対象となるものの上でキーボードが離された時に実行される。
onkeypress="" キー押下(プレス)
対象となるものの上でキーボードが押されてる時に実行される。
「キーダウン」は、1度きりで「キープレス」は押されている間ずっと発生し続ける。
onmove="" 移動(ムーブ)
対象となるもが移動した時に実行される。
主にウィンドウやフレームが動いた時に発生する。
onresize="" サイズ変更(リサイズ)
対象となるものの大きさが変化した時に実行される。
主にウィンドウやフレームの大きさが変化した時に発生する。
onabort="" 中止(アボート)
対象となるものの読み込みが中止された時に実行される。
主に画像の読み込みがキャンセルされた時に発生する。
onfocus="" フォーカス取得
対象となるものがアクティブになった時やフォーカスを持った時に実行される。
主にウィンドウやページ、フォームの要素にカーソルが移った時に発生します。
すいません、ちょっと言葉で説明するのが難しいです。(汗
onblur="" フォーカス喪失(ブルアー)
対象となるものが非アクティブになった時やフォーカスを失った時に実行される。
主に別ウィンドウや別ページ、フォームの別の要素にカーソルが移った時に発生します。
こちらも、ちょっと言葉で説明するのが難しいです。(汗
onselect="" 選択(セレクト)
対象となるものが選択された時に実行される。
主にフォームのText、Textareaが入力可能状態になった時に発生する。
onchange="" 内容変更(チェンジ)
対象となるものの内容が変化した時に実行される。
主にフォームのText、Textarea、Selectの内容が変更された時に発生する。
onsubmit="" フォーム送信(サブミット)
対象となるものが送信された時に実行される。
フォームのSubmitボタンが押された時に発生する。
onreset="" フォームリセット
対象となるものをリセットした時に実行される。
フォームのResetボタンが押された時に発生する。
onerror="" エラー発生
対象となるものでエラーが発生した時に実行される。
主にページや画像などの読み込みでエラーが発生した時に発生する。

これらをタグの中に追記することによりそれぞれのイベント発生と同時にホームページのコンテンツを変化させることが出来ます。

例えば、次の画像の上で、クリックを行うとメッセージを表示し、コンテキストメニュー(ポップアップメニュー)が表示されず、終了します。

◆ 実行サンプル

風船

略号の説明 動作が確認できたブラウザ
IE6.0 NS7.0 MZ1.7.7 FF1.5 OP7.53

上記のタグは次のように記述されています。

【記述サンプル】
<img src="../../images/exp/baloon.gif" alt="風船画像"onmousedown="alert('クリックしましたね?');return false;">

スタイルシートスタイル属性の詳しい説明は、「HTMLの解説」−「15.スタイルシート」や「HTMLの解説」−「14.スタイル属性」を参照してください。

page update:2010/01/23 20:32

Copyright (c) 2000-2009, all Rights Reserved & Produced by atom