DHTML ( Dynamic HTML )

DHTML とは

DHTML ( Dynamic HTML )とは、ブラウザ上で動的な操作・表示を行なうための技術である。
もともとはWindowsのアクティブディスクトップのために作られた規格で、 HTML・スタイルシート・スクリプト(JavaScript, VBScriptなど)を使用してデータを作る。 (非互換な部分はあるが同様の機能がNetscapeにもある)
具体的には以下の機能が含まれる。

動的なスタイルシート(Dynamic Style Sheets)
JavaScriptを使用してウインドウの大きさなどで、スタイルシートによるレイアウトを変化することができる。
絶対的な位置指定
ブラウザ上の座標指定で正確な位置に部品を配置することができる。
レイヤ
Photoshopなどのように各レイヤに配置したテキスト・画像などを重ねて表示できる。
動的フォント(Dynamic Font)
ローカルのマシンに目的のフォントが無い場合はネットワークから自動的にフォントデータをダウンロードする。
COM(Componet Object Model)によってアプリケーションから動的オブジェクトを呼び出すことができる。 (InternetExplorer 4.01以上)

DHTML の例

例1

リンクされた文字の上にカーソルを移動するとバックの色が変化するHTMLをDHTMLのレイヤーなどを使って作ってみよう。

以下の内容の HTML ファイルを適当なエディターを使用し、dhtml1.htmlというファイル名で作る。


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<HTML>
<HEAD>
<TITLE>DHTML sample 1</TITLE>
<SCRIPT LANGUAGE = "JavaScript">
<!--
function changeBgColor(color)
{  
	if(document.layers)
		document.layers['layer0'].bgColor = color;
	if(document.all)
		document.all('layer0').style.backgroundColor = color;
}
// -->
</SCRIPT>
<STYLE TYPE="text/css">
<!--
.absPosition
{
	position:absolute;
}
#layer0
{
	left: 20px;
	top: 10;
	width: 50;
	height: 18;
	clip: rect(0,50,18,0);
}
-->
</STYLE>
</HEAD>
<BODY>
<SPAN CLASS = "absPosition" ID = "layer0">
<A HREF = "link.htm" onMouseOver = "changeBgColor('#ff0000')" onMouseOut = "changeBgColor('#ffffff')" >
touch Me
</A>
</SPAN>
</BODY>
</HTML>

上の HTML ファイルをブラウザ(NetscapeまたはIE) で読み込む。
このページのように表示されて、リンクされた文字の上にカーソルを持ってゆくと、文字のバックが赤色になり、マウスを離すと白色になる。

上のHTMLデータ中の1部を解説する。

JavaScript部分

if(document.layers)
ブラウザがNetscapeかどうかを調べる。
document.layers['layer0'].bgColor = color;
現在のdocumentオブジェクト(このページ)のlayer0レイヤーの背景色(bgColor)をcolorにする。
if(document.all)
ブラウザがIEかどうかを調べる。
document.all('layer0').style.backgroundColor = color;
現在のdocumentオブジェクト(このページ)のコレクション(all)のlayer0レイヤーのスタイルシートにおける背景色(backgroundColor)をcolorにする。
スタイルシートの定義部分

.absPosition
absPositionという名前のクラスを定義する。
タグ名が無いクラス定義はすべてのタグで使用できる。
position:absolute;
位置の指定を絶対位置で行なう。
#layer0
layer0という名前のIDを定義する。
クラス名の無いIDはすべてのクラスで使用できる。
left: 20px;
ブラウザ内の左から20ピクセルの位置。
top: 10;
ブラウザ内の上から10ピクセルの位置。
width: 50;
幅が50ピクセル。
height: 18;
高さが18ピクセル。
clip: rect(0,50,18,0);
top: 0, right: 50, bottom:18, left: 0 がlayer0を表示する範囲になる。
HTML部分

<A HREF = "link.htm" onMouseOver = "changeBgColor('#ff0000')" onMouseOut = "changeBgColor('#ffffff')" >
マウスカーソルが文字(touch Me)の上に乗ると、changeBgColor('#ff0000')を実行し、マウスカーソルが文字から離れるとchangeBgColor('#ffffff')を実行する。

注意

DHTMLはNetscapeとInternet Explorerでは互換性が無い場合があるので注意が必要である。

参考

Prev
index | home

abe@injapan.net