473,378 Members | 1,384 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,378 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 7012
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: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...
0
by: ryjfgjl | last post by:
In our work, we often need to import Excel data into databases (such as MySQL, SQL Server, Oracle) for data analysis and processing. Usually, we use database tools like Navicat or the Excel import...
0
by: taylorcarr | last post by:
A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
by: aa123db | last post by:
Variable and constants Use var or let for variables and const fror constants. Var foo ='bar'; Let foo ='bar';const baz ='bar'; Functions function $name$ ($parameters$) { } ...
0
by: ryjfgjl | last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
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...

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.