[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now


1click,2effects/Frame photo-album

Posted on 2004-08-15
Medium Priority
Last Modified: 2007-12-19
Hi, I'm tryin' to create a simple picture album in frames A,B & C.
A frame= menu, contains thumbnails;
B frame= main pic display window when clicks made in 'A' frame;
C frame= should display picture description.
In short, 1 click on thumbnail, displays picture in 'B' and it's description in 'C'.

I could get A & B, but not C.
Any tips will be awesome! Thanks!

Question by:tenzinmin
  • 5
  • 3

Expert Comment

ID: 11804561
Hiya tenzimin,
It would be nice to see your current code, then at leaqst we know what needs to be done.

On another note: Are you really sure you want to use frames for this? It's an archaic html technology that is replaced by server side technologies for the most part years ago.


Author Comment

ID: 11804654
Hi Klykken,
Following code is placed in iframeA.

<a href="picture1.jpg" target="iframeB" >
<img border="1" src="pic1thumnail.jpg" width="100" height="67"></a>

When the 'pic1thumbnail'  is clicked, the real picture displays in iframeB. What I need is a special 'tag' or 'code', something that could generate the picture description in 'iframeC' w/ that one same click.

I know following codes wouldnt work..just an idea..

<a href="picture1.jpg" target="iframeB" a href="description.html" target="iframeC'>
<img border="1" src="pic1thumnail.jpg" width="100" height="67"></a>

Af forme, frames looks lil' easier then javas..  :) Thanks!

Expert Comment

ID: 11804703
Just add a little javascript to your link like this:
<a href="picture1.jpg" target="iframeB" onClick="parent.iframeC.location='description.html'">
<img border="1" src="pic1thumnail.jpg" width="100" height="67"></a>

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!


Expert Comment

ID: 11804817
Hiya COBOLdinosaur!
Coming from you, that greeting actually means something :-) I've been away for a while, but I guess I'm back now.

Author Comment

ID: 11804893
That was helpful..u rock!..hehe..okay..I'll increase the points by 50 more and ask one related question:
I dont wanna make 50 different description pages for my 50 pix, I'd rather make one page and have all description interconnected. Eg: http://www.htmlcodetutorial.com/frames/noframesrecipes.html
Where they use this sign '#' to link the description. But I dont want user to click many times. So user should click a thumbnail, & gets the real picture1 + exact #description1. Can you help me on this? Thanks!

Accepted Solution

klykken earned 600 total points
ID: 11804942
hi tenzomin,
This is actually a great example of why you should'nt use frames :-) This gets overcomplicated. Html pages should be *one* page (in my world anyways). But enough of my rant, let's see if we can hack our way through this soyou can make your frames to work :-)

First of all you need to insert an anchor inside your description.html right before each description starts, like this:
<a name="desc1"></a>
Description 1 etc etc
<a name="desc2"></a>
Description 2 etc etc
<a name="desc3"></a>
Description 3 etc etc

Now you need to change your thumbnail links to this, so that each link will link to the correct anchor in your (now) looong description page:

<a href="picture1.jpg" target="iframeB" onClick="parent.iframeC.location='description#desc1.html'">
<img border="1" src="pic1thumnail.jpg" width="100" height="67"></a>

<a href="picture2.jpg" target="iframeB" onClick="parent.iframeC.location='description#desc2.html'">
<img border="1" src="pic2thumnail.jpg" width="100" height="67"></a>

<a href="picture3.jpg" target="iframeB" onClick="parent.iframeC.location='description#desc3.html'">
<img border="1" src="pic3thumnail.jpg" width="100" height="67"></a>


You get the point :-)



Author Comment

ID: 11805136
Hey Klykken! I dunno wut 2 say..you're jst GrRrrEaATT!! haha.. it worked!! Only thing I had to fix is..


..into...(moved .htm in front....)


Thank you so much! hope to c ya again! haha!! TekKare!

Expert Comment

ID: 11805160
oops my mistake..
Good job figuring out what to change in my code though :-)
Good Luck with your photoalbum!


Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses

834 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question