/    Sign up×
Community /Pin to ProfileBookmark

clear and make new page in IFRAME

Copy linkTweet thisAlerts:
May 14.2003

I am working on a image gallery web page.

you can see it at [url]www.geocities.com/picsofmeandher[/url].
don’t worry, [B]no[/B] 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

to post a comment
JavaScript

15 Comments(s) ↴

Copy linkTweet thisAlerts:
@NevermoreMay 14.2003 — 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.
Copy linkTweet thisAlerts:
@blazerman34authorMay 14.2003 — 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:
[CODE]
<script>
document.write('<img src="' + ImageID + '.jpg">');
</script>
[/CODE]
Copy linkTweet thisAlerts:
@JonaMay 14.2003 — But what would the point be? It wouldn't preload the images.
Copy linkTweet thisAlerts:
@blazerman34authorMay 14.2003 — 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.
Copy linkTweet thisAlerts:
@JonaMay 14.2003 — 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>
Copy linkTweet thisAlerts:
@blazerman34authorMay 14.2003 — another thing i should mention is that the pictures are in the IFrame to begin with.
<i>
</i>| | |
| | ______ |
| | | | |
| | | pic | |
| | | | |
| | |______| |
| | |

goes to:

| | |
| | ______ |
| | | | |
| | | big | |
| | | pic | |
| | |______| |
| | |
Copy linkTweet thisAlerts:
@JonaMay 14.2003 — 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?
Copy linkTweet thisAlerts:
@blazerman34authorMay 14.2003 — go to this webpage http://www.geocities.com/picsofmeandher

click to see pictures and you'll see how they are set up...
Copy linkTweet thisAlerts:
@JonaMay 14.2003 — I grasped the idea originally when I posted that script. Did you even try it?
Copy linkTweet thisAlerts:
@blazerman34authorMay 14.2003 — where do i put it? in the iframe htm, or outside the iframe htm?

I don't want to do it wrong.
Copy linkTweet thisAlerts:
@JonaMay 14.2003 — Outside of the IFrame page. Your IFrame is inside of it:

<iframe name="iframe1" src="myImg.jpg"></iframe>
Copy linkTweet thisAlerts:
@blazerman34authorMay 14.2003 — 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.
Copy linkTweet thisAlerts:
@JonaMay 14.2003 — Ugh.... No, that's not what I mean. Make a [b]new[/b] 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.)
Copy linkTweet thisAlerts:
@JonaMay 14.2003 — <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>
Copy linkTweet thisAlerts:
@JonaMay 14.2003 — <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>
×

Success!

Help @blazerman34 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.16,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...