visibilityで表示/非表示の切替え

表示したい項目を選択して下さい。

[HTML要素の配置方法を指定するIE4の拡張CSS
=absolute
    ・絶対的位置指定法
    ・使えるﾀｸﾞは･･･TABLE,INPUT,SELECT,TEXTAREA,INPUT,DIV,SPAN,
OBJECT,APPLET,EMBED,IFRAME,IMG,HR,MARQUEE,FIELDSET
=relative
    ・親ﾀｸﾞからの相対的位置指定法
    ・全てのﾀｸﾞに使える

・IE4の拡張CSS。全てのﾀｸﾞが対象、継承しない。
・値
    長さ
    %指定
    auto

・上からの位置を指定。
    "position:absolute"の場合、画面上からの絶対座標となる。
    "position:relative"の場合、親ﾀｸﾞからの相対位置となる。

・IE4の拡張CSS。全てのﾀｸﾞが対象、継承しない。
・値
    長さ
    %指定
    auto

・左からの位置を指定。
    "position:absolute"の場合、画面左からの絶対座標となる。
    "position:relative"の場合、親ﾀｸﾞからの相対位置となる。

<script language="JavaScript"><!--
function Show(n){
  for(var i = 1;i < 5;i++){
  	document.all["d" + i].style.visibility = "hidden";
  }
  document.all["d" + n].style.visibility = "visible";
}
//--></script>
</head>

<body>
<p>表示したい項目を選択して下さい。
<FORM>
<INPUT type="radio" name="vis" onclick="Show(1)">postionﾌﾟﾛﾊﾟﾃｨ 
<INPUT type="radio" name="vis" onclick="Show(2)">topﾌﾟﾛﾊﾟﾃｨ 
<INPUT type="radio" name="vis" onclick="Show(3)">leftﾌﾟﾛﾊﾟﾃｨ 
<INPUT type="radio" name="vis" onclick="Show(4)">画像 
</FORM>  
 
<div id="d1" STYLE="visibility:hidden;
	position:absolute;top:150;left:50;width:80%"> 
	･･･(内容は省略) 
</div>
<div id="d2" STYLE="visibility:hidden;
	position:absolute;top:150;left:50;width:80%">  
    	･･･(内容は省略) 
</div>
<div id="d3" STYLE="visibility:hidden;
	position:absolute;top:150;left:50;width:80%">  
	･･･(内容は省略) 
</div>  
<div id="d4" STYLE="visibility:hidden;
	position:absolute;top:150;left:50;width:80%"> 
	<IMG border="0" src="../../images/cut/025.gif"> 
</div>

END(99/11/29)