JavaScript Discussion Boards

Hi!
This has been bugging me for quite a while now... I have done many google searches but nothing seems to actually help me.... When i run this script i get the following error:
"SCRIPT5007: Unable to set value of the property 'onmouseover': object is null or undefined"
I don't know how it doesn't work but if i use onmouseover="show()" and obviosuly remake my function heading it works... I can't use the onmouseover="" as apparently its not the best way of doing it... Cna nayone shine some light on where it could be going wrong? Thanks for all your help!

HTML

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
		<style>
			#gallery
				{
					position:relative;
					display:block;
					width:800px;
					height:500px;
					margin:20px auto;
					text-align:center;
				}
			#image
				{
					display:block;
					width:800px;
					height:500px;
				}
			#imgBar
				{
					position:absolute;
					display:block;
					width:500px;
					height:80px;
					z-index:2;
					top:400px;
					left:145px;
					display:none;
				}		
		</style>
		<script>
			var galleryImg = document.getElementById('image');
			var bar = document.getElementById('imgBar');
			
			galleryImg.onmouseover = function ()
			{
				bar.style.display = "block";
			};
			galleryImg.onmouseout = function ()
			{
				bar.style.display = "none";
			};
		</script>
	</head>
	<body>
	<section id="gallery">
		<img src="#" id="image"/>
		<div id="imgBar">
		<img src="img/gallery/thumbnail1.png" class="thumbnail"/>
		<img src="img/gallery/thumbnail1.png" class="thumbnail"/>
		<img src="img/gallery/thumbnail1.png" class="thumbnail"/>
		<img src="img/gallery/thumbnail1.png" class="thumbnail"/>
		</div>
	</section>
	</body>
</html>

An HTML page is interpreted top to bottom. When your javascript runs (in the head) the HTML has not yet been parsed, and therefore does not exist.

Put everythng into a function

JavaScript

function runMeOnLoad(){
    var galleryImg = document.getElementById('image');
    var bar = document.getElementById('imgBar');
			
    galleryImg.onmouseover = function ()
    {
        bar.style.display = "block";
    };
    galleryImg.onmouseout = function ()
    {
        bar.style.display = "none";
    };
}

And execute onload

HTML

<body onload="runMeOnLoad()">

Brilliant, thank you Smile | :)

Put your script code where the "section" tag ends (before the body tag ends) and it'll work fine.