イヌでもわかるJavaScript講座

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

<SCRIPT language="JavaScript"><!--
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 myDisp(myID,myVisibility){  // コメント窓 表示/非表示
  myObj = myBrowserObj(myID);       // 使用中のブラウザオブジェクト
  if(myObj){                           // ブラウザ対応？
    myObj.visibility = myVisibility;  // 表示/非表示
  }
  return true;
}
function myIn( myID ) {        // カーソルが乗った
  myDisp(myID,"visible");      // 表示
}
function myOut( myID ) {       // カーソルが離れた
  myDisp(myID,"hidden");       // 非表示
}
// --></SCRIPT>

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

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

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

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

<a href="function.htm" onmouseover="myIn('step4')"
 onmouseout="myOut('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>