便利eelife Java Script

   戻る

プルダウンメニュ- 1行づつ表示します。
Java Script     便利eelife    Color Room


サンプルソース
<!--HTMLタグ </HEAD>の下に挿入してください。-->
<BODY >
<P>プルダウンメニュ- 1行づつ表示します</P>
<DIV><A href="javascript:function voi(){}" onmouseover="Show('menu0',0)">Java Script</A> &nbsp; &nbsp;
<A href="javascript:function voi(){}" onmouseover="Show('menu1',1)">便利eelife</A> &nbsp; &nbsp;
<A href="javascript:function voi(){}" onmouseover="Show('menu2',2)">Color Room</A></DIV>
<DIV id="menu0" style="position:absolute;top : 74px;left : 5px;

z-index : 3;
visibility : visible;
width : 124px;
height : 16px;
"></DIV>
<DIV id="menu1" style="position:absolute;top : 76px;left : 107px;

z-index : 1;
visibility : visible;
width : 102px;
height : 16px;
"></DIV>
<DIV id="menu2" style="position:absolute;top : 77px;left : 191px;

z-index : 2;
visibility : visible;
width : 114px;
height : 16px;
"></DIV>
<BR>
<DIV id="menu"></DIV>

</BODY>
<!--Javascript <HEAD>と</HEAD>の間に挿入してください。 -->
<SCRIPT language="JavaScript">
<!--eelife
v = 0;
tag = "";
n ="";
flag = "menu";
z = "";

msg0 = new Array();  // menu0 の時に表示されるメッセージの配列
msg0[0] = "<font color='red'>サンプルメニュー</font><br>";
msg0[1] = "<font color='blue'>厳選リンク集。</font><br>";
msg0[2] = "元の大きさで表示<br>";
msg0[3] = "<B>太字で表示</B><br>";
msg0[4] = "<small>細字で表示</small><br>";
msg0[5] = "<a href='javascript:function voi(){}'>リンクしてます</a>";

msg1 = new Array();  // menu1 の時に表示されるメッセージ
msg1[0] = "<font color='#ff00ff'>複数検索</font><br>";
msg1[1] = "<font color='blue'>厳選リンク集。</font><br>";
msg1[2] = "<font color='green'>Color Room </font><br>";

msg2 = new Array();  // menu2 の時に表示されるメッセージ
msg2[0] = "HPの色の表示<br>";
msg2[1] = "彩度.明度.色相<br>";
msg2[2] = "色の名前<br>";

dsp_msg = new Array(msg0,msg1,msg2);  //  msg0,msg1,msg2の各配列を入れる配列

function Show(n,z)   // "n" : オブジェクトの名前 ID名の取得
{Lyid=n;Su=z;      // "z" : 配列 dsp_msg を取得する数値(何番目か)0なら msg0、1なら msg1
if( flag== Lyid) return;
else
Hide(flag); //現在表示されているメッセージの消去
flag= Lyid;
act();

}
function act()  // メッセージを1行づつ表示します
{
for (i=0; i<v; i++)
tag += dsp_msg[Su][i];  // 例えば dsp_msg[1][2]ならmsg1の"<font color='green'>Color Room </font><br>"です
document.all[Lyid].innerHTML = tag;

if (v < dsp_msg[Su].length){  // dsp_msg[Su]の配列の数、msg0なら 6 msg1なら3
tag = "";   // 配列の数だけ繰り返してメッセージを1行づつ表示
v++;
setTimeout("act()",100);
}
else{
i=0;v=0;tag="";

}
}

function Hide( Lyid ){   // 現在表示されているメッセージの消去 空白の文字列を代入
document.all[Lyid].innerHTML = tag;
}
// -->
</SCRIPT>
コメント

msg[i] で 0 から順にメッセージ取出します。
document.all["Lyid"].innerHTML = tag;で ID名 Lyid にこれを表示します。
innerHTML はhtmlタグ付きの文字列を実行してくれますので<font color='red'>を
付ければ文字色を赤に、<B>であれば太文字になります。