レイヤ(Layer)

[up] [prev] [next]

このページの情報は Firefox の前身である Netscape Navigator でサポートされていた古いものです。標準的な仕様は DOM を参照してください。

目次

レイヤオブジェクト

window.document.layers
window.document.layers.length
window.document.layers[n]
window.document.layers[name]

layers はこのドキュメントに含まれるレイヤオブジェクトの配列、length はその個数を示します。個々のレイヤオブジェクトは layers[n] や layers[name] で参照します。レイヤは、Netscape Communicator 4.0 のダイナミック HTML 技術の中核として実装されていた機能です。<layer> や <ilayer> タグで囲まれたレイヤや、スタイルシートの position:absolute を指定した要素に関して、その位置や表示のオン・オフなどをダイナミックに変更することができます。Netscape 6 ではレイヤの機能は削除され、代わりに W3C 勧告の DOM(Document Object Model)がサポートされました。

layer.name

レイヤの名前。<layer> タグの名前(name)属性に相当します。

レイヤの中身

layer.src
layer.background
layer.bgColor

src はレイヤの中身に表示する内容のアドレス、background は背景画像、bgColor は背景色を示します。<layer> タグの名前(name)、背景画像(background)、背景色(bgcolor)属性に対応します。

layer.document

レイヤの内部のドキュメントオブジェクト。しかし、レイヤに対して document.write() を用いると、ブラウザがダウンするなどいろいろ問題があるらしい。

layer.load(src, width)

レイヤの中身を書き換えます。

レイヤを隠す

layer.visibility

<layer> タグの可視性(visibility)に対応する属性値。"hide" を設定することでこのレイヤを非表示状態に、"show" を設定することでこのレイヤを表示状態に変更することができます。

HTML
<ilayer name="L1">こんにちわ!!</ilayer>
<form action="#">
<input type="button" value="表示"
  onclick="document.layers["L1"].visibility = 'show'">
<input type="button" value="非表示"
  onclick="document.layers["L1"].visibility = 'hide'">
</form>
layer.clip.top
layer.clip.bottom
layer.clip.left
layer.clip.right
layer.clip.height
layer.clip.width

レイヤの可視領域の位置とサイズを示します。<layer> タグの、clip 属性で指定する上端(top)、下端(bottom)、左端(left)、右端(right)、高さ(height)、幅(width)に相当します。

HTML
<script>
function func(img) {
  if (document.layers[img].clip.width > 1) {
    document.layers[img].clip.width -= 5;
    window.setTimeout("func('" + img + "')", 10);
  }
}
</script>
</head>
<body>
<ilayer name="L1" height=100 width=100 src="xx.gif">
</ilayer>
<form action="#">
<input type="button" onclick="func('L1')">
</form>

レイヤの位置と大きさ

layer.top
layer.left
layer.pageX
layer.pageY

top は上からの位置、left は左からの位置、pageX は上からの相対位置、pageY は左からの相対位置を示します。それぞれ、<layer> タグの top、left、page-x、page-y 属性に相当します。

HTML
<html>
<head>
<title>テスト</title>
<script>
function func() {
  document.layers["L1"].left++;
  setTimeout("func()", 100);
}
</script>
</head>
<body onload="func()">
<layer name="L1">こんにちわ</layer>
</body>
</html>
layer.moveTo(x, y)
layer.moveBy(x, y)
layer.moveToAbsolute(x, y)

レイヤの位置を移動します。moveTo() は画面内の絶対座標、moveBy() は画面内の相対座標、moveToAbsolute() はスクリーン上の絶対座標に移動します。

layer.resizeTo(x, y)
layer.resizeBy(x, y)

レイヤの大きさを変更します。resizeTo() は絶対的に、resizeBy() は相対的にリサイズします。layer.width と layer.height が無いのは妙ですが、layer.clip.width と layer.clip.height で取得できるようです。

レイヤの重なり制御

layer.siblingAbove
layer.siblingBelow

siblingAbove はこのレイヤの上部(または下部)にあるレイヤオブジェクトを示します。

layer.above
layer.below
layer.zIndex

above は上になるべきレイヤ、below は下になるべきレイヤ、zIndex は重なり順序を示します。それぞれ、<layer> タグの above、below、z-index 属性に相当します。

layer.moveAbove(layer)
layer.moveBelow(layer)

このレイヤを layer で指定したレイヤオブジェクトの上(または下)に移動します。

HTML
<layer bgcolor="#ff0000" top=100 left=100 height=100 width=100"
  onmouseover="this.moveAbove(this.siblingAbove)"></layer>
<layer bgcolor="#00ff00" top=120 left=120 height=100 width=100
  onmouseover="this.moveAbove(this.siblingAbove)"></layer>
<layer bgcolor="#0000ff" top=140 left=140 height=100 width=100
  onmouseover="this.moveAbove(this.siblingAbove)"></layer>
layer.parentLayer

親レイヤオブジェクトを示します。

イベント

layer.handleEvent(event)
layer.captureEvents(event)
layer.releaseEvents(event)
layer.routeEvent(event)

レイヤに関するイベントを処理します。


[up] [prev] [next]
Copyright (C) 1996-2001 杜甫々
改訂版初版:2001年6月30日、最終更新:2001年7月29日
http://www.tohoho-web.com/js/layer.htm