Using array element in child window to change image in parent window with getElementById
<p>So I'm trying to complete some javascript and having trouble codeing links  to update a image. In a parent window using my script I open a remote child window to operate the image. THe links on the child window open the first image and last image. Two more links control the "next" image and previous image.</p>

<p>Heres what I have so far</p>

<p>HTML PARENT WINDOW : (haven't figured out how to post html on here btw :(  )</p>

<pre><code>&lt;html&gt;
    &lt;head&gt;
    &lt;title&gt; &lt;/title&gt;
    &lt;script type="text/javascript" src="scriptss.js"&gt;
    &lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
    &lt;img src="images/img0.jpg" width="200px" height="200px" id="myImage"        name="myImage" /&gt;&lt;/img&gt;
    &lt;h1&gt;XXX&lt;/h1&gt;
    &lt;a href="#"  id = "opens" &gt;open&lt;/a&gt;
    &lt;/br&gt;
    &lt;a href="#" id="closes"&gt;close&lt;/a&gt;
    &lt;/br&gt;
    &lt;/body&gt;
    &lt;html&gt;
</code></pre>

<p>Child Window HTML:</p>

<pre><code>&lt;html&gt;
&lt;head&gt;
    &lt;title&gt; Matt Beckley Assignment Remote&lt;/title&gt;
    &lt;link rel="stylesheet" type="text/css" href="remote.css" /&gt;
&lt;script type="text/javascript" src="scriptss.js"&gt;
&lt;/script&gt;
&lt;/head&gt;
     &lt;body&gt;
     &lt;h1&gt;My Remote&lt;/h1&gt;
     &lt;a href="#" id="first" onclick="first()"&gt;First Image&lt;/a&gt;
     &lt;/br&gt;
     &lt;a href="#" id="next"&gt;Next Image&lt;/a&gt;
     &lt;/br&gt;
     &lt;a href="#" id="previous"&gt;Previous Image&lt;/a&gt;
     &lt;/br&gt;
     &lt;a href="#" id="last"&gt;Last Image&lt;/a&gt;
     &lt;/br&gt;
     &lt;a href="#" id="closess"&gt;close&lt;/a&gt;
     &lt;/body&gt;
  &lt;/html&gt;
</code></pre>

<p>JAVASCRIPT child node </p>

<pre><code>  var newWindow = null;
  window.onload = init;
  var myImages = new Array();

  //start loop - length depends on how many images you need to preload
  for (var i=0; i&lt;5; i++) {
    //create new image object
    var tempImage = new Image();
    //assign name|path of image to src property of image object
    tempImage.src = "img" + (i+1) + ".jpg";
    }


function init()
{
for(var i=0; i&lt;document.links.length; i++)
{
document.links[i].onclick = changeWindowState;
}

}

function windowOpen(){
if(newWindow &amp;&amp; !newWindow.closed){
    return true;
}
return false;
}


function changeWindowState()
{
if (this.id =="closes")
{
    if(windowOpen())
    {
        newWindow.close();
    }
    else
    {
        alert("The window isn't open");
    }
}
if (this.id =="closess")
{
    if(windowOpen())
    {
        remotetest.html.close();
    }
    else
    {
        alert("The window isn't open");
    }
}
if(this.id == "opens")
{
    if(windowOpen())
    {
        alert("The Window is alreadyopen!");
    }
    else
    {
    newWindow = window.open ("remotetest.html","remoteWin","resizeable=no,width=200,height=200");
    }
}
return false;
}



function first()
{
if(this.id == "first")
{
alert("box");
}
else(this.id == "first") 

{
alert("box");

}
}
</code></pre>

<p>Anyways I'm preloading my images and I got that figured out correctly. I'm trying to access my element in the parent node in the image tag and display an array element 1-6. In other words image 1 thru image 6
THe idea is to press a button in the child node and display the first image element[0] for instand press another button element[5]
or press another button for next element[i+1] with an another button. THanks for the help.</p>
