Menu rollovers on a dynamic page

Heya peeps.

I have a dynamic menu running on this site here.

The menu is all up and working fine except for one problem. On the 3 static pages I have, Home, About, and Resources, the menu button specific to the page is highlighted. But when I go on to the blogpage, “Fieldnotes”, there image FieldnotesSel.jpg doesn’t appear, so for some reason the menu highlighting on the only dynamic page isn’t working.

Here is some code if will help:

PHP:

<div id="nav">
<ul class="style">
        <?php
			/*
			Replace <Page> with the name of the Page
			each page in the list of pages must have
			2 images in images/navbar <Page>.jpg and <Page>Sel.jpg
			A page added to wordpress called <Page>
			*/

			$pages = array("Home","About","Resources","Fieldnotes");
			foreach ($pages as $page){?>
                <li <?php if($atpage==$page)echo("class='at'");?> ><a href="<?php bloginfo('url'); ?>/<?php if ($page!="Home")echo($page) ?>">
                <p><img src="<?php bloginfo('stylesheet_directory'); ?>/images/navbar/<?php echo($page) ?>.jpg" /></p>
                <p><img src="<?php bloginfo('stylesheet_directory'); ?>/images/navbar/<?php echo($page) ?>Sel.jpg" /></p>
                </a></li>
			<?php } ?>
</ul>
		</div>

Rendered HTML:

<div id="nav">
<ul class="style">
                        <li  ><a href="https://www.evalueresearch.co.nz/wordpress/">
                <p><img src="https://www.evalueresearch.co.nz/wordpress/wp-content/themes/evalue/images/navbar/Home.jpg" /></p>

                <p><img src="https://www.evalueresearch.co.nz/wordpress/wp-content/themes/evalue/images/navbar/HomeSel.jpg" /></p>
                </a></li>
			                <li  ><a href="https://www.evalueresearch.co.nz/wordpress/About">
                <p><img src="https://www.evalueresearch.co.nz/wordpress/wp-content/themes/evalue/images/navbar/About.jpg" /></p>
                <p><img src="https://www.evalueresearch.co.nz/wordpress/wp-content/themes/evalue/images/navbar/AboutSel.jpg" /></p>
                </a></li>
			                <li  ><a href="https://www.evalueresearch.co.nz/wordpress/Resources">
                <p><img src="https://www.evalueresearch.co.nz/wordpress/wp-content/themes/evalue/images/navbar/Resources.jpg" /></p>
                <p><img src="https://www.evalueresearch.co.nz/wordpress/wp-content/themes/evalue/images/navbar/ResourcesSel.jpg" /></p>

                </a></li>
			                <li  ><a href="https://www.evalueresearch.co.nz/wordpress/Fieldnotes">
                <p><img src="https://www.evalueresearch.co.nz/wordpress/wp-content/themes/evalue/images/navbar/Fieldnotes.jpg" /></p>
                <p><img src="https://www.evalueresearch.co.nz/wordpress/wp-content/themes/evalue/images/navbar/FieldnotesSel.jpg" /></p>
                </a></li>
			</ul>
		</div>

CSS:

#nav {
	float:left;
	height:29px;
	width:100%;
	overflow:hidden;
        background:url(images/navbar/background.jpg);
	margin-bottom:8px;
}
ul.style {
         list-style:none;
}
#nav li.at {
	margin-top:-29px;
}
#nav li:hover {
	margin-top:-29px;
}
#nav li {
	float:left;
}
#nav p {
	margin:0px;
	padding:0px;
}