Hi Chris,
As JavaScript isn't a precompiled language (rather a scripting one),
functions, objects and variables are processed one after another,
following the source order. When you declare your variables, the browser
is not yet aware of the existence of the two requested elements. You
have several alternatives:
----------------------------------------
To place your script after the two "a" and "p" elements, inside the body
tags ( it's probably not the nicest way but it functions...):
-----------------------------------------
<html>
<head>
<title>JavaScript Testing</title>
<style type="text/css" media="screen">
a { font: normal 24px "Trebuchet MS"; }
p { display: none; }
</style>
</head>
<body>
<a id="toggle" href="#">Hover toggle</a>
<p id="onoff">Hello world!</p>
<script type="text/javascript">
var toggle = document.getElementById('toggle');
var onoff = document.getElementById('onoff');
toggle.onmouseover = function() {
onoff.style.display = 'inline';
}
toggle.onmouseout = function() {
onoff.style.display = 'none';
}
</script>
</body>
</html>
------------------------
To write a simple function and call it with the onmouseover and
onmouseout event handlers inside the elements tags:
------------------------
<html>
<head>
<title>JavaScript Testing</title>
<style type="text/css" media="screen">
a { font: normal 24px "Trebuchet MS"; }
p { display: none; }
</style>
<script type="text/javascript">
function toggle(status) {
var onoff = document.getElementById('onoff');
onoff.style.display = status;
}
</script>
</head>
<body>
<a id="toggle" href="#" onMouseOver="toggle('block');"
onMouseOut="toggle('none');">Hover toggle</a>
<p id="onoff">Hello world!</p>
</body>
</html>
-----------------------
To write a more complicated function and call it with a onLoad event
handler in the body tag, which delays the processing of the function and
its variables till all the objects are loaded in memory by the browser:
------------------------
<html>
<head>
<title>JavaScript Testing</title>
<style type="text/css" media="screen">
a { font: normal 24px "Trebuchet MS"; }
p { display: none; }
</style>
<script type="text/javascript">
function toggleOnOff() {
var toggle = document.getElementById('toggle');
var onoff = document.getElementById('onoff');
toggle.onmouseover = function() {
onoff.style.display = 'block';
}
toggle.onmouseout = function() {
onoff.style.display = 'none';
}
}
</script>
</head>
<body onLoad="toggleOnOff();">
<a id="toggle" href="#">Hover toggle</a>
<p id="onoff">Hello world!</p>
</body>
</html>
-------------------------
HTH!
Roberto
******************************************************
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
******************************************************
