マウスでクリックすると動的に変化する

◆マウスが文字に触れると動的に変化する◆
┣１.プルダウンのリンク（文字）　　　　　・・・・　　ツリー構造のプルダウンリンク。
┗２.プルダウンのリンク（画像）　　　　　・・・・　　画像を使ったツリー構造のプルダウンリンク。

　

プルダウンのリンク（文字）

■■１■■
[概要]
ツリー構造のプルダウンリンク

[参照]
 DHTML講座（表示/非表示）

[ソース]
 <HTML>
<HEAD>
<TITLE>ツリー型リンク</TITLE>
<SCRIPT language="JavaScript">
<!--
flag = new Array();

function tree(num){
    com_list = document.all.item("com");
    if(flag[num] == 1){
        com_list[num].style.display='none';
        flag[num] = 0;
    }
    else{
        com_list[num].style.display='block';
        flag[num] = 1;
    }
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<!--テーブルのスタイルは自由に変更-->
<TABLE bgcolor="#ddddff">
    <TR>
        <TD>
            <SPAN onclick="tree(0)">
            <B>タイトルT</B>
            </SPAN>
            <BR>
            <!--リンクの設定-->
            <FONT color="green" id="com" style={display:none;}>
            ┣ <a href="URL">サブタイトルT</a><BR>
            ┣ <a href="URL">サブタイトルT</a><BR>
            ┣ <a href="URL">サブタイトルT</a><BR>
            ┗ <a href="URL">サブタイトルT</a><BR>
            </FONT>
            <BR>
        </TD>
    </TR><TR>
        <TD>
            <SPAN onclick="tree(1)">
            <B>タイトルU</B>
            </SPAN>
            <BR>
            <!--リンクの設定-->
            <FONT color="green" id="com" style={display:none;}>
            ┣ <a href="URL">サブタイトルU</a><BR>
            ┣ <a href="URL">サブタイトルU</a><BR>
            ┣ <a href="URL">サブタイトルU</a><BR>
            ┗ <a href="URL">サブタイトルU</a><BR>
            </FONT>
            <BR>
        </TD>
    </TR>
</TABLE>
</BODY>
</HTML>

※赤は変更点
※水色はid
※緑の部分はコメント部分。一緒に貼り付けても大丈夫。
※タイトルを増やす場合はtree(数字)の数字も増やすこと。

　

プルダウンのリンク（画像）

■■２■■
[概要]
画像を使ったツリー構造のプルダウンリンク

[参照]
 DHTML講座（表示/非表示）

[ソース]

<HTML>
<HEAD>
<TITLE>ツリー型リンク</TITLE>
<SCRIPT language="JavaScript">
<!--
flag = new Array();

function tree(num){
    com_list = document.all.item("com");
    if(flag[num] == 1){
        com_list[num].style.display='none';
        flag[num] = 0;
    }
    else{
        com_list[num].style.display='block';
        flag[num] = 1;
    }
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<!--テーブルのスタイルは自由に変更-->
<TABLE bgcolor="#ddddff">
    <TR>
        <TD>
            <SPAN onclick="tree(0)">
            <B><IMG src="画像URL" align="absmiddle">　タイトルT</B>
            </SPAN>
            <BR>
            <!--リンクの設定-->
            <FONT color="green" id="com" style={display:none;}>
            ┣ <IMG src="画像URL" align="absmiddle">　<a href="URL">サブタイトルT</a><BR>
            ┣ <IMG src="画像URL" align="absmiddle">　<a href="URL">サブタイトルT</a><BR>
            ┣ <IMG src="画像URL" align="absmiddle">　<a href="URL">サブタイトルT</a><BR>
            ┗ <IMG src="画像URL" align="absmiddle">　<a href="URL">サブタイトルT</a><BR>
            </FONT>
            <BR>
        </TD>
    </TR><TR>
        <TD>
            <SPAN onclick="tree(1)">
            <B><IMG src="画像URL" align="absmiddle">　タイトルU</B>
            </SPAN>
            <BR>
            <!--リンクの設定-->
            <FONT color="green" id="com" style={display:none;}>
            ┣ <IMG src="画像URL" align="absmiddle">　<a href="URL">サブタイトルU</a><BR>
            ┣ <IMG src="画像URL" align="absmiddle">　<a href="URL">サブタイトルU</a><BR>
            ┣ <IMG src="画像URL" align="absmiddle">　<a href="URL">サブタイトルU</a><BR>
            ┗ <IMG src="画像URL" align="absmiddle">　<a href="URL">サブタイトルU</a><BR>
            </FONT>
            <BR>
        </TD>
    </TR>
</TABLE>
</BODY>
</HTML>

※赤は変更点
※水色はid
※緑の部分はコメント部分。一緒に貼り付けても大丈夫。
※タイトルを増やす場合はtree(数字)の数字も増やすこと。

　戻る