Lightbox Info Board : SQLの窓

隠し表示エリアとしての IFRAME

ブログの表示場所として以下の3つの場所があります

1) links-left-box (左サイドバー)
2) content (中央)
3) links-right-box (右サイドバー)

これらは、スタイルシートによって、それぞれ固定位置に表示するようになっていますが、
この、いわゆる 3カラム(リキッドレイアウト) は、小粋空間で配布されているテンプレートを元にしています。

IFRAME は、1) と 2) の間に以下のように記述します


	<!-- 隠し表示エリア -->
	<div id="hide-view">
	<IFRAME
		name="hideView"
		frameborder="no"
		scrolling="yes"
		height="520"
		style='display:none;width:99%'
	>
	</IFRAME>	
	</div>

このエリアのスタイルシートの記述は以下のようになります


/* 隠し表示エリア */
.layout-three-column-liquid #hide-view {
	position: absolute;
	left: 185px;
	border-left: 1px solid #666699;
	border-bottom: 1px solid #666699;
}

指定サイト表示時のシナリオ

デフォルトでは、このエリアは非表示であり、src 属性に目的のサイトをスクリプトでセットする事により、
表示処理を実現しますが、元々表示されている中央と右サイドバーを同じタイミングで非表示にします。

スクリプトは以下のようになります


function HideView(url) {
	document.getElementsByName("hideView")[0].src=url;
	document.getElementsByName("hideView")[0].style.display="";
	document.getElementById("content").style.display="none";
	document.getElementById("links-right-box").style.display="none";
}

ツリーからの呼び出し

ツリーリンクに全体の記述がありますが、個別には以下のようになります


<SPAN class="li">
<IMG src="http://winofsql.jp/image/d2.png">
<A href="#" onClick='HideView("http://winofsql.jp/VA003334/argus060307102347.htm")'>
IFRAME による表示
</A>
</SPAN>
<br />