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 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
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
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> This thread has been closed and replies have been disabled. Please start a new discussion. Similar topics
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...
|
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...
|
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...
|
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...
|
by: gujarsachin2001 |
last post by:
Hello friends can any body tell me how to redact image in web
application.
thanks,
Sachin.
|
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...
|
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...
|
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...
|
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...
|
by: Charles Arthur |
last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
|
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...
|
by: nemocccc |
last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
|
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: 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,...
|
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...
|
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...
|
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...
|
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,...
| |