私はjavascriptが初めてなので、これが" + objID +"来るの意味を理解できません。
timer[objID]=setTimeout(m,150);
これがすべてのコードです。必要に応じて、エディターにコピーして貼り付けて結果を確認できます。ありがとう！
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>TEXT</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css"> **/*the css */**
html, body { margin: 0px; padding: 0px; }
h1 { margin-top: 30px }
#menu a, .subMenu a {
display: block;
font-family: Arial, sans-serif;
font-size: 10pt;
font-weight: bold;
text-decoration: none;
color: black;
border: 1px solid #ddd;
}
#menu a:hover, #menu a:active, .subMenu a:hover, .subMenu a:active {
background-color: #eee;
border-color: #999;
}
#menu {
background-color: #ddd;
position: absolute;
top: 0px;
left: 0px;
width: 100%;
}
#menu a {
width: 100px;
float: left;
margin-left: 5px;
padding: 2px;
}
.subMenu {
width: 150px;
top: 26px;
background-color: #ddd;
border: 1px solid black;
position: absolute;
visibility: hidden;
}
.subMenu a {
display: block;
width: 90%;
margin: 0px;
padding: 4px;
}
#subMenu1 { left: 5px }
#subMenu2 { left: 125px }
#subMenu3 { left: 230px }
</style> **/*the css ends*/**
<script type="text/javascript">
var timer= new Object();
**/* this func. sets the visibility
of hidden menus which appear by
"onmouseover"*/**
function setVisibility(objID, visible){
var obj=document.getElementById(objID);
if(obj.style.visibility=visible){
obj.style.visibility="visible";
}
else{obj.style.visibility="";}
}
**/* this one calls the func. above
if needed to show the hidden
menu*/**
function showMenu(objID)
{ setVisibility(objID,true);
clearTimeout(timer[objID]);
}
**/*this one hides by onmouseout putting false boolean in func.
setVisibility "visible" parameter*/**
function hideMenu(objID)
{
var m="setVisibility('"+objID+"',false)";
timer[objID]=setTimeout(m,150);
}
</script>
</head>
<body>
<h1>Text</h1>
<div id="menu">
<a href="#"
onmouseover="showMenu('subMenu1')"
onmouseout="hideMenu('subMenu1')">Module 1</a>
<a href="#"
onmouseover="showMenu('subMenu2')"
onmouseout="hideMenu('subMenu2')">Module 2</a>
<a href="#"
onmouseover="showMenu('subMenu3')"
onmouseout="hideMenu('subMenu3')">Module 3</a>
</div>
<div id="subMenu1" class="subMenu"
onmouseover="showMenu('subMenu1')"
onmouseout="hideMenu('subMenu1')">
<a href="../module1/statements/for-1.html">Text</a>
<a href="../module1/statements/if-1.html">Text</a>
<a href="../module1/statements/switch.html">Text</a>
</div>
<div id="subMenu2" class="subMenu"
onmouseover="showMenu('subMenu2')"
onmouseout="hideMenu('subMenu2')">
<a href="../module2/objects/build-in/array.html">Text</a>
<a href="../module2/objects/build-in/boolean.html">Text</a>
<a href="../module2/objects/build-in/date.html">Text</a>
<a href="../module2/objects/build-in/global-object.html">Text</a>
<a href="../module2/objects/build-in/math.html">Text</a>
<a href="../module2/objects/build-in/number.html">Text</a>
</div>
<div id="subMenu3" class="subMenu"
onmouseover="showMenu('subMenu3')"
onmouseout="hideMenu('subMenu3')">
<a href="../module3/document.html">Text</a>
<a href="../module3/history.html">Text</a>
<a href="../module3/location.html">Text</a>
<a href="../module3/navigator.html">Text</a>
</div>
</body>
</html>