| ポイント |
<![CDATA[
<img src="sample1.jpg" style="position:absolute;top:0px;left:0px;z-index:1;" onMouseover="this.style.zIndex=3" onMouseout="this.style.zIndex=1">
]]>
|
| 説 明 |
奥行きを指定するには、あらかじめスタイルシートのz-indexでZ座標を指定しておきます。Z座標は手前に来るほど値が大きくなります。JavaScriptでZ座標を操作する場合は「document.all["オブジェクト名".style.zIndex」のように指定します（IEの場合）。サンプルのように直接タグ内に記述する場合は「this.style.zIndex」のようになります。thisは自分自身を示します。この場合は表示されている画像そのものになります。 |
| サンプル |
<![CDATA[
<html>
<head>
<title>画像の重なり順を変える</title>
</head>
<body>
<img src="sample1.jpg" style="position:absolute;top:0px;left:0px;z-index:1;" onMouseover="this.style.zIndex=3" onMouseout="this.style.zIndex=1">
<img src="sample2.jpg" style="position:absolute;top:30px;left:60px;z-index:2;">
</body>
</html>
]]>
|
| 補足説明 |
zIndexの値は手前にくるほど大きくなります。最小値は1です。0を指定するとNN4（一番手前）とIE（奥）で動作が異なるので注意が必要です。 |
|
■サンプルスクリプトを実行する >>実行
■各ブラウザでの動作結果を見る >>View!
|
画像の重なり順を変える