change image in another frame

R

Robert

Hi,
I'm trying to make a slide show, with two frames: on the left frame small
thumbnails, and on the right frame the big sized image. Of course when the
user clicks on a thumbnail in the left frame, this image should be shown in
the right frame.

As I have a large number of pictures I don't want to have a separate page
for each picture, and use javascript instead.

I would like to use this in the left frame (see full code below):
parent.right_frame.big_image.src=N.jpg

My question:
I wonder if this is widely supported.

TIA.

******
The code: three pages: the frameset, the left frame and the right frame.

The frameset:
<html>
<head><title>...</title></head>
<frameset cols="25%,75%">
<frame src="thumbs.htm" name="left_frame">
<frame src="diapo.htm" name="right_frame">
</frameset>
</html>


The left frame (thumbs.htm):
<html><head>
<script language="javascript">
function change_img(N){ parent.right_frame.big_image.src=N + ".jpg"; }
</script>
</head>
<body>
<a href="javascript:change_img(1);"><img src="1s.jpg"></a>
<br>
<a href="javascript:change_img(2);"><img src="2s.jpg"></a>
....
</body>
</html>

The right frame (diapo.htm):
<html><head></head>
<body>
<img id="big_image" src="1.jpg">
</body>
</html>
 
R

Robert

Help, I've tried my page with another browser, and it doesn't work.
So is there in Javascript a safe and reliable way to do what I want: that
when the user clicks on a thumbnail in one frame, an image is changed in
another frame?

Thanks.
 
R

Robert

I'd very much like to hear some advice on this: how to change an image in
one frame when there is an event in another frame...
Thanks.
 
R

Robert

Robert said:
I'd very much like to hear some advice on this: how to change an image in
one frame when there is an event in another frame...
Thanks.
Click to expand...


Here is the segment of code you are looking for:
top.frames["right_frame"].document.images["big_image"].src=



I have coded up an example using some images from NASA. I used a
function to avaid having to type the names more than once and to avoid
typing the full name.

Many people in this forum perfer to use this coding for the anchor and
image tags:
<a href="L.jpg">
<img src="T.jpg"
onclick='return change_img("L.jpg");'>
</a>

You will notice if for some reason the viewer doesn't have javascript
enabled, the viewer will still get the larger image loaded in the left
frame.

I created a separate variable data so I could debug with an alert
statement. I removed the alert statements. The \n insert a newline in
the text. This is for debugging too.

The loading of the NASA logo in the right frame is because Netscape
lets the old image up until the complete new image is loaded. When
this delay happened, I thought my code wasn't working. Putting up the
logo gets rid of the old image.

I tried this on MacOS 10.2.6 with Netscape 7.2, IE 5.2, and Safari
1.0.

Robert

frames.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head><title>Solor System Objects</title></head>
<frameset cols="25%,75%">
<frame src="thumbs.html" name="left_frame">
<frame src="diapo.html" name="right_frame">
</frameset>
</html>


thumbs.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Swap images</title>
<script type="text/javascript">
var nasaPath = "http://spaceplace.nasa.gov" +
"/en/educators/images/solarsystem/";

function genImage(link)
{
var data = "<a href='" + nasaPath + link + "_L.jpg'>\n" +
"<img src='" + nasaPath + link + "_T.jpg'\n" +
"onclick='return change_img(\"" +
nasaPath + link + "_L.jpg\");'>\n" +
"<\/a>";
document.writeln(data);
document.writeln("<br>");
}

function change_img(name)
{
top.frames["right_frame"].document.images["big_image"].src=
"http://spaceplace.jpl.nasa.gov" +
"/en/_images/common/nasa_header/logo_nasa.gif";

top.frames["right_frame"].document.images["big_image"].src=
name;
return false;
}
</script>
</head>
<body>
<script type="text/javascript">
genImage("Apollo17_Earth");
genImage("clem_full_moon");
genImage("giotto_halley");
</script>
<br><br>
....
</body>
</html>



diapo.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Solor Object</title>
</head>
<body>
<img id="big_image"
src=
"http://spaceplace.jpl.nasa.gov/en/_images/common/nasa_header/logo_nasa.gif"<p>These image are from NASA. See:<br>
http://spaceplace.jpl.nasa.gov/en/educators/teachers_ss_images.shtml
</p>
</body>
</html>
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Help with Visual Lightbox: Scripts 2
Image on header 2
Use one frame to change images in another frame. 7
Is it possible an iframe can overlapp another? 3
Put image over the top of another image on hover 3
Image upload not working in browser 4
Problems implementing a divided image in my code 0
Image not changing between "mute" & "un-mute" images. 5

Members online

Total: 58 (members: 3, guests: 55)
Robots: 453

Forum statistics

Threads
473,982
Messages
2,570,185
Members
46,736
Latest member
AdolphBig6

Latest Threads

Top