Lightbox Info Board : SQLの窓

ARGUS のツリーリンク

カテゴリのコンテンツHTML のデフォルトで書かれている記述の下に直接埋め込んでいます。
利用する為の部品として、以下の３つの画像と、JavaScript のコードが必要です。
( JavaScript は Netscape7.1 で動作します )

(1) ->

(2) ->

(3) ->


function TreeControl(id,gid) {

	if ( !document.getElementById(id).flg ) {
		document.getElementById(id).flg = "1";
	}

	if ( document.getElementById(id).flg == "1" ) {
		document.getElementById(id).style.display="";
		document.getElementById(id).flg = "0";
		gid.src = "http://winofsql.jp/image/m.png"
	} 
	else {
		document.getElementById(id).style.display="none";
		document.getElementById(id).flg = "1";
		gid.src = "http://winofsql.jp/image/p.png"
	}

}

JavaScript は、メインの HTML( デザインからカスタマイズ ) にスクリプトタグを使用して記述して下さい

以下は、ツリーリンクの実際の記述です。

ブログ内へのリンクは、アンカー( A タグ ) を使用する Weblog parts の書き方を使用します。

ブログ内に IFRAME を埋め込んで、別のサイトを表示する場合( このページの表示 )は、
ブログチューニングの書き方を使用しますが、IFRAME の設置とJavaScript のコードが
さらに必要となります。

この詳細については、IFRAME による表示を参照して下さい


<div class="sidetitle"><% content.title %></div>
<div class="side">
<% content.header -%>
<% loop:list_category -%>
<a href="<% category.page_url %>"><% category.name | tag_break %></a><br />
<% /loop -%>

<!-- Weblog parts タイトル部分 -->
<SPAN class="li">
<IMG
 src="http://winofsql.jp/image/p.png"
 onClick='TreeControl("001", this)'
>
&nbsp;Weblog parts
</SPAN><br>
<DIV class="ul" style='display:none;' id="001">

<!-- Weblog parts 明細の一つ目 -->
<SPAN class="li">
<IMG src="http://winofsql.jp/image/d2.png">
<A href="http://argus.sblo.jp/article/318321.html">
Google Map ｻﾃﾗｲﾄﾂｱｰ
</A>
</SPAN>
<br />

</DIV>

<!-- ブログチューニング タイトル部分 -->
<SPAN class="li">
<IMG
 src="http://winofsql.jp/image/p.png"
 onClick='TreeControl("002", this)'>
&nbsp;ブログチューニング
</SPAN><br>
<DIV class="ul" style='display:none;' id="002">

<!-- ブログチューニング 明細の一つ目 -->
<SPAN class="li">
<IMG src="http://winofsql.jp/image/d2.png">
<A href="#" onClick='HideView("http://winofsql.jp/VA003334/argus060307090705.htm")'>
ツリーリンク
</A>
</SPAN>
<br />

</DIV>

</div>

SPAN タグの li クラスと、DIV タグの ul クラスの記述は以下のようになっています


.ul {
	font-weight:normal;
	margin-left:10px;
/*	margin-top:2px; */
}
.li {
	font-weight:normal;
/*	margin-left:5px; */
	font-family:Verdana,'ＭＳ Ｐゴシック';
	font-size:10px;
	color: #444444;
}