473,837 Members | 1,701 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

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_fr ame.big_image.s rc=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_fram e">
<frame src="diapo.htm" name="right_fra me">
</frameset>
</html>
The left frame (thumbs.htm):
<html><head>
<script language="javas cript">
function change_img(N){ parent.right_fr ame.big_image.s rc=N + ".jpg"; }
</script>
</head>
<body>
<a href="javascrip t:change_img(1) ;"><img src="1s.jpg"></a>
<br>
<a href="javascrip t: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 7082
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.c om> 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_fram e"].document.image s["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.j pg");'>
</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>So lor System Objects</title></head>
<frameset cols="25%,75%">
<frame src="thumbs.htm l" name="left_fram e">
<frame src="diapo.html " name="right_fra me">
</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='retur n change_img(\"" +
nasaPath + link + "_L.jpg\");'>\n " +
"<\/a>";
document.writel n(data);
document.writel n("<br>");
}

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

top.frames["right_fram e"].document.image s["big_image"].src=
name;
return false;
}
</script>
</head>
<body>
<script type="text/javascript">
genImage("Apoll o17_Earth");
genImage("clem_ full_moon");
genImage("giott o_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
2007
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 params: 1. name of thew image to write on 2. size of the font 3. X co-ordinate of the first letter of the string
5
3050
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 event to keep the ghost image under the mouse pointer. There are three problems: (1) if the ghost image is dragged so it is partially off the edge of the screen, scrollbars appear. This not only looks bad, it can cause the page to autoscroll...
1
1779
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 I posted at the weekend, and the experts were all having a well-earned rest and missed it first time around. I'm hoping someone here can help - I've had no joy in other avenues. Now to the problem: Using Access 2002: I have downloaded a...
2
8539
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 like "gcnew is undeclared error",how to deeclare 'gcnew" and when i am using in runtime to change the size of images in imagelist in listview control in .net(forms application) by chnging one trckbar(like tb1->Value),
3
3379
by: gujarsachin2001 | last post by:
Hello friends can any body tell me how to redact image in web application. thanks, Sachin.
1
1337
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 i want to mark tht area or i want to do black out tht area after tht i wann save tht iamge with tht changes. and i musing simply two frames & niothing else one frame contains links for tht image so on clicking on tht frame i m showing tht image...
0
2475
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 over the screen or I drag another window on top of the fast display, I get errors (Pyassertion ....). I believe those are related to a conflict between the thread that is updating the buffer (over which I have control) and the thread that is doing the...
0
2365
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 the modes for the different files but I am unsure If someone could examine my code and assist in helping me solve my problem(s)
7
3007
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 tutorials and have come up with the broken script below. Please Help.- ------------------------------------------
0
9846
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, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
9685
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 effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
0
10886
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
0
10277
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 protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
1
7817
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
7007
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
0
5853
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
2
4052
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
3
3126
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

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.