Why should this rollover work?

I am designing a site and I am trying to add a very very simple rollover on 3 navigation buttons on the page. I am following a tutorial that I completed on Lynda.com entitled “java script essential training 2007” (the 2007 may be part of the problem) The thing is I do not see how it should work in the first place but her (the instructors) example performed as advertised. The rollover example consisted of a html page and a style sheet. No Java Script Page no script tags in the html document. And for my part I was right because mine is not working can someone see what the issue is ? I feel like the Da Vinci helicopter concept it is not supposed to fly but it does and in this case it did for her anyway

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<meta content="residentail,lawncare,mowing, edging,weeding, edging, cleanup, fertilizer, weed control
Middleburg,Orange Park, Green Cove Springs, Fleming Island, Clay County, commerical accounts"></meta>
<title>Blades of Glory Lawncarer Homepage</title>
<link rel="stylesheet" type="text/css" href="BOG_lawncare.css"></link>
<
</head>

<body>
<div id="container">
<div id="masthead">
	<img alt="" height="226" longdesc="Mast Head Image" src="BOG_images/BOG_masthead.jpg" width="902" />
	<div id="NavBarHome">
		<a href="default.html" onmousemove="doucment.navbutton.src ='BOG_images/BOG_navbutton_Home_Hover.jpg" onmouseout="document.navbutton.src ='BOG_images/navbutton_Home.jpg">
		<img alt="" height="50" longdesc="navbutton_Home" src="BOG_images/BOG_navbutton_Home.jpg" width="125" name="navbuttpm"  /></a></div>
	<div id="NavBarServices">
		<a href="services.html" onmouseover="document.navbutton.src ='BOG_images/BOG_navbutton_Services_Hover.jpg'" onmouseout="document.navbutton.src ='BOG_images/BOG_navbutton_Services.jpg'">
		<img alt="" height="50" longdesc="navbutton_Services" src="BOG_images/BOG_navbutton_Services.jpg" width="125" name ="navbutton" /></a></div>
	<div id="NavBarContact">
		<a href="contact_us.html" onmouseover="document.navbutton.src ='BOG_images/BOG_navbutton_Contact_Us_Hover'"onmouseout="document.navbutton.src ='BOG_images/BOG_Contact_Us.jpg'">
		<img alt="" height="50" longdesc="NavButton_Contact_Us" src="BOG_images/BOG_navbutton_Contact_Us.jpg" width="125" name ="navbutton" /></a></div>
</div>
</body>

</html>

#container{
	width: 900px;
	margin-left: auto;
	margin-right: auto;
	
		
}
#masthead{
	width: 900px;
	text-align: center;	
	
}

#masthead h1{
	font-family: Arial, Helvetica, sans-serif;
	color:#FFFF00;
}

#NavBarHome{
	width: 300px;
	text-align: center;
	float: left;
	border-width: 0px;
}

#NavBarServices{
	width: 300px;
	text-align: center;
	float: left;
	border-width: 0px;
}

#NavBarContact{
	width: 300px;
	text-align: center;
	float: left;
	clear: right;
	border-width: 0px;
	
}

I did not want to do a complete navigation system for a 3 page site. I guess I am just lethargic or lazy. Hell ask my wife and she will confirm that part. LOL

Thanks
Mike E:eye:

I realize this is not my most current method of doing this I am doing it mostly for understanding. And I most likely will do an <ul><li> CSS menu when it is all said and done. But now I have made some changes to the HTML doc and it is working well kinda. The middle button “Services” works as it is supposed to the first “Home” and the the last “Contact Us” do not. They show the hove image most of the time or when you mouse out the image disappears all together. why does the middle button work and the other 2 not? The methods appear to be identically structured.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<meta content="residentail,lawncare,mowing, edging,weeding, edging, cleanup, fertilizer, weed control
Middleburg,Orange Park, Green Cove Springs, Fleming Island, Clay County, commerical accounts"></meta>
<title>Blades of Glory Lawncarer Homepage</title>
<link rel="stylesheet" type="text/css" href="BOG_lawncare.css"></link>
<style type="text/css">
.style1 {
	border-width: 0;
}
</style>
</head>

<body>
<div id="container">
<div id="masthead">
	<img alt="" height="226" longdesc="Mast Head Image" src="BOG_images/BOG_masthead.jpg" width="902" />
	<div id="NavBarHome">
		<a href="default.html" onmouseover="document.navbutton_Home.src ='BOG_images/BOG_navbutton_Home_Hover.jpg'" onmouseout="document.navbutton_Home.src ='BOG_images/navbutton_Home.jpg'">
		<img alt="" height="50" longdesc="navbutton_Home" src='BOG_images/BOG_navbutton_Home.jpg' width="125" name="navbutton_Home" class="style1"  /></a></div>
	<div id="NavBarServices">
		<a href="services.html" onmouseover="document.navbutton_Services.src ='BOG_images/BOG_navbutton_Services_Hover.jpg'" onmouseout="document.navbutton_Services.src ='BOG_images/BOG_navbutton_Services.jpg'">
		<img alt="" height="50" longdesc="navbutton_Services" src="BOG_images/BOG_navbutton_Services.jpg" width="125" name ="navbutton_Services" class="style1" /></a></div>
	<div id="NavBarContact">
		<a href="contact_us.html" onmouseover="document.navbutton_Contact_Us.src ='BOG_images/BOG_navbutton_Contact_Us_Hover.jpg'"onmouseout="document.navbutton_Contact_Us.src ='BOG_images/BOG_Contact_Us.jpg'">
		<img alt="" height="50" longdesc="NavButton_Contact_Us" src="BOG_images/BOG_navbutton_Contact_Us.jpg" width="125" name ="navbutton_Contact_Us" class="style1" /></a></div>
</div>
</body>

</html>

Mike E:eye:

Been there, done that, got the misspelled T-shirt… :slight_smile:

You should be using CSS for something as incredibly simple as a rollover button. Javascript is overkill, and if it is disabled it will not work.

Using Javascript for a button rollover dates from the previous century when CSS wasn’t widely supported or understood.

ALSO, an id is meant to be unique on any given page, but you have three divs with the same id - you should be using a class instead. And you probably don’t need three divs either, but that would require a bigger re-write to sort it. Not difficult to do, I’m just lazier than others. But think list for menus…

It comes down to I CANNOT SPELL ! :nono:

It worls if ALL elements are SPELLED correctly:eek:

Thanks
Mike E:eye: