JavaScript - Nearly There. Why Can I Not Change The Initial Picture From The Menu?

<link rel="apple-touch-icon" href="/customIcon.png"/>

   <script type="text/javascript"> 
function changeWalls(what, whatimg) 
{ 
if(what != "none")
{
document.images[whatimg].src = what;
}
} 
      </script>
      <select name="Walls" onchange="changeWalls(this.value,'walls')">
        <option value="images/white.gif" selected="selected">Please Select a Colour</option>
        <option value="images/WALLCC.png">Classic Cream</option>
        <option value="images/WALLSG.png">Shale Grey</option>
        <option value="images/WALLDO.png">Deep Ocean</option>
        <option value="images/WALLSM.png">Surfmist</option>
      </select>

<img src="images/front_0002_front-wall-colour.png" alt="" name="walls" border="0" id="walls2" />

function insertImageMargin()
{
	var marg = getImageMargin();
	document.getElementById("comic").style.marginLeft = marg + "px";
}
	

function getImageMargin()
{
	var com = document.getElementById("comic");
	return 440 - com.width / 2;
}

<script type="text/javascript"><!--//--><![CDATA[//><!--
startList = function() {
	if (document.all&&document.getElementById) {
		navRoot = document.getElementById("nav");
		for (i=0; i<navRoot.childNodes.length; i++) {
			node = navRoot.childNodes[i];
			if (node.nodeName=="LI") {
				node.onmouseover=function() {
					this.className+=" over";
				}
				node.onmouseout=function() {
					this.className=this.className.replace(" over", "");
				}
			}
		}
	}
}
window.onload=startList;

//--><!]]></script>

<div id="menuPadding">
	<div id="menu">
<ul id="nav">
<li id="m1"><a href="">HOME</a></li>
<li id="m2">ABOUT US 					       
<ul>
<li><a href="">Our Values</a></li>
<li><a href="">Facilities</a></li>
<li><a href="">Arena</a></li>
<li><a href="">Jobs</a></li>
</ul>
</li>
<li id="m3">SUCCESS 					       
<ul>
<li><a href="">Jobs</a></li>
<li><a href="">Results</a></li>
<li><a href="">Awards</a></li>
<li><a href="">Testimonials</a></li>
</ul>
</li>
</div>
</div>

#menu {
	margin-top: 16px;
	width: 879px;
	height: 30px;
	z-index: 1000;
	font-family: Verdana, Geneva, sans-serif;
	font-size:11px;
	font-weight:bold;
}

#menuPadding {
	margin: 0px 0px 0px 0px;
	padding: 10px 0px 10px 0px;
	text-align:center;
	z-index: 1000;
}

#menuPadding ul {
	height: 29px;
	margin: 0px 0px 0px 0px;
	padding: 5px 0px 5px 0px;
z-index: 1000;
}

#menuPadding ul li {
/*	display: inline;*/
	line-height: 29px;
	padding:0px;
	margin-left:1px;
	display:block;
	float:left;
	font-weight:bold;
	color:#fff;
z-index: 1000;
}

#menuPadding ul li a {
	text-align:center;
z-index: 1000;
}

#menuPadding ul li li {
	padding:0px;
	margin:0px;
z-index: 1000;
}

#menuPadding ul li li a {
	text-align:left;
	padding-left:14px;
	text-transform:uppercase;
z-index: 1000;
	font-size:90%;
}

#menuPadding ul li li a.notupper {
	text-transform:none;
z-index: 1000;
}

/* coloured menus */
#menuPadding ul li#m1 {
	background:#FF0000;
	width:96px;
z-index: 1000;
}

#menuPadding ul li#m1 li {
	background:#FF0000;
	width:146px;
z-index: 1000;
}

#menuPadding ul li#m2 {
	background:#0099CC;
	width:96px;
z-index: 1000;
}

#menuPadding ul li#m2 li {
	background:#0099CC;
	width:166px;
z-index: 1000;
}

#menuPadding ul li#m2 li a {
	width:166px;
z-index: 1000;
}

#menuPadding ul li#m3 {
	background:#999999;
	width:97px;
z-index: 1000;
}

#menuPadding ul li#m3 li {
	background:#999999;
	width:176px;
z-index: 1000;
}

#menuPadding ul li#m3 li a {
	width:176px;
z-index: 1000;
}

#menuPadding ul li#m4 {
	background:#9966CC;
	width:96px;
z-index: 1000;
}

#menuPadding ul li#m4 li {
	background:#9966CC;
	width:156px;
z-index: 1000;
}

#menuPadding ul li#m4 li a {
	width:156px;
z-index: 1000;
}

#menuPadding ul li#m5 {
	background:#AAC619;
	width:96px;
z-index: 1000;
}

#menuPadding ul li#m5 li {
	background:#AAC619;
	width:230px;
	padding-right:20px;
z-index: 1000;
}

#menuPadding ul li#m5 li a {
	width:230px;
z-index: 1000;
}

#menuPadding ul li#m6 {
	background:#FF9900;
	width:97px;
z-index: 1000;
}

#menuPadding ul li#m6 li {
	background:#FF9900;
	width:146px;
z-index: 1000;
}

#menuPadding ul li#m7 {
	background:#FF0099;
	width:97px;
z-index: 1000;
}

#menuPadding ul li#m7 li {
	background:#FF0099;
	width:216px;
	color:#fff;
z-index: 1000;
}

#menuPadding ul li#m7 li a {
	width:216px;
	color:#fff;
z-index: 1000;
}

#menuPadding ul li#m7 li li {
	font-size:87%;
z-index: 1000;
}

#menu li ul ul { /* third-and-above-level lists */
	margin: -30px 0 0 216px;
z-index: 1000;
}

#menu li:hover ul ul, #menu li.sfhover ul ul {
	left: -999em;
z-index: 1000;
}

#menu li:hover ul, #menu li li:hover ul, #menu li.sfhover ul, #menu li li.sfhover ul { /* lists nested under hovered list items */
	left: auto;
z-index: 1000;
}

#menuPadding ul li#m8 {
	background:#660099;
	width:97px;
z-index: 1000;
}

#menuPadding ul li#m8 li {
	background:#660099;
	width:146px;
z-index: 1000;
}

#menuPadding ul li#m9 {
	background:#A80017;
	width:97px;
z-index: 1000;
}

#menuPadding ul li#m9 li {
	background:#A80017;
	width:146px;
z-index: 1000;
}

#menuPadding ul li a:link,#menuPadding ul li a:active,#menuPadding ul li a:visited {
	color:#fff;
z-index: 1000;
}

#menuPadding ul li a:hover {
	color:#000;
z-index: 1000;
}

/* suckerfish */
#menu, #menu ul { /* all lists */
	padding: 0;
	margin: 0;
	list-style: none;
	line-height: 1;color:#fff;
}

#menu a {
	display: block;
	width: 96px;
}

#menu li { /* all list items */
	float: left;
	width: 96px; /* width needed or else Opera goes nuts */
	border-top:1px solid #fff;
}

#menu li ul { /* second-level lists */
	position: absolute;
	background: orange;
	width: 106px;
	left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
	font-size:90%;
}

#menu li ul ul { /* third-and-above-level lists */
/*	margin: -1em 0 0 96px;*/
	font-size:110%;	
}

#menu li li { 
	font-size:100%;
	color:#fff;
}


#menu li:hover ul ul, #menu li.sfhover ul ul {
	left: -999em;
}

#menu li:hover ul, #menu li li:hover ul, #menu li.sfhover ul, #menu li li.sfhover ul { /* lists nested under hovered list items */
	left: auto;
}

<SCRIPT language="javascript" type="text/javascript">
<!--
function setZoom(img, dir, width, height, margin, zIndex, delay, position)
    {
    window.setTimeout(function(){
        if (img.dir==dir){
            img.style.width    = width;
            img.style.height   = height;
            img.style.margin   = margin;
            img.style.zIndex   = zIndex;
        }
    }, delay);
}

function imgLarger(img) {
    img.dir = "rtl";
    img.style.position = "absolute";

    var width  = 200;
    var height = 150;
    var now    = parseInt(img.style.zIndex);
        if (img.style.left=="" && bChrome==false){
            img.style.left = img.offsetLeft - 50;
            img.style.top  = img.offsetTop;
        }
        if (isNaN(now)) { now=0; }
        for (i=now+1; i<=10; i++) {
            var w = (width * (10+i))/20 + "px";
            var h = (height* (10+i))/20 + "px";
            var m = (-i) + "px 0 0 " + (-width*i/40) + "px";

            setZoom(img, "rtl", w, h, m, i, 20*(i-now));
        }
}

function imgSmaller(img) {
    img.dir = "ltr";
    img.style.position = "absolute";

    var width  = 200;
    var height = 150;
    var now    = parseInt(img.style.zIndex);
        if (isNaN(now)) { now=0; }
        for (i=now-1; i>=0; i--) {
            var w = (width * (10+i))/20 + "px";
            var h = (height* (10+i))/20 + "px";
            var m = (-i) + "px 0 0 " + (-width*i/40) + "px";

            setZoom(img, "ltr", w, h, m, i, 20*(now-i));
        }
}

function openImage(imagePath){
    //Shadow
    var oFade = getObject("DIV", "lightbox_fade");
        oFade.style.display = "block";
        oFade.style.height  = document.body.scrollHeight;

    //Embed it
    var oContent = getObject("DIV", "lightbox_content");
        oContent.style.width   = 512;
        oContent.style.height  = 384;
        oContent.style.top     = (screen.height-384)/2 + (document.body.scrollTop - 100);
        oContent.style.left    = (screen.width -512)/2;
        oContent.style.display = "block";

        oContent.innerHTML = "<CENTER><IMG src=" + imagePath + "></CENTER>";
}

function closeImage(){
    //Shadow
    var oFade = getObject("DIV", "lightbox_fade");
        oFade.style.display = "none";

    //Embed it
    var oContent = getObject("DIV", "lightbox_content");
        oContent.style.display = "none";
}
// -->
</SCRIPT>

<DIV id="lightbox_fade" class="overlay" onClick="JavaScript:closeImage();"></DIV>
<DIV id="lightbox_content" class="content" onClick="JavaScript:closeImage();"></DIV>

<a href="JavaScript:openImage('picture/large.png');">
<IMG src="picture/small.png" alt="" width="212" height="157" border="0" onmouseover="JavaScript:imgLarger(this)" onmouseout="JavaScript:imgSmaller(this);"></a>

<a onclick="javascript:previousEvent();">
                        <input type="image" name="previous" src="images/SiteCollectionImages/MiniEvents/btn_Previous.gif" alt="Previous Event" title="Previous Event"/></a>
                        <a onclick="javascript:nextEvent();">
                        <input type="image" name="next" src="images/SiteCollectionImages/MiniEvents/btn_Next.gif" alt="Next Event" title="Next Event"/></a>

function nextEvent(i) {
        if (index == maxIndex || index >= maxIndex) {
            //disable next button
            tempObj = document.getElementsByName("next");
            tempObj.visible = false;
        }
        else {
        index = index + 1;
        eventSelected(rawDates[index]);

        }

<HTML>

<HEAD>
<TITLE>Cyrus</TITLE>
</HEAD>

<BODY BGCOLOR=black>

<div align="center">
<table border="0"; cellspacing="0"; cellpadding="0">
   <tr>
      <td><img src="http://i732.photobucket.com/albums/ww329/Chrishick/pageheadername.png"; width=900px; hieght=160px;></td>
   </tr>
   <tr>
      <td><img src="http://i732.photobucket.com/albums/ww329/Chrishick/navbar.png" width=900px; border="none" usemap="#navbar"></td>
   </tr>
   
   <tr>
  
      <td> <br>
   <br>
<table border="0"; width=900px>
   <tr>
      <td>
<div align="left"><img src="http://i732.photobucket.com/albums/ww329/Chrishick/appearance-2.png"; width=466px; hieght=320px></div>
</td>
      <td>
      <div align="right"><img src="http://i732.photobucket.com/albums/ww329/Chrishick/equipment.png">
<br><br>
<img src="http://i732.photobucket.com/albums/ww329/Chrishick/personality.png">
</div>
</td>
   </tr>
</table>
</td>
   </tr>
   <tr>
   <td></td>
   </tr>
   <tr>
      <td>
<div align="center"><img src="http://i732.photobucket.com/albums/ww329/Chrishick/brought.png"></div></td>
   </tr>
</table>
</div>

<map name="navbar">
    <area shape="rect" coords="247,185,445,220" href="http://www.roleplayandwritinghaven.com/forum.htm" alt="Forum" />
</map>
</BODY>

</HTML>

<script type="text/javascript">
// Modified for: http://codingforums.com/showthread.php?p=949514#post949514
//			and: http://www.codingforums.com/showthread.php?t=195033

var ImgPtr = -1;	// -1 for first pass only

var BaseDirectory = 'http://s200.photobucket.com/albums/aa216/Jilldear/';
ImgArray = [	// format: ['imageName','Comments about image']
  ['pinto-1.jpg',
   '<a href="paintorpinto.html" class="duh">Paint or Pinto?</a><br /><br /><class="duh">A free report from The Horse Resource answering the common questions about Pintos and Paints.<i>Written by Cassidy Deardorff for The Horse Resource.</i></div>'],
  ['shedding.jpg',
   '<a class="duh" href="sheddingout.html">Shedding Out Tips</a><br /><br /><class="duh">Six tips to help get the winter hair off your horse faster.  <i>Written by Cassidy Deardorff.</i>'],
  ['dewormer-1.jpg',
   '<a class="duh" href="sampledchart.html">Sample Deworming Chart</a><br /><br /><class="duh">Use this sample deworming chart to make sure your horses are getting treated for internal parasites properly.  <i>Written by Cassidy Deardorff.</i>']
// Note: No comma after last entry
];

var intervalAction;

function ShowSlide(slide_num) {
  document.getElementById('mypic').src = BaseDirectory+ImgArray[slide_num][0];
  document.getElementById('mypic').alt = ImgArray[slide_num][1];
  document.getElementById('Caption').innerHTML = ImgArray[slide_num][1];
}

function slideshow() {
  ImgPtr++;
  ImgPtr = ImgPtr % ImgArray.length;
//  document.getElementById('tst').innerHTML = 'Showing: '+ImgPtr;
  ShowSlide(ImgPtr);
}
onload = function() {
  slideshow();
  intervalAction = setInterval("slideshow()",5000);
}
</script>

<div style="height:300px;width:398px;">
<div id="divCaption">
<div style="position:absolute; z-index:30; left:-999;" id="Caption"> </div>
<img src="" alt="" border="1" id="mypic" name="mypic" alt="" height="300" width="398">
</div><br />
</div>