レイヤーの基礎知識
●ネットスケープにおけるレイヤーとは
Ｎｅｔｓｃａｐｅ Ｎａｖｉｇａｔｏｒ 4.0は、ＣＳＳ１というスタイルシートの規格をサポートしているのですが、そのスタイルシートの要素を直接コントロールする事が出来ません。そのかわりに、レイヤーという概念が導入されています。
レイヤーとは、ここ最近では、いろいろなアプリケーションでもその概念を取り入れていますが、トレーシングペーパーやセル画のようなもので個別の何枚かのシートを重ね合わせて全体の画像を作るものです。
Ｎｅｔｓｃａｐｅでは、その、個別のシートを表現するＨＴＭＬを<LAYER>〜</LAYER>タグで囲む事によってレイヤーオブジェクトとして操作しています。レイヤーオブジェクトには、テキストや画像などを含める事ができ、イベントを検知でき、その要素を変更できるのでＩｎｔｅｒｎｅｔ Ｅｘｐｌｏｒｅｒのスタイルシートと同等の事を行う事が出来ます。
例として次にＮＮとＩＥでの記述方法の違いを簡単に述べておきます。
●マウスカーソルを乗せると背景色が変わる
動作確認はＮｅｔｓｃａｐｅ Ｎａｖｉｇａｔｏｒを使用してください。
マウスカーソルがlayer1というレイヤーの文字列の上に乗るとその文字列の背景色が変わるというものです
ファイル名：cbgnn.html
<html>
<head>
<title>マウスカーソルを乗せると背景色が変わる</title>
<script language="JavaScript">
function ChgBGColor(cBGColor){
document.layers["layer1"].bgColor = cBGColor;
}
</script>
</head>
<body>
<layer ID="layer1" left=30 top= 90 bgColor="#ff0000" onMouseOver="ChgBGColor('#0000ff')" onMouseOut="ChgBGColor('#ff0000')">
ここにマウスカーソルを持ってくると背景色が変わるよ！
</layer>
</body>
</html>
●今度は同じ動作をＩＥで
こちらはＩｎｔｅｒｎｅｔ Ｅｘｐｌｏｒｅｒで動作確認してください
ファイル名：cbgie.html
<html>
<head>
<title>マウスカーソルを乗せると背景色が変わる</title>
<script language="JavaScript">
function ChgBGColor(cBGColor){
document.all["div1"].style.backgroundColor = cBGColor;
}
</script>
</head>
<body>
<div ID="div1" style="position:absolute; left:30px; top:90px; background-color:#ff0000" onMouseOver="ChgBGColor('#0000ff')" onMouseOut="ChgBGColor('#ff0000')">
ここにマウスカーソルを持ってくると背景色が変わるよ！
</div>
</body>
</html>