Image show with javascript

A

ABC

I am a total newbie to javascript. I have only done Frontpage.

I am trying to do a page of image show----I only managed to find a
javascript to create pop up windows for the chosen image. Almost good
but I want better.
http://www.fontstuff.com/frontpage/fptut17.htm

I want the viewer to lick on the text word in the main page and the
corresponding image will show in the iframe instantly, (or text in the
frame and image on the main page). It will be about 30 images so I
will need to download them all first.

I cannot find any javascript to allow control of the frame from the
main page, or the main page from the frame. Please help.

main page=main.htm
image=image.htm
text=text1, text2,...
image =pic1, pic2...



ABC
Do not reply by email. Replay to NG
 
L

Lee

ABC said:
I want the viewer to lick on the text word in the main page and the
corresponding image will show in the iframe instantly, (or text in the
frame and image on the main page).
Click to expand...

I have *got* to start making an effort to keep up with accessibility options.
 
D

Dag Sunde

Lee said:
ABC said:


I have *got* to start making an effort to keep up with accessibility options.
Click to expand...

Agree!

This opens up for a completely new user experience...

LOL!
 
M

McKirahan

ABC said:
I am a total newbie to javascript. I have only done Frontpage.

I am trying to do a page of image show----I only managed to find a
javascript to create pop up windows for the chosen image. Almost good
but I want better.
http://www.fontstuff.com/frontpage/fptut17.htm

I want the viewer to lick on the text word in the main page and the
corresponding image will show in the iframe instantly, (or text in the
frame and image on the main page). It will be about 30 images so I
will need to download them all first.

I cannot find any javascript to allow control of the frame from the
main page, or the main page from the frame. Please help.

main page=main.htm
image=image.htm
text=text1, text2,...
image =pic1, pic2...



ABC
Do not reply by email. Replay to NG
Click to expand...

"I want the viewer to lick ..." -- so would I!

Will this help? Watch for word-wrap.

<html>
<head>
<title>iframed.htm</title>
<script type="text/javascript">
var pix = new Array();
pix[0] = "http://www.fontstuff.com/images/fptut17a_small.jpg";
pix[1] = "http://www.fontstuff.com/images/fptut17b_small.jpg";
pix[2] = "http://www.fontstuff.com/images/fptut17c_small.jpg";
function pic(t) {
document.all.i.src = pix[t];
}
</script>
</head>
<body>
<center>
<a href="javascript:pic(0)">Picture 1</a> |
<a href="javascript:pic(1)">Picture 2</a> |
<a href="javascript:pic(2)">Picture 3</a>
<br><br>
<iframe name="i" align="center"
frameborder="0" scrolling="no"
marginwidth="0" marginheight="0"
style="width:150; height:112"></iframe>
<br><br>
<sup><a href="http://www.fontstuff.com/frontpage/fptut17.htm"
target="_blank">Making a Browser Window Fit an Image</a></sup>
<center>
</body>
</html>
 
M

Martin Honnen

McKirahan wrote:

var pix = new Array();
pix[0] = "http://www.fontstuff.com/images/fptut17a_small.jpg";
pix[1] = "http://www.fontstuff.com/images/fptut17b_small.jpg";
pix[2] = "http://www.fontstuff.com/images/fptut17c_small.jpg";
function pic(t) {
document.all.i.src = pix[t];
Click to expand...

If you want to script frames across browsers you would better use
window.frames.i.location.href = ...
<a href="javascript:pic(0)">Picture 1</a> |
<a href="javascript:pic(1)">Picture 2</a> |
<a href="javascript:pic(2)">Picture 3</a>

<iframe name="i" align="center"
frameborder="0" scrolling="no"
marginwidth="0" marginheight="0"
style="width:150; height:112"></iframe>
Click to expand...

What is the script good for, why not simply use links e.g.
<a href="http://www.fontstuff.com/images/fptut17a_small.jpg"
target="i">Picture 1</a>
?
 
M

McKirahan

Martin Honnen said:
McKirahan wrote:

var pix = new Array();
pix[0] = "http://www.fontstuff.com/images/fptut17a_small.jpg";
pix[1] = "http://www.fontstuff.com/images/fptut17b_small.jpg";
pix[2] = "http://www.fontstuff.com/images/fptut17c_small.jpg";
function pic(t) {
document.all.i.src = pix[t];
Click to expand...

If you want to script frames across browsers you would better use
window.frames.i.location.href = ...
Click to expand...

Both work in IE5.5 and FF1.0.
Neither works in NS6.2 and Opera6.1 (for me).
What is the script good for, why not simply use links e.g.
<a href="http://www.fontstuff.com/images/fptut17a_small.jpg"
target="i">Picture 1</a>
?
Click to expand...

Excellent and it works in my 4 browsers!


One thing I didn't do was preload the images per:

"It will be about 30 images so I will need to download them all first."
 
A

ABC

Agree!

This opens up for a completely new user experience...
Click to expand...
Yeah . Very funny about the typo. But that is actually possible.....

Do you have a script to help?

ABC
Do not reply by email. Replay to NG
 
A

ABC

Thanks very much. but I am totally new to javascript. Can you please
explain which is the bit to put in the main page to control the frame.
I supoose the one you wrote was for the frame page.

Where is the reference to the text1,text2...? I want the viewer to
click text1 and see pic1 in the frame, click text2 and the frame will
instantly change to pic2.

Thanks

Will this help? Watch for word-wrap.

<html>
<head>
<title>iframed.htm</title>
<script type="text/javascript">
var pix = new Array();
pix[0] = "http://www.fontstuff.com/images/fptut17a_small.jpg";
pix[1] = "http://www.fontstuff.com/images/fptut17b_small.jpg";
pix[2] = "http://www.fontstuff.com/images/fptut17c_small.jpg";
function pic(t) {
document.all.i.src = pix[t];
}
</script>
</head>
<body>
<center>
<a href="javascript:pic(0)">Picture 1</a> |
<a href="javascript:pic(1)">Picture 2</a> |
<a href="javascript:pic(2)">Picture 3</a>
<br><br>
<iframe name="i" align="center"
frameborder="0" scrolling="no"
marginwidth="0" marginheight="0"
style="width:150; height:112"></iframe>
<br><br>
<sup><a href="http://www.fontstuff.com/frontpage/fptut17.htm"
target="_blank">Making a Browser Window Fit an Image</a></sup>
<center>
</body>
</html>
Click to expand...


ABC
Do not reply by email. Replay to NG
 

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

Background image not showing up on html page 3
How Do I Set text on an Image and use the image as a border? 7
Iframe cross-domain access with JavaScript 1
Image upload not working in browser 4
JavaScript in Acrobat Save As Found Text 3
Decrypting in Javascript 8
Decrypting using Javascript 0
Help with Javascript on my wordpress page 1

Members online

No members online now.
Total: 30 (members: 0, guests: 30)
Robots: 367

Forum statistics

Threads
473,769
Messages
2,569,582
Members
45,065
Latest member
OrderGreenAcreCBD

Latest Threads

Top