Untitled Document

http://www.webmonkey.com/webmonkey/98/03/index3a_page10.html?tw=programming

As we've seen, an image swap can be performed with a line like this:

window.document.the_image.src="button_d.gif";

This works by telling JavaScript to look at a window, find its document, and then find the thing called the_image inside that document. Once JavaScript locates the image, it can change its src to whatever GIF we want.

Sometimes it's useful to have a link in one window change an image in another window. Imagine a slide show in which one window displays the images and another little window contains thumbnails of each slide show image. Clicking on a thumbnail in the little window changes the image in the big window. To give you an idea of what I'm talking about, here's an example of a remote slide show control.

There are two windows in this example: the remote control window, and the slide show display window. Clicking on the link above opens the remote control. The remote control then automatically opens the display window by using this line between the <head> tags:

var display_window = window.open("slide_show_main.html","display_window");

This opens a new window and assigns the variable display_window to that window. So now whenever we want to use JavaScript to refer to that window, we use the variable display_window.

When the display window opens, there's a chance it'll open right on top of the remote. To ensure that the remote stays visible, we add this line, which executes after the display window opens:

window.focus();

Now that we've opened both the display window and the remote, we have to figure out how to make the links in the remote window change the image in the display window. If you view source on the display window, you'll see that it's very simple: It contains just one image, which I've named main_image:

<img src="sky.gif" name="main_image" height="400" width="400">

To have a link in the remote window change the image in the display window, we have to tell JavaScript to look at the display window (which we do with the display_window variable we assigned earlier), find its document, and locate the image called main_image inside that document. In JavaScriptese:

display_window.document.main_image

And here's how you change the src of that image from the remote window:

display_window.document.main_image.src = 'sun.gif';

If you view source on the remote, you'll see that I've stuck the above line into a link, like so:

<a href="#" onClick= "display_window.document.main_image.src='sky.gif';return false;"><img src="sky.gif"></a>