/    Sign up×
Community /Pin to ProfileBookmark

how do use the "onclick" function from iframe to alter items in parent window?

Hi,
I’m trying to write a photo gallery page here using javascript, xhtml and php.

In my main html page, i have 1 div tag that holds a image (default image to a company logo) and 1 IFrame, which contains a brunch of little thumbnail images.

Within my IFame, I already got the javascript function to handle the scrolling.

What I’d like to do, is each image will have a onclick function, when user click that image within Iframe, I’d like to load that image within the div tag on the main html page. How can I trigger the parent’s div tag using script?

p.s: i’m a very novice javascript programmer, if possible, please try provide cross browser solution.

Thank you very much ?

to post a comment
JavaScript

4 Comments(s)

Copy linkTweet thisAlerts:
@phpnoviceMay 28.2006 — parent.document.images["imageName"].src = "some url";

Of course, there's no substitute for making the time to take a complete [URL=http://www.webreference.com/programming/javascript/diaries/]JavaScript Tutorial[/URL] and, thereby, improve your own coding abilities.

Cheers.
Copy linkTweet thisAlerts:
@sirpelidorauthorMay 28.2006 — hi phpnovice, thanks for the tip.

I noticed I was able to get it work with the following code:

parent.document.getElementById("myimage").src = "image1.gif";

are both getElementById and Images are cross browser enable?

which is better choice ?

Thank you
Copy linkTweet thisAlerts:
@phpnoviceMay 28.2006 — Yes, [B]getElementById[/B] and the [B]images[/B] collection are normally both cross-browser compatible. Where standard collections are available, I stick with those. I use [B]getElementById[/B] where standard collections are not available. The reason is that it takes longer to find an object via [B]getElementById[/B] than it does to just reference it via a pre-built standard collection.
Copy linkTweet thisAlerts:
@JPnycMay 28.2006 — Or if you want to be a REALLY stingy coder, you don't have to give the image a name, you can reference it numerically; 0 if it's the 1st image tag in the doc, 1 if it's the 2nd, etc.
×

Success!

Help @sirpelidor 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.20,
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,
)...