◇同じ位置にdivを置き表示を切り替える

 

 同じ位置に<div>を置き,表示を切り替える

冒頭の画像は一つの<div>の中に2つの<div>を配置し、表示を切り替えています。

<div style="position:relative;width:80%;margin-left:auto;margin-right:auto;">
  <div id="div_1" style="position:relative;top:0;left:0;z-index:1;width:100%">
     <img src="http://k-hiura.cocolog-nifty.com/image_08_11/podBay_B_open.jpg"
          style="width:100%">
  </div>
  <div id="div_2" style="position:absolute;top:0;left:0;z-index:2;width:100%;
                  display:block">
     <img src="http://k-hiura.cocolog-nifty.com/image_08_11/discovery_side.jpg"
          style="width:100%">
  </div>
</div>

 divのposition

外側の<div>は周りとの相対位置に配置するのでposition:relative;となっています。

内側の最初の<div>は外側のすぐ中に置き、領域を確保するためにposition:relative;となっています。
relativeとしない場合は領域は確保されません。

内側の２番目の要素は、外側の要素を基準としたtop:0,left:0位置指定で配置するためposition:absolute;となっています。

 z-indexによるレイヤー位置と画像切り替え

内側の２つの<div>はz-index値によりレイヤー化されています。大きな数値程上になります。

ここではボタンにより上の<div>を隠す/出す(display:none/display:block)ことにより画像を切り替えています。

<input type="button" value="画像1" style="WIDTH:10em"
   onClick="document.getElementById('div_2').style.display='block';">
 
<input type="button" value="画像2" style="WIDTH:10em"
   onClick="document.getElementById('div_2').style.display='none';">

 低能HTML5と<center>

外側の<div>のmargin-left/margin-rightは低能なHTML5の原始的なcenter表現です。

雑談:愚痴:
HTML5+(CANVAS)によってwebの表現力が著しく低下したのが残念でなりません。
昔のwebのようなインタラクティブでアーティスティックで豊かな世界が戻ること願ってやみません。