Question

I’m trying to update an image in a parent window with clickable links in a child window. I’ve preloaded the images in the parent window with one javascript file. “scriptss.js”
My problem is I need to access the preloaded images of the parent window with the childscript “scriptremote.js” Thanks again for all the JS Help!
The JS (scriptss.js)

var newWindow = null;
window.onload = init;
var i = 0;
image_object = new Image();
myImages = new Array(); // declare array
myImages[0]="images/img1.jpg"  // load array
myImages[1]="images/img2.jpg" 
myImages[2]="images/img3.jpg"     
myImages[3]="images/img4.jpg"
myImages[4]="images/img5.jpg"
myImages[5]="images/img6.jpg"

Here’s the HTML for parent window:

<img src="" width="200px" height="200px" id="myimage" name="myimage" /></img>

Here’s the JS for child window:

window.onload = init;

function init()
{
}

function first_image()
{
window.parent.image_object.src = myImages[3]; //Problem happens here I think
document.getElementById("myimage")window.parent.src = window.parent.image_object.src;

}

The HTML Child Window

<h1>My Remote</h1>
<a href="#" id="first" onclick="first_image()" >First Image</a>
</br>

Answer 1

In your parent window you are not actually pre-loading your images. To preload you should do something like this

myImages = new Array(); // declare array
myImages[0] = new Image()
myImages[0].src = "images/img1.jpg"
//etc...

Now you have an array of Image objects.

From your child window (I’m assuming an iframe?) you can reference those objects and assign the src attribute to your image in the parents DOM like this

window.parent.document.getElementById('myImage').src = window.parent.myImages[n].src;
// where n is the index of the image you want to display

If your child window is a popup then replace parent with opener
Also you don’t need a closing tag for <img />, it’s self closing