Using array element in child window to change image in parent window with getElementById

Question

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.

Heres what I have so far

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

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

Child Window HTML:

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

JAVASCRIPT child node

  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<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<document.links.length; i++)
{
document.links[i].onclick = changeWindowState;
}

}

function windowOpen(){
if(newWindow && !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");

}
}

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.

Answer 1

There are quite some ways on how to communicate between parent and child window. See this for more info.

Using array element in child window to change image in parent window with getElementById

Question

1 answers

solution1
0 ACCPTED 2010-02-08 05:21:29

Using array element in child window to change image in parent window with getElementById

Question

1 answers

solution1 0 ACCPTED 2010-02-08 05:21:29

solution1
0 ACCPTED 2010-02-08 05:21:29