Use one frame to change images in another frame.

L

Leoa

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><title> Event 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>
<h2> Event 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>
 
L

Leoa

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

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><title> Event 1</title>
Click to expand...

for instance place here this code :

<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>
<h2> Event 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>
Click to expand...

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"
 
D

dd

image1= new Image;
Click to expand...

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

-Lost

dd said:
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.
Click to expand...

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).
Click to expand...

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

Leoa

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.



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.
Click to expand...

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

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 -
Click to expand...
 
D

dd

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?
Click to expand...

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/Core_JavaScript_1.5_Reference:Global_Objects:Array
Search for new Array(); and you find it several times.
 
L

-Lost

dd said:
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/Core_JavaScript_1.5_Reference:Global_Objects:Array
Search for new Array(); and you find it several times.
Click to expand...

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 = 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?
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

New to coding - image to the time of day based on time 2
How can i fix Mysql images not found error? 0
Flip-Cards with Local Images 1
How to have two html audio players on one page? 0
Image not changing between "mute" & "un-mute" images. 5
Only one table shows up with the information 2
Having difficulty with the layout of these images / video for this web page 2
change image in another frame 3

Members online

Total: 25 (members: 1, guests: 24)
Robots: 225

Forum statistics

Threads
473,764
Messages
2,569,564
Members
45,039
Latest member
CasimiraVa

Latest Threads

Top