By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,654 Members | 1,422 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,654 IT Pros & Developers. It's quick & easy.

change image in another frame

P: n/a
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>

--
Rob
Jul 23 '05 #1
Share this Question
Share on Google+
3 Replies


P: n/a
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.
--
Rob
Jul 23 '05 #2

P: n/a
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.

--
Rob
Jul 23 '05 #3

P: n/a
Robert <no****@yahoo.com> wrote in message news:<41*********************@news.skynet.be>...
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.

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/ed...s_images.shtml
</p>
</body>
</html>
Jul 23 '05 #4

This discussion thread is closed

Replies have been disabled for this discussion.