How can I change an image in another frame

I am trying to build a web page so that soldiers going overseas can upload pictures and let the folks back home see them and copy them so mom and kids can still see dad.

I have 3 frames: PicturePage.html; ShowPictures.html and BottomBanner.html.

PicturePage.html will have at least 30 pictures for the parents to look at.  When they click on a picture here, I want an enlarged picture to display in ShowPicture.html. Now they can right click and download/save the picture.

BottomBanner is just for instructions
jurictaAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Pawel WitkowskiSenior Javascript DeveloperCommented:
If all .html files are from one server this is trival. Just read for example this topic:

http://bytes.com/forum/thread147921.html


If you .html files are on other server ...Thats a security server policies and you have to figure out something :)
0
Michel PlungjanIT ExpertCommented:
<a href="bigimage.jpg" target="pictureFrame"><img src="smallImage.jpg" border="0"></a>

No script needed
0
Michel PlungjanIT ExpertCommented:
The example given by wilq is not very compatible.

Here is a better version (assuming all pages are from the same server)


I am assuming
 
<frame name="showpicture" src="showpicture.html">
 
and in showpicture.html:
 
<img src="blank.gif" NAME="bigImage"> - it is important not to have height and width here unless all images have the same format
 
picturepage.html:
<a href="bigimage.jpg" target="showpicture" 
onClick="top.showpicture.document.bigImage.src=this.href;
return false"><img src="smallimage.jpg" border="0"></a>
 
the return false is also imperative and if javascript is not available, the frame will have the big image loaded anyway

Open in new window

0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

jurictaAuthor Commented:
mplungian,

What page does this code go on?  I would like to test it.  I tried the solution from wilg32 and it did not work at this time.
0
Michel PlungjanIT ExpertCommented:
the code goes on each of the small images

So assuming you have

<frameset ...>
<frame name="showpicture" src="showpicture.html">
and in showpicture where you want the big picture to appear you have

<img src="blank.gif" NAME="bigImage">

where blank.gif is a placeholder image

the picturepage.html will need to have

<a href="submarine_picture_big_format.jpg" target="showpicture" 
onClick="top.showpicture.document.bigImage.src=this.href;
return false"><img src="submarine_picture_thumbnail.jpg" border="0"></a>
 
<a href="me_and_my_gun_big_format.jpg" target="showpicture" 
onClick="top.showpicture.document.bigImage.src=this.href;
return false"><img src="me_and_my_gun_thumbnail.jpg" border="0"></a>
 
so the image urls change but the rest stays the same
 
If you still do not get it to work, please attach the frameset code and the showpicture.html and an example of picturepage.html

Open in new window

0
jurictaAuthor Commented:
I now get that the "page cannot be displayed".  aNY HELP?  Here is my code:

Frameset.html
     <frameset cols="145,*">
     <frame src="picturepage.htm" name="menu">
      <frameset rows="*,80">
     <frame name="showpicture" src="showpicture.htm">
     <frame src="BottomBanner.html" name="bottom">
      </frameset>
     </frameset>

picturepage.htm
     <a href="bigimage.jpg" target="showpicture"
     onClick="top.showpicture.document.bigImage.src=this.href; return false"><img        
     Src="images/Airborne.jpg" width="678" height="472" alt="" border="0"></a>

showpicture.htm
     <img src="blank.gif" NAME="bigImage">

0
Michel PlungjanIT ExpertCommented:

That has nothing to do with the script.

that has to do with a missing page in your folder.

Also I meant


picturepage.htm

     <a href="images/Airborne.jpg" target="showpicture"
     onClick="top.showpicture.document.bigImage.src=this.href; return false"><img        
     Src="images/Airborne_thumbnail.jpg"
width="60" height="40" alt="" border="0"></a>

There is no room in the left page to show the full size image

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
jurictaAuthor Commented:
mplungian,

I made the corrections you showed above.  When I click on the image in the left frame (picturepage.htm) the picture does not display in the right frame (showpicture.htm)  If I RIGHT CLICK on the imag holder in the right frame and choose properties, it DOES say that the picture name is the SAME as the one I CLICKED on in the right frame.  Any ideas?  I am using EVRSOFT as my web page builder
0
jurictaAuthor Commented:
Thanks for your help.  I did not ask this originally but...how would this be done if the images were in a sub directory (called "images"  to the one holding the htm files?

Excellent help
0
Michel PlungjanIT ExpertCommented:
The code does the following:

<a    <<< A hyperlink 
 
href="images/Airborne.jpg" <<<  Make the link point to a big image in the images subdir under where the html file is
 
target="showpicture" <<<< if the user does not have javascript turned on, load the big image into the frame
 
onClick="top.showpicture.document.bigImage.src=this.href; <<<< Take the image mentioned in the href and replace an image named bigImage in the html page living in the frame called showpicture
 
return false" <<<< Do NOT follow the link - the javascript did the action here
 
><img        
    Src="images/Airborne_thumbnail.jpg" <<< inside the link put a THUMBNAIL of the image we had
width="60" height="40" alt="" border="0"></a>

Open in new window

0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.