473,396 Members | 2,111 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,396 software developers and data experts.

change image in another frame

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
3 7016
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
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
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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

0
by: Bob | last post by:
My understanding of the image string function is this, that it allows the display of text in Graphics As per the parameters it receives: ImageString($image,6,$xpos,$ypos,$out,$col) these...
5
by: Roger Shrubber | last post by:
I have a page with images that the user can drag from one frame to another. I need them to see a "ghost image" of the image they are dragging, while the original stays put. I use the onmousemove...
1
by: Rob Parker | last post by:
I posted this with a different subject line (in two posts - I added additional info in the second) in this newsgroup a few days ago, but haven't had a single response. Hopefully, that was because...
2
by: Sanjeeva Reddy | last post by:
hai Anti Keskinen, i have used the following code MyListView->LargeImageList->ImageSize = gcnew System::Drawing::Size(100, 100); // Sets large image size to 100, 100 here i am getting error...
3
by: gujarsachin2001 | last post by:
Hello friends can any body tell me how to redact image in web application. thanks, Sachin.
1
by: pappu | last post by:
Well i have number of images in my application which contains some document in it so i just want to mark some part of document in tht image which i think not of any use or i want to hide tht . so...
0
by: adubra | last post by:
Hi there, I am using a device context (DC) and a buffer to successfully draw to screen. However, when I update the DC at very high frame rate and drag the frame containing the image very quickly...
0
by: Andrew | last post by:
Hello Ive been messing around with a simple raw image viewer using Pil and Tkinter However I am running into problems displaying the images they appear to be not correct I believe it is cause of...
7
by: Leoa | last post by:
Hi All, I'm having a hard time figuring out the DOM syntax to get one frame that has thumnails of images to display at full size in another frame (onmouseover). I looked at a couple...
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
0
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
0
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
0
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
0
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...
0
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.