イヌでもわかるJavaScript講座

リンクの補足説明窓を表示

<SCRIPT language="JavaScript"><!--
myBeforeID = "";                   // 前回表示したコメントＩＤ
myOP = window.opera;            // OP
myN6 = document.getElementById; // N6
myIE = document.all;            // IE
myN4 = document.layers;         // N4
if      (myOP) myBR="N6"; // ブラウザは OP6以上
else if (myIE) myBR="I4"; // ブラウザは IE4以上
else if (myN6) myBR="N6"; // ブラウザは NS6以上
else if (myN4) myBR="N4"; // ブラウザは NN4
else           myBR="";   // ブラウザは 分からん

function myBrowserObj(myID){ // 使用中のブラウザの取得
  if (myBR=="N6") myRet=document.getElementById(myID).style;
  else if (myBR=="I4") myRet=document.all[myID].style;
  else if (myBR=="N4") myRet=document[myID];
  else myRet=0;
  return myRet;
}
function myIn(myID){                // マウスが乗った
  if (myBeforeID != ""){           // コメント表示中？
    myObj.visibility = "hidden";  // 前回のコメントを非表示
  }
  myBeforeID = myID;               // 今回表示するIDを退避
  myObj = myBrowserObj(myID);      // 使用中のブラウザオブジェクト
  if(myObj){                       // ブラウザ対応？
    myObj.visibility = "visible"; // 新しいコメントを表示
  }
}
// --></SCRIPT>

<a href="hajimeni.htm" onmouseover="myIn('step0')">
はじめに<br></a>

<a href="step1.htm" onmouseover="myIn('step1')">
Step.1<br></a>

<a href="aisatu.htm" onmouseover="myIn('step2')">
Step.2<br></a>

<a href="getdate.htm" onmouseover="myIn('step3')">
Step.3<br></a>

<a href="function.htm" onmouseover="myIn('step4')">
Step.4<br></a>

<div id="step0" style="position:absolute; left:150px;
 top:280px; width:300px; height:100px; z-index:1; visibility:hidden">
<table border="1" cellpadding="6" cellspacing="0" width="300">
<tr><td bgcolor="#008b8b"><font color="#FFFFFF">
はじめに<br>
JavaScriptとは、なんぞやという堅苦しい説明です。最初に読んでも
サッパリと思いますが、とりあえず目を通してください。後になると
わかるようになります。<br>
</font></td></tr></table></div>

<div id="step1" style="position:absolute; left:150px;
 top:280px; width:300px; height:100px; z-index:1; visibility:hidden">
<table border="1" cellpadding="6" cellspacing="0" width="300">
<tr><td bgcolor="#008b8b"><font color="#FFFFFF">
ＳＴＥＰ.1<br>いきなりJavaScriptを使ってみましょう<br>
いきなりJavaScriptをつかって、使用中のブラウザ名をホームページ
に表示します。ここをマスターすれば、後は楽勝です。<br>
</font></td></tr></table></div>

<div id="step2" style="position:absolute; left:150px;
 top:280px; width:300px; height:100px; z-index:1; visibility:hidden">
<table border="1" cellpadding="6" cellspacing="0" width="300">
<tr><td bgcolor="#008b8b"><font color="#FFFFFF">
ＳＴＥＰ.2<br>あいさつ文を表示してみましょう<br>
ホームページの冒頭でよく見かける、時間によってかわるメッセージ
を表示します。<br>
</font></td></tr></table></div>

<div id="step3" style="position:absolute; left:150px;
 top:280px; width:300px; height:100px; z-index:1; visibility:hidden">
<table border="1" cellpadding="6" cellspacing="0" width="300">
<tr><td bgcolor="#008b8b"><font color="#FFFFFF">
ＳＴＥＰ.3<br>現在の日付と時間を表示してみましょう<br>
JavaScriptを使えば、日付や時間、曜日も簡単に表示できます。<br>
</font></td></tr></table></div>

<div id="step4" style="position:absolute; left:150px;
 top:280px; width:300px; height:100px; z-index:1; visibility:hidden">
<table border="1" cellpadding="6" cellspacing="0" width="300">
<tr><td bgcolor="#008b8b"><font color="#FFFFFF">
ＳＴＥＰ.4<br>関数化してHTMLソースリストを整理しましょう<br>
長い SCRIPT や数ケ所に同じ SCRIPT を使う場合は関数化して
 HTMLソースリストをすっきりさせましょう。<br>
</font></td></tr></table></div>