clear and make new page in IFRAME

[blazerman34]

I am working on a image gallery web page.

you can see it at www.geocities.com/picsofmeandher.
don't worry, no nudes.

I have been wondering how to make a javascript onmouseclick script, that when i click on a picture, it will generate a new page, WITHIN an IFrame.

The new page will have a bigger size of the selected picture, and it will be centered with a background color "#c0c0c0".


The reason i ask is that, when I click on a picture, it goes to a white background with the picture in the top left hand corner.
I don't like that...

Any help would be great!!!

Thanks.
Blazerman34

[Nevermore]

Anything you do with JavaScript will fail for 10% of users. your other options are using Server-side scripts (not supported by free Geocities), or making all of the pages.

[blazerman34]

I'm sure that there is a way just to make a clear html page, and when the image is pressed, it can save the variable for an image. So when it changes pages to that clear html page it does something like:

<script>
document.write('<img src="' + ImageID + '.jpg">');
</script>

[Jona]

But what would the point be? It wouldn't preload the images.

[blazerman34]

by default when you click on the url to an image, it shows up in the left hand corner of the page. With a white background.

This page is just a personal page for me and my family so i don't care if most users aren't able to view it.

I just want when you click on an image, it will refresh to a page that is clear, and it puts the full size image in the center of an IFrame.

It sounds confusing i know... but i need help, i'm only a n00b at this stuff.

[Jona]

If the frame is named, "iframe1"

<script type="text/javascript">
<!--
function loadImg(img){top.iframe1.location.href=img;}
// -->
</script>

<iframe name="iframe1" src="someimg.jpg">You are using Netscape 4 or lower, please upgrade your browser.</iframe>

<a href="javascript:loadImg('file1.jpg');">File1 (JPEG)</a><br>
<a href="javascript:loadImg('file2.jpg');">File2 (JPEG)</a>

[blazerman34]

another thing i should mention is that the pictures are in the IFrame to begin with.

| | |
| | ______ |
| | | | |
| | | pic | |
| | | | |
| | |______| |
| | |

goes to:

| | |
| | ______ |
| | | | |
| | | big | |
| | | pic | |
| | |______| |
| | |

[Jona]

I don't think that should have any bearing on the fact that we're loading a new image? Do you want to resize the images?

[blazerman34]

go to this webpage http://www.geocities.com/picsofmeandher

click to see pictures and you'll see how they are set up...

[Jona]

I grasped the idea originally when I posted that script. Did you even try it?

[blazerman34]

where do i put it? in the iframe htm, or outside the iframe htm?

I don't want to do it wrong.

[Jona]

Outside of the IFrame page. Your IFrame is inside of it:

<iframe name="iframe1" src="myImg.jpg"></iframe>

[blazerman34]

yeah, but the link to the picture is already inside the iframe, i'm trying to go from iframe to iframe.

not from outside the iframe to the iframe.

[Jona]

Ugh.... No, that's not what I mean. Make a new page, with the code I gave you in it. Just replace the names of the pictures to your own. (e.g., myImg.jpg would be the name of your image, then you just add .jpg to the end of it. Just like HTML.)

[Jona]

<script type="text/javascript">
<!--
function loadImg(img){
top.iframe1.document.bgColor="black";
top.iframe1.document.images["myImg"].src=img;}
// -->
</script>

<iframe name="iframe1" src="clear.htm">You are using Netscape 4 or lower, please upgrade your browser.</iframe>

<a href="javascript:loadImg('file1.jpg');">File1 (JPEG)</a><br>
<a href="javascript:loadImg('file2.jpg');">File2 (JPEG)</a>

[Jona]

<script type="text/javascript">
<!--
function loadImg(img){
top.iframe1.document.bgColor="#c0c0c0";
top.iframe1.document.images["myImg"].src=img;}
// -->
</script>

<iframe name="iframe1" src="clear.htm"></iframe>

<a href="javascript:loadImg('file1.jpg');">File1 (JPEG)</a><br>
<a href="javascript:loadImg('file2.jpg');">File2 (JPEG)</a>