473,325 Members | 2,792 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,325 software developers and data experts.

Use one frame to change images in another frame.

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.-

------------------------------------------
master_frame.html------------------------------

<html>
<head>
<title>Frames Set, Index with Bannere and Footer</title>
</head>
<frameset rows="64,*,64">
<frame name="top" scrolling="no" noresize src="top.html">
<frameset cols="150,*">
<frame name="index" src="index.html">
<frame name="main" src="main.html">
</frameset>
<frame name="bottom" scrolling="no" noresize src="bottom.html">
</frameset>
</html>
---------------------------------------------
index.html------------------------------------
//contains thumbnails
<html>
<head><titleEvent 1</title>

<script language="javascript" type="text/javascript">
<!-- hide script from old broswers

if (document.images)
{
image1= new Image;
image2= new Image;
image3= new Image;

image1.src="images/large/1.gif";
image2.src="images/large/2.gif";
image3.src="images/large/3.gif";

}
else{
image1="";
image2="";
image3="";
document.placeholder="";
}
//-->

</script>

</head>
<body>
<h2Event 1</h2>
<div class="content">
<img src="images/placeholder.gif" name="placeholder">

<a href="#"
onMouseover="parent.main.getElementByID('overimage ').src=image3.src"
onMouseout="document.placeholder.src=image3.src">< img src="images/
thumb/1t.gif"></a>

</body>
</html>

----------------------------------------
main.html-----------------------------------
//large image display

<html>

<body>
<img id="overimage">

</body>
</html>

Jun 14 '07 #1
7 2975
I've worked in the program and I was able to get it to change the
image in the next frame:

1. First probem is I can't seem to figure out how to get x to be a
different url when the user mouse over the thumb nail:

2. is there a way that I can only update the image and not dynamicly
create the whole page? the larger image stacks in the context
frame.

html>
<head>
<title>
</title>
<script language="javascript" type="text/javascript">

if (document.images)
{
image1= new Image;
image2= new Image;
image3= new Image;

image1.src="images/large/1.gif";
image2.src="images/large/2.gif";
image3.src="images/large/3.gif";
var x=image1.src="images/large/1.gif";

}
else{
image1="";
image2="";
image3="";
document.placeholder="";
}


function writeContent(thispage)
{
//parent.content.document.write("<html<head<\/head<body
bgcolor='green'><h1>")
parent.content.document.write("You are now <br>looking at
page"+thispage+"<img src="+x+" name='placeholder'>")
//parent.content.document.write("<\/h1><\/body><\/html>")

}
</script>
</head>
<body>
nav<br>
<img src="1t.gif" onMouseover="javascript:writeContent(1)">


</body>
</html>

Jun 14 '07 #2
ASM
Leoa a écrit :
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.-

------------------------------------------
master_frame.html------------------------------

<html>
<head>
<title>Frames Set, Index with Bannere and Footer</title>
</head>
<frameset rows="64,*,64">
<frame name="top" scrolling="no" noresize src="top.html">
<frameset cols="150,*">
<frame name="index" src="index.html">
<frame name="main" src="main.html">
</frameset>
<frame name="bottom" scrolling="no" noresize src="bottom.html">
</frameset>
</html>
---------------------------------------------
index.html------------------------------------
//contains thumbnails
<html>
<head><titleEvent 1</title>
for instance place here this code :

<base target="main">
<script language="javascript" type="text/javascript">
<!-- hide script from old broswers

if (document.images)
{
image1= new Image;
image2= new Image;
image3= new Image;

image1.src="images/large/1.gif";
image2.src="images/large/2.gif";
image3.src="images/large/3.gif";

}
else{
image1="";
image2="";
image3="";
document.placeholder="";
}
//-->

</script>

</head>
<body>
<h2Event 1</h2>
<div class="content">
<img src="images/placeholder.gif" name="placeholder">

<a href="#"
onMouseover="parent.main.getElementByID('overimage ').src=image3.src"
onMouseout="document.placeholder.src=image3.src">< img src="images/
thumb/1t.gif"></a>
parent.main.document !!!!
^^^^^^^^^

<a href="images/large/3.gif"
onmouseover="parent.main.document.getElementByID(' overimage').src=image3.src"
onmouseout="document.placeholder.src=image3.src"
onclick="return false;"><img src="images/thumb/1t.gif"></a>
or :

<a href="images/large/3.gif"
onmouseover="parent.main.document.images['overimage'].src=image3.src"
onmouseout="document.placeholder.src=image3.src"
onclick="return false;"><img src="images/thumb/1t.gif"></a>

</body>
</html>
main.html-----------------------------------
//large image display

<html>

<body>
<img id="overimage">
<img id="overimage" name="overimage" src="" alt="Viewer">
</body>
</html>

--
Stephane Moriaux et son (moins) vieux Mac déjà dépassé
Stephane Moriaux and his (less) old Mac already out of date
Jun 17 '07 #3
dd
On Jun 14, 9:47 pm, Leoa <leondria.bar...@gmail.comwrote:
image1= new Image;
Why does this work without parentheses ? I just tried the
following little test and in Fiddler I saw both image
requests being made, and I see "hello" get document.written.

<html><body>
<script>
img1 = new Image;
img1.src="http://example.com/i1.gif";

img2 = new Image();
img2.src="http://example.com/i2.gif";

myarray = new Array;
myarray[2]="hello";
document.write(myarray[2]);
</script>
</body></html>

Why have all the books and JS examples on the web shown
the parentheses all these years if they weren't needed ?

I already switched to using =[]; for new arrays (in case
anyone suggests it).

Jun 18 '07 #4
dd wrote:
On Jun 14, 9:47 pm, Leoa <leondria.bar...@gmail.comwrote:
>image1= new Image;

Why does this work without parentheses ? I just tried the
following little test and in Fiddler I saw both image
requests being made, and I see "hello" get document.written.
You know, I don't really know, but I have always used parentheses when
the end goal required a parameter. For example:

var arr1 = new Array(10); // I know it will contain 10 elements
var arr2 = new Array; // no clue of the length, I just need an array

Maybe you could post this as a new thread and someone else could provide
further feedback?
<html><body>
<script>
img1 = new Image;
img1.src="http://example.com/i1.gif";

img2 = new Image();
img2.src="http://example.com/i2.gif";

myarray = new Array;
myarray[2]="hello";
document.write(myarray[2]);
</script>
</body></html>

Why have all the books and JS examples on the web shown
the parentheses all these years if they weren't needed ?

I already switched to using =[]; for new arrays (in case
anyone suggests it).
That is still, in my opinion, user preference. One theory however is
that it reduces overhead by using a literal instead of the constructors
invoked by "new Object" or "new Array." Actually, theory is probably
wording it incorrectly.

It *does* reduce overhead.

This is the same relative theory about using the unary + operator as
opposed to using Number to type cast.

I cannot remember where I read this, it had to have been the FAQ, or Mr.
Cornford's site, maybe even the JavaScript Toolbox perhaps. Although I
couldn't find it in any of those locations.

--
-Lost
Remove the extra words to reply by e-mail. Don't e-mail me. I am
kidding. No I am not.
Jun 18 '07 #5
Hi lost,

thanks for replying to my message. It was a real headache to figure
out. But I found another ( cheesey way) of doing this.

<html>
<head>
<meta name="robots" content="noindex,nofollow">

<title>
</title>
<script language="javascript" type="text/javascript">
var x;
function myfunction(txt)
{
x=txt;
parent.content.document.getElementById('changeImg' ).innerHTML =
"<img src="+x+" name='placeholder'>";
}
</script>
</head>
<body bgcolor="#f3efcc">
<a href="left5.html" TARGET="_self">page 1</a <a href="page1.html"
TARGET="_self">page 2</a<br><br>
<img src="images/thumb/1t.gif" onMouseover="myfunction('images/large/
1.gif')">
<img src="images/thumb/2t.gif" onMouseover="myfunction('images/large/
2.gif')">

</body>
</html>
Again, Thankyou.

On Jun 18, 11:15 am, -Lost <maventheextrawo...@techie.comwrote:
dd wrote:
On Jun 14, 9:47 pm, Leoa <leondria.bar...@gmail.comwrote:
image1= new Image;
Why does this work without parentheses ? I just tried the
following little test and in Fiddler I saw both image
requests being made, and I see "hello" get document.written.

You know, I don't really know, but I have always used parentheses when
the end goal required a parameter. For example:

var arr1 = new Array(10); // I know it will contain 10 elements
var arr2 = new Array; // no clue of the length, I just need an array

Maybe you could post this as a new thread and someone else could provide
further feedback?


<html><body>
<script>
img1 = new Image;
img1.src="http://example.com/i1.gif";
img2 = new Image();
img2.src="http://example.com/i2.gif";
myarray = new Array;
myarray[2]="hello";
document.write(myarray[2]);
</script>
</body></html>
Why have all the books and JS examples on the web shown
the parentheses all these years if they weren't needed ?
I already switched to using =[]; for new arrays (in case
anyone suggests it).

That is still, in my opinion, user preference. One theory however is
that it reduces overhead by using a literal instead of the constructors
invoked by "new Object" or "new Array." Actually, theory is probably
wording it incorrectly.

It *does* reduce overhead.

This is the same relative theory about using the unary + operator as
opposed to using Number to type cast.

I cannot remember where I read this, it had to have been the FAQ, or Mr.
Cornford's site, maybe even the JavaScript Toolbox perhaps. Although I
couldn't find it in any of those locations.

--
-Lost
Remove the extra words to reply by e-mail. Don't e-mail me. I am
kidding. No I am not.- Hide quoted text -

- Show quoted text -

Jun 18 '07 #6
dd
On Jun 18, 5:15 pm, -Lost <maventheextrawo...@techie.comwrote:
You know, I don't really know, but I have always used parentheses when
the end goal required a parameter. For example:

var arr1 =newArray(10); // I know it will contain 10 elements
var arr2 =newArray; // no clue of the length, I just need an array

Maybe you could post this as anewthread and someone else could provide
further feedback?
I just noticed that at the JavaScript 1.5 reference
site at mozilla, even they don't use new Array;
http://developer.mozilla.org/en/docs..._Objects:Array
Search for new Array(); and you find it several times.

Jun 19 '07 #7
dd wrote:
On Jun 18, 5:15 pm, -Lost <maventheextrawo...@techie.comwrote:
>You know, I don't really know, but I have always used parentheses when
the end goal required a parameter. For example:

var arr1 =newArray(10); // I know it will contain 10 elements
var arr2 =newArray; // no clue of the length, I just need an array

Maybe you could post this as anewthread and someone else could provide
further feedback?

I just noticed that at the JavaScript 1.5 reference
site at mozilla, even they don't use new Array;
http://developer.mozilla.org/en/docs..._Objects:Array
Search for new Array(); and you find it several times.
Yep.

Offhand I decided to check the mighty Mr. Crockford's JSLint to see what
it would say, and it actually spit the error:

"Missing '()' invoking a constructor."

....on:

var arr1 = new Array;

Now, again, I see the call operator being necessary only (and obviously)
when you need to pass a parameter. I have witnessed no catastrophic
behavior from this, but nor have I tested it farther than checking the
instanceof arr1.

One thing I do not agree with is:

"Error: Use the array literal notation []."

Granted, we know about the optimization benefits from using literals.
However, to teach "whoever" that it is an error is erroneous in and of
itself.

I guess if you absolutely needed an array of a specific size and don't
know its contents, JSLint would have you do:

var arr1 = [];
for (var i = 0; i < 100; i++)
{
arr1[i] = null; // or '' or *whatever*
}

I think I'll stick to "new Array(100)".

And speaking of which, the documentation and prevention of the increment
and decrement operators boggles me. Is:

for (var i = 0; i < 100; i = i + 1)

....actually supposed to be more efficient than the normal
(aforementioned) method?

--
-Lost
Remove the extra words to reply by e-mail. Don't e-mail me. I am
kidding. No I am not.
Jun 20 '07 #8

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

24
by: Charles Crume | last post by:
Hello; My "index.htm" page has 3 frames (content, navigation bar, and logo). I set the "SRC" of the "logo" frame to a blank gif image and then want to change it's contents after the other two...
2
by: RWD | last post by:
I am trying to figure out how to change the target frame in my hyperlink on a DHTML menu. The menu is in one frame and the target frame is called "main" The code is below: Thanks in advance...
3
by: Robert | last post by:
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...
14
by: Frances Del Rio | last post by:
if (parent.frames.main.location == 'mediaselect.html') { I have a very simple frameset, name of frame where I'm checking is 'main'... why is this not working? I mean this is correct syntax,...
3
by: Evan | last post by:
I have a web page with 2 frames. The left frame is running menu.aspx and the right frame is running images.aspx. When a selection is made in menu.aspx I call a method in images.aspx and pass a...
2
by: PieOPah | last post by:
I have a webpage that uses frames (yes I know, frames - previously been flamed about that, but I do not know anything else to use since I am clueless!!! Been asked to cobble together a site since...
4
by: ArrK | last post by:
I want to use a control frame to create and/or modify the content (images and text) of a display frame - all files and images are client side. . When I try to write to the display frame from the...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
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
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 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 former...

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.