zindexﾌﾟﾛﾊﾟﾃｨ(要素の重ね順)

4つのHTML要素の重ね順を変更できます。

z-indexﾌﾟﾛﾊﾟﾃｨで
HTML要素の重ね順を指定

★下のﾃｷｽﾄBoxにz-indexﾌﾟﾛﾊﾟﾃｨの数値を入力し、を押して下さい。
（数値が大きいほど上になります。ﾏｲﾅｽ(-)数値も入力できる）　

ﾋﾟﾝｸ背景ｻﾞﾗ背景色鉛筆ﾃｷｽﾄ　

★要素をｸﾘｯｸすれば一番上になります(上のﾃｷｽﾄBoxの数値も変化する）

<script language="JavaScript"><!--
function zIndexChange(){
  //4つの要素のz-IndexﾌﾟﾛﾊﾟﾃｨをﾃｷｽﾄBox入力値から取得する
  img1.style.zIndex = img1t.value;
  img2.style.zIndex = img2t.value;
  img3.style.zIndex = img3t.value;
  txt.style.zIndex = txtt.value;
}

function Top(obj){
  //4つのﾃｷｽﾄBoxの値を比較し、最大値を求める
  mx = Math.max(img1t.value,img2t.value);
  mx = Math.max(mx,img3t.value);
  mx = Math.max(mx,txtt.value);
  //ｸﾘｯｸした要素のz-indexを(最大値+1)にする
  document.all(obj).style.zIndex = mx + 1;
  //ｸﾘｯｸした要素に対応するﾃｷｽﾄBoxの値を変更
  textN = eval(obj + "t");
  textN.value = mx + 1;
}
//--></script>

<body>
<img id="img1" 
  STYLE="position:absolute;left:200px;top:80px"
  src="../../images/back05.jpg" onclick="Top(this.id);">
<img id="img2" 
  STYLE="position:absolute;left:100px;top:100px"
  src="../../soft/imgcpb1/backj05.jpg" onclick="Top(this.id);">  
<img id="img3" 
  STYLE="position:absolute;left:10px;top:150px"
  src="../../images/lin_031.gif" onclick="Top(this.id);"> 
<span id="txt" STYLE="position:absolute;left:120px;top:80px;
  color:navy;font:16pt bold 'ＭＳ 明朝'" 
  onclick="Top(this.id);">z-indexﾌﾟﾛﾊﾟﾃｨで<br> 
	HTML要素の重ね順を指定</span> 

<p>★下のﾃｷｽﾄBoxにz-indexﾌﾟﾛﾊﾟﾃｨの数値を入力し、
  <button onclick="zIndexChange();">［重ね順を変更]</button>
  を押して下さい。</p> 
 
<p> 
  ﾋﾟﾝｸ背景<input name="img1t" type="text" value=0 size=4> 
  ｻﾞﾗ背景<input name="img2t" type="text" value=0 size=4>
  色鉛筆<input name="img3t" type="text" value=0 size=4> 
  ﾃｷｽﾄ<input name="txtt" type="text" value=0 size=4>
</p>

END(00/01/9)