レイヤ(Layer)

[up] [prev] [next]

■ 一覧

above, background, below, bgColor, bottom, captureEvents(), document, handleEvent(), height, layers, left, left(clip), length, load(), moveAbove(), moveBelow(), moveBy(), moveTo(), moveToAbsolute(), name, pageX, pageY, parentLayer, releaseEvents(), resizeBy(), resizeTo(), routeEvent(), right, siblingAbove, siblingBelow, src, top, top(clip), visibility, width, zIndex

■ レイヤオブジェクト

window.document.layers (N4)
window.document.layers.length (N4)
window.document.layers[n] (N4)
window.document.layers[name] (N4)

layers はこのドキュメントに含まれるレイヤオブジェクトの配列、length はその個数を示します。個々のレイヤオブジェクトは layers[n] や layers[name] で参照します。

レイヤは、Netscape Communicator 4.0 のダイナミック HTML 技術の中核として実装されました。<layer> や <ilayer> タグで囲まれたレイヤや、スタイルシートの position:absolute を指定した要素に関して、その位置や表示のオン・オフなどをダイナミックに変更することができます。(Internet Explorer ではレイヤに関わらず、ほとんどすべての要素をダイナミックに変更可能です。)Netscape 6 ではレイヤの機能は削除され、代わりに W3C 勧告の DOM(Document Object Model)がサポートされていますので注意してください。

layer.name (N4)

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

■ レイヤの中身

layer.src (N4)
layer.background (N4)
layer.bgColor (N4)

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

layer.document (N4)

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

layer.load(src, width) (N4)

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

■ レイヤを隠す

layer.visibility (N4)

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

<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 (N4)
layer.clip.bottom (N4)
layer.clip.left (N4)
layer.clip.right (N4)
layer.clip.height (N4)
layer.clip.width (N4)

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

<script type="text/javascript">
<!--
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 (N4)
layer.left (N4)
layer.pageX (N4)
layer.pageY (N4)

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

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

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

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

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

■ レイヤの重なり制御

layer.siblingAbove (N4)
layer.siblingBelow (N4)

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

layer.above (N4)
layer.below (N4)
layer.zIndex (N4)

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

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

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

<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 (N4)

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

■ イベント

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

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


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