I am hoping that someone out there can help me. I spent the afternoon yesterday building a basic javascript slideshow with a preview pane for my web site, and the javascript code has been giving me fits!

I debugged and previewed the slideshow in IE and Mozilla/Netscape, and everything functioned properly.....until I launched the page live on the web! Basically, the preview pane will initially display my first thumbnail image, but as soon as I try and do anything on the page, that thumbnail disappears (and no thumbnails, including the first one, ever come back into view).

The page in question can be found at http://www.tonnhaus.com/portfolio/city_area.htm. The code for the page is attached to the bottom of this message. If anyone can help me figure this out, I would greatly appreciate it. Thanks!

Derek Tonn
tonnhaus design


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>City and Area Maps Portfolio at tonnhaus design</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<SCRIPT type="text/javascript" language="JavaScript">

/*Rollover effect on different image script-
By JavaScript Kit (http://javascriptkit.com)
Over 200+ free scripts here!
*/

function changeimage(towhat,url){
if (document.images){
document.images.targetimage.src=towhat.src
gotolink=url
}
}
function warp(){
window.location=gotolink
}

</script>
<SCRIPT type="text/javascript" language="JavaScript1.1">
<!--
var myimages=new Array()
var gotolink="#"

function preloadimages(){
for (i=0;i<preloadimages.arguments.length;i++){
myimages[i]=new Image()
myimages[i].src=preloadimages.arguments[i]
}
}
preloadimages("bancroft_map.gif","county_map.gif","ivytech.gif","macalester_area.gif","milwaukee_are a.gif", "mnhistory.gif", "mpls_skyway.gif", "nicollet_mall.gif", "rome_area.gif", "seattle_map.gif", "stpaul_hoods.gif", "stpaulmap.gif", "tc_marathon.gif")

function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}

if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];

for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
<style type="text/css">
<!--
.style1 {font-family: Arial, Helvetica, sans-serif, "Arial Narrow"}
.style2 {font-size: 12px}
.style3 {font-family: Arial, Helvetica, sans-serif, "Arial Narrow"; font-size: 12px; }
-->
</style>
</head>

<body onLoad="MM_preloadImages('../buttons/white_background/home_rollover.gif','../buttons/white_background/about_us_rollover.gif','../buttons/white_background/services_rollover.gif','../buttons/white_background/clients_rollover.gif','../buttons/white_background/portfolio_rollover.gif','../buttons/white_background/partners_rollover.gif','../buttons/white_background/forsale_rollover.gif','../buttons/white_background/contact_rollover.gif')">

<table border="0">

<tr>
<td rowspan="3" class="style2"><div align="left"><a href="http://www.tonnhaus.com" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Home','','../buttons/white_background/home_rollover.gif',1)"><img src="../buttons/white_background/home.gif" alt="www.tonnhaus.com" name="Home" width="97" height="45" border="0"></a>
</div>
<div align="left"><a href="../aboutus.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('AboutUs','','../buttons/white_background/about_us_rollover.gif',1)"><img src="../buttons/white_background/about_us.gif" alt="About tonnhaus design" name="AboutUs" width="118" height="45" border="0"></a></div>
<div align="left"><a href="../services.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Service','','../buttons/white_background/services_rollover.gif',1)"><img src="../buttons/white_background/services.gif" alt="Services" name="Service" width="117" height="45" border="0"></a></div>
<div align="left"><a href="../clients.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Clients','','../buttons/white_background/clients_rollover.gif',1)"><img src="../buttons/white_background/clients.gif" alt="Clientele" name="Clients" width="106" height="45" border="0"></a></div>
<div align="left"><a href="../portfolio.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('PortfolioItems','','../buttons/white_background/portfolio_rollover.gif',1)"><img src="../buttons/white_background/portfolio.gif" alt="Portfolio" name="PortfolioItems" width="115" height="45" border="0"></a></div>
<blockquote class="style3"><span class="style4"><a href="city_area.htm">City/Area Maps</a><br>
<a href="building.htm">Interior Diagrams</a><br>

<a href="campus.htm">Campus Maps</a><br>
- <a href="campus/2Dperspective.htm">2D Perspective</a><br>
- <a href="campus/3Dperspective.htm">3D Perspective</a><br>
<a href="web.htm">Web Development</a><br>
<a href="design.htm">Graphic Design</a><br>

<a href="photo.htm">Digital Photography</a><br>
<a href="presentations.htm">Presentations</a></span></blockquote>
<div align="left"><a href="../partners.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Partnerships','','../buttons/white_background/partners_rollover.gif',1)"><img src="../buttons/white_background/partners.gif" alt="Partnerships" name="Partnerships" width="116" height="45" border="0"></a></div>
<div align="left"><a href="../forsale.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('ItemsForSale','','../buttons/white_background/forsale_rollover.gif',1)"><img src="../buttons/white_background/forsale.gif" alt="Items For Sale" name="ItemsForSale" width="156" height="45" border="0"></a></div>
<div align="left"><a href="../contact.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Contact','','../buttons/white_background/contact_rollover.gif',1)"><img src="../buttons/white_background/contact.gif" alt="Contact Information" name="Contact" width="131" height="45" border="0"></a></div></td>
<th colspan="16" valign="top"><table width="550" border="0" align="left" cellpadding="0" cellspacing="0">
<tr valign="middle">
<th colspan="16" scope="row">

<div align="center"><span class="style3"></span>
<p align="left"><span class="style3">Please click on thumbnail images to view them in greater detail. <strong>BE FOREWARNED!</strong> Some of these images may take several seconds
to load, depending upon the speed of your internet connection.</span></p><br>
</div></th>
</tr>
<tr valign="middle">
<th width="97" scope="row"></th>
<th colspan="15" scope="row"><a href="javascript:warp()" class="style1 style2"><img src="bancroft_map.gif" alt="Preview Pane to View Thumbnail of Portfolio Graphics" name="targetimage" width="308" height="200" border=0></a></th>

</tr>
<tr valign="bottom">
<th colspan="16">&nbsp;</th>
</tr>
<tr valign="bottom">
<th><span class="style3">View Image</span></th>
<th width="38"><span class="style3">
<SCRIPT type="text/javascript" language="JavaScript">

//myimages[0] would refer to "bancroft_map.gif", myimages[1] would refer to "county_map.gif" etc
preloadimages("bancroft_map.gif","county_map.gif","ivytech.gif","macalester_area.gif","milwaukee_are a.gif", "mnhistory.gif", "mpls_skyway.gif", "nicollet_mall.gif", "rome_area.gif", "seattle_map.gif", "stpaul_hoods.gif", "stpaulmap.gif", "tc_marathon.gif")
</script>

<a href="../bancroft_map_big.gif" target="_blank" onMouseover="changeimage(myimages[0],this.href)"><img src="../images/01.gif" alt="Link to Land Use Map of the Bancroft Neighborhood in Minneapolis, Minnesota" border="0"></a></span></th>
<td width="29"><a href="../county_map_big.gif" target="_blank" class="style3" onMouseover="changeimage(myimages[1],this.href)"><img src="../images/02.gif" alt="Link to Map of Minnesota Counties" border="0"></a></td>
<td width="29"><a href="../ivytech_big.gif" target="_blank" class="style3" onMouseover="changeimage(myimages[2],this.href)"><img src="../images/03.gif" alt="Link to Area Map for Ivy Tech State College" border="0"></a></td>
<td width="29"><a href="../macalester_area_big.gif" target="_blank" class="style3" onMouseover="changeimage(myimages[3],this.href)"><img src="../images/04.gif" alt="Macalester College Area Attractions" border="0"></a></td>
<td width="29"><a href="../milwaukee_area_big.gif" target="_blank" class="style3" onMouseover="changeimage(myimages[4],this.href)"><img src="../images/05.gif" alt="Downtown Milwaukee (Wisconsin) Area Map" border="0"></a></td>
<td width="29"><a href="../mnhistory_big.gif" target="_blank" class="style3" onMouseover="changeimage(myimages[5],this.href)"><img src="../images/06.gif" alt="Area Map for the Minnesota History Center" border="0"></a></td>
<td width="29"><a href="../mpls_skyway_big.gif" target="_blank" class="style3" onMouseover="changeimage(myimages[6],this.href)"><img src="../images/07.gif" alt="Map of Downtown Minneapolis (Minnesota) Skyway System" border="0"></a></td>
<td width="29"><a href="../nicollet_mall_big.gif" target="_blank" class="style3" onMouseover="changeimage(myimages[7],this.href)"><img src="../images/08.gif" alt="Map of Nicollet Mall in Minneapolis, Minnesota" border="0"></a></td>
<td width="29"><a href="../rome_area_big.gif" target="_blank" class="style3" onMouseover="changeimage(myimages[8],this.href)"><img src="../images/09.gif" alt="Map of Central Corridor of Rome, Italy" border="0"></a></td>

<td width="29"><a href="../seattle_map_big.gif" target="_blank" class="style3" onMouseover="changeimage(myimages[9],this.href)"><img src="../images/10.gif" alt="Downtown Seattle (Washington) Area Map" border="0"></a></td>
<td width="29"><a href="../stpaul_hoods_big.gif" target="_blank" class="style3" onMouseover="changeimage(myimages[10],this.href)"><img src="../images/11.gif" alt="Map of Saint Paul (Minnesota) Neighborhoods" border="0"></a></td>
<td width="29"><a href="../stpaulmap_big.gif" target="_blank" class="style3" onMouseover="changeimage(myimages[11],this.href)"><img src="../images/12.gif" alt="Map of Downtown Saint Paul (Minnesota)" border="0"></a></td>
<td width="29"><a href="../tc_marathon_big.gif" target="_blank" class="style3" onMouseover="changeimage(myimages[12],this.href)"><img src="../images/13.gif" alt="Twin Cites Marathon 5K Race Map" border="0"></a></td>
<td width="29"><img src="../images/14alt.gif" alt="" width="20" height="20" border="0"></td>
<td width="38"><img src="../images/15alt.gif" alt="" width="20" height="20" border="0"></td>
</tr>
<tr valign="bottom">
<th><span class="style3">.pdf Available? </span></th>

<th></th>
<td></td>
<td><a href="../ivytech.pdf" target="_blank" class="style3" onMouseover="changeimage(myimages[2],this.href)"><img src="../images/yes.gif" alt="Download .pdf Copy of Ivy Tech State College Area Map" border="0"></a></td>
<td><a href="../macalester_area.pdf" target="_blank" class="style3" onMouseover="changeimage(myimages[3],this.href)"><img src="../images/yes.gif" alt="Download .pdf Copy of Macalester College Area Map" border="0"></a></td>
<td><a href="../milwaukee_area.pdf" target="_blank" class="style3" onMouseover="changeimage(myimages[4],this.href)"><img src="../images/yes.gif" alt="Download .pdf Copy of Downtown Milwaukee (Wisconsin) Area Map" border="0"></a></td>
<td><a href="../mnhistory.pdf" target="_blank" class="style3" onMouseover="changeimage(myimages[5],this.href)"><img src="../images/yes.gif" alt="Download .pdf Copy of Minnesota History Center Area Map" border="0"></a></td>
<td><a href="../mpls_skyway.pdf" target="_blank" class="style3" onMouseover="changeimage(myimages[6],this.href)"><img src="../images/yes.gif" alt="Download .pdf Copy of Minneapolis (Minnesota) Skyway System" border="0"></a></td>
<td><a href="../nicollet_mall.pdf" target="_blank" class="style3" onMouseover="changeimage(myimages[7],this.href)"><img src="../images/yes.gif" alt="Download .pdf Copy of Nicollet Mall (Minneapolis, Minnesota) Area Map" border="0"></a></td>
<td></td>

<td><a href="../seattle_map.pdf" target="_blank" class="style3" onMouseover="changeimage(myimages[9],this.href)"><img src="../images/yes.gif" alt="Download .pdf Copy of Downtown Seattle (Washington) Area Map" border="0"></a></td>
<td></td>
<td></td>
<td><a href="../tc_marathon.pdf" target="_blank" class="style3" onMouseover="changeimage(myimages[12],this.href)"><img src="../images/yes.gif" alt="Download .pdf Copy of Twin Cities Marathon 5K Race Map" border="0"></a></td>
<td></td>
<td></td>
</tr>
</table> </th>

</tr>
<tr>
<th colspan="16" valign="top"></th>
</tr>
<tr>
<th colspan="16"></th>
</tr>
</table>
<br>
</body>

</html>